Sidebar Setup Guide

Our theme provides flexible sidebar management, allowing you to set global defaults while giving you granular control over specific post types and pages.


Accessing Sidebar Settings

To manage your global sidebar settings, navigate to Appearance → Customize in your WordPress dashboard, then go to Sidebar.


1. Sidebar Positioning

You can define where the sidebar appears across different areas of your website.

Global Defaults

  • Default Position: This is the fallback layout for your entire site. You can choose:
  • No Sidebar (Full width content)
  • Left Sidebar
  • Right Sidebar

Specific Placements

You can override the global default for specific content types:

  • Single Post: Control the sidebar on individual blog articles.
  • Page: Control the sidebar on standard static pages.
  • Archives & Search: Control the sidebar on category pages, tag pages, and search results.

For each of these, you can choose “Default” (to inherit the global setting), or explicitly set it to No Sidebar, Left Sidebar, or Right Sidebar.

Tip: You can also override these settings on a per-page or per-post basis using the theme’s meta box settings directly in the WordPress block editor when writing a post!


2. Sidebar Styling & Width

Under the Options section, you can customize how the sidebar looks and fits into your site.

Sidebar Style

Choose how the widgets are visually presented in the sidebar:

  • Minimal: A clean, blended look with minimal separation.
  • Title Focus: Emphasizes the widget titles.
  • Widgets Separated: Adds distinct spacing and borders between individual widgets, creating a “card” effect.

Sidebar Width

Use the slider to adjust how much screen space the sidebar takes up relative to the main content. The width is defined in percentages (%), with a range from 15% to 50%. A standard sidebar is usually around 30%.


3. Sticky Sidebar

A sticky sidebar remains visible on the screen as the user scrolls down the page, which is great for keeping important links, table of contents, or advertisements in view.

Under Sticky Sidebar, choose:

  • Disable: Standard scrolling behavior.
  • Stick first widget: Only the very top widget will stick to the screen as the user scrolls.
  • Stick last widget: The sidebar will scroll normally until it reaches the bottom widget, which will then lock into place.

4. Mobile & Responsive Behavior

Sidebars are typically moved below the main content on smaller screens, but you can control this behavior.

Under Responsive Sidebar Position, choose what happens to the sidebar on mobile devices:

  • After Content: (Standard) The sidebar stacks below the main page content.
  • Before Content: The sidebar stacks above the main page content.
  • Hide: Completely hides the sidebar on mobile devices to save space.

5. Sidebar Typography

To adjust the text sizing for your sidebar widgets, open the Typography section.

  • Use the Widget Title Font Size slider to increase or decrease the heading size of your widgets. You can set specific sizes for Desktop, Tablet, and Mobile.

Saving Your Changes

Once you are satisfied with your sidebar layout, click the blue Publish button at the top of the Customizer to save your settings.

Single Post Settings Guide

Our theme gives you complete control over how individual blog posts look. From the position of the title to the ordering of meta details, you can craft the perfect reading experience.


Accessing Single Post Settings

To customize your individual articles, navigate to Appearance → Customize in your WordPress dashboard, then go to Blog → Single Post.

Tip: Open an actual blog post in the Customizer preview window so you can see your changes in real-time.


1. Title Layout & Position

Control how and where your blog post title is displayed.

  • Title Position:
  • In Content: The title appears at the top of the standard white content area.
  • In Page Header: The title is moved up into a dedicated, colored (or image) page header section above the content area, creating a more dramatic, magazine-style look.
  • Title Alignment: Choose to align your title to the Left, Center, or Right.
  • Title Spacing: Adjust the padding above and below the title to give it more breathing room.

2. Content Width

Reading long articles is easier when the lines of text aren’t too wide.

  • Content Width:
  • Content Width (Wide): The text stretches to match the maximum width of your site.
  • Narrow Width: Constrains the text to a narrower column for optimal readability.
  • Narrow Container Width: If you select “Narrow Width,” a slider will appear allowing you to define exactly how wide (in pixels) the reading column should be (e.g., 800px).

3. Post Elements (Drag and Drop)

You can easily hide or reorder the elements that appear inside a single post using the Post Elements drag-and-drop sorter.

Available elements to toggle/reorder:

  • Featured Image: The main thumbnail at the top of the post.
  • Post Categories & Tags: Where the post is filed.
  • Last Updated Date: Shows readers when the post was most recently edited.
  • About Author Box: A biographical box displaying the author’s avatar and description (pulled from their WordPress profile).
  • Next/Prev Post Links: Navigation links at the bottom of the article to keep users reading.

Click the eye icon to hide an element, or drag the hamburger icon to reorder them.


4. Post Meta Configuration

Just like on the blog archive, you can sort the “Meta” information (Author, Date, Comments count, Categories) that appears directly under your title.

  • Use the drag-and-drop sorter under Post Meta to arrange or hide these details.
  • Toggle Show avatar and icons in post meta to display the author’s profile picture and elegant icons next to the date and comment counts.

5. Comments & Typography

Toggle Comments:
If your posts generate a lot of comments, it can make the page extremely long. Enable the Show Toggle Comments switch to hide the comments section behind a button. Users click the button to expand and read the comments.

Typography:
Open the Typography section to adjust the Post Content Font Size. This ensures your articles are perfectly legible across all devices without affecting the font size of the rest of your website.


Saving Your Changes

Once you are satisfied with your single post layout, click the blue Publish button at the top of the Customizer to save your settings.

Footer Configuration Guide

Our theme offers a highly customizable footer area that you can build using WordPress widgets. This guide will help you configure the layout and styling of your site’s main footer.


Accessing the Footer Settings

To access the footer settings, navigate to Appearance → Customize in your WordPress dashboard, then go to Footer → Main Footer.

Here, you can toggle the Enable Main Footer switch to turn the entire footer area on or off globally.


1. Footer Column Layouts

The theme provides multiple grid layouts for your footer widgets, allowing you to organize your content exactly how you want.

Under Column Layout, you can choose from the following structures:

  • 1/4 + 1/4 + 1/4 + 1/4: A balanced 4-column layout, perfect for displaying multiple menus, contact info, and an about text.
  • 1/3 + 1/3 + 1/3: A balanced 3-column layout.
  • 2/3 + 1/3: A wider left column with a narrower right column.
  • 1/3 + 2/3: A narrower left column with a wider right column.

Note: Once you select a layout, you will need to add widgets to these columns by going to Appearance → Widgets (or the Widgets section in the Customizer) and adding content to the Footer widget areas.


2. Widget Alignment & Visibility

Center Widget Content:
If you want a perfectly symmetrical look, toggle the Center Widget Content option. This will center-align all text and elements inside your footer columns.

Device Visibility:
You can choose exactly which devices should display your footer. Use the dropdown to:

  • Show on All Devices
  • Hide on Mobile
  • Hide on Tablet
  • Hide on Mobile and Tablet

3. Design & Styling Options

Scroll down to the Design Options section to customize the visual appearance of your footer.

Background

Set the background for the entire footer area:

  • Solid Color: Choose a flat background color (e.g., a dark grey or brand color).
  • Gradient: Create a smooth color gradient.
  • Image: Upload a background image.

Font Colors

Ensure your text is readable against your chosen background by adjusting the colors:

  • Text Color: The primary color for standard paragraph text.
  • Link Color: The color of hyperlinks in your footer menus or text.
  • Link Hover Color: The color links change to when hovered over.
  • Widget Title Color: The color of the heading above each widget.

Borders

Add separation between your main content and the footer:

  • Add a border to the Top or Bottom of the footer area.
  • Define the Style (solid, dashed, dotted), Color, and Width.

4. Footer Typography

If you need specific font sizing for your footer that differs from the rest of the site, expand the Typography section.

  • Widget Title Font Size: Adjust the size of the headings above your footer widgets. You can set different sizes for Desktop, Tablet, and Mobile using the responsive device icons.

Saving Your Changes

Once you are happy with your footer layout and styling, click the blue Publish button at the top of the Customizer to apply the changes to your live site.

Dynamic Strings

Dynamic strings are special placeholder tags that are automatically replaced with real-time, dynamic content when your site is displayed. This allows you to insert information like the current year, site name, or logged-in user’s name into text areas without manually updating them.


Available Dynamic Strings

Use the following placeholders in any supported text field. Simply type the placeholder exactly as shown (including the double curly braces), and the theme will replace it with the corresponding value on the front end.

Dynamic StringDescriptionExample Output
{{the_year}}Displays the current year. Automatically updates each year — no manual changes needed.2026
{{the_date}}Displays the current date using the date format set in Settings → General in your WordPress dashboard.June 9, 2026
{{site_title}}Displays your site’s name as configured in Settings → General → Site Title.My Business
{{theme_link}}Outputs a link back to the theme page on WordPress.org.Theme Name (linked)
{{current_user}}Displays the display name of the currently logged-in user. If no user is logged in, it will be empty.John Doe

Where Can I Use Dynamic Strings?

Dynamic strings can be used in the following areas of the theme, accessible via the WordPress Customizer (Appearance → Customize):

1. Top Bar — Text Widget

Navigate to Top Bar → Top Bar Widgets, add or edit a Text widget, and use dynamic strings in the Content field.

2. Copyright Bar — Text Widget

Navigate to Footer → Copyright Bar → Copyright Bar Widgets, add or edit a Text widget, and use dynamic strings in the Content field.

3. Pre Footer — Call to Action Content

Navigate to Footer → Pre Footer → Content, and use dynamic strings in the CTA text area.

Tip: Any text field in the Customizer that shows the message “Shortcodes and basic HTML elements allowed. See the list of available dynamic strings.” supports dynamic strings.


Allowed HTML Elements

In addition to dynamic strings, the supported text fields also accept basic HTML elements and WordPress shortcodes. You can use HTML to style your content — for example, adding links, bold text, or line breaks.

Supported HTML Tags

TagDescriptionExample
<a>Hyperlink<a href="https://example.com" target="_blank">Visit Us</a>
<strong>Bold text<strong>Important</strong>
<em>Italic text<em>Emphasized text</em>
<b>Bold text (alternate)<b>Bold</b>
<i>Italic (or icon)<i class="icon-class"></i>
<br>Line breakLine 1<br>Line 2
<span>Inline container<span class="highlight">Text</span>
<img>Image<img src="image-url.jpg" alt="Description">

Supported Attributes

  • <a> — hrefreltargetclassroleid
  • <img> — srcaltwidthheightclassid
  • <span> — class
  • <i> — class

Shortcode Support

All text fields that support dynamic strings also support WordPress shortcodes. Simply enter any valid shortcode directly in the text field, and it will be rendered on the front end.

Example:

[your-shortcode attribute="value"]

Examples

Here are some practical examples of how to use dynamic strings:

Auto-Updating Copyright Notice

© {{the_year}} {{site_title}}. All rights reserved.

Output: © 2026 My Business. All rights reserved.

This will automatically update to the new year every January — no manual edits required.


Copyright with Theme Credit

© {{the_year}} {{site_title}} | Powered by {{theme_link}}

Personalized Welcome Message (Top Bar)

Welcome, {{current_user}}! Today is {{the_date}}.

Output: Welcome, John Doe! Today is June 9, 2026.


Copyright with Custom Link

© {{the_year}} {{site_title}} | <a href="/privacy-policy/">Privacy Policy</a>

Output: © 2026 My Business | Privacy Policy


Combining HTML and Dynamic Strings

<strong>{{site_title}}</strong> — Est. 2020–{{the_year}}

Output: My Business — Est. 2020–2026


For Developers

Extending Dynamic Strings

You can add your own custom dynamic strings using the business_interface_parse_dynamic_strings filter. Add the following code to your child theme’s functions.php or a custom plugin:

phpadd_filter( 'business_interface_parse_dynamic_strings', 'my_custom_dynamic_strings' );function my_custom_dynamic_strings( $content ) {    // Replace {{my_custom_tag}} with custom content.    $content = str_replace( '{{my_custom_tag}}', 'My Custom Value', $content );    return $content;}

After adding the code above, you can use {{my_custom_tag}} in any text field that supports dynamic strings, and it will be replaced with “My Custom Value” on the front end.


Troubleshooting

Dynamic string not being replaced?

  • Make sure the placeholder is typed exactly as shown, including the double curly braces {{ }} with no extra spaces inside.
  • Verify you are using the dynamic string in a supported text field (Top Bar Text widget, Copyright Bar Text widget, or Pre Footer CTA content).
  • Clear any caching plugin or browser cache after making changes.

{{current_user}} shows nothing?

  • This placeholder only displays content when a user is logged in. For logged-out visitors, it will output an empty string. Consider wrapping it in a conditional message or using it only in areas visible to logged-in users.