Tag: Business Interface

Table of Contents

Theme Page Options (Metabox) Guide

While our theme provides a powerful Customizer to set global defaults for your website, there will often be times when you need a specific page or post to look different from the rest.

To solve this, the theme includes the Theme Page Options metabox. This allows you to override your global Customizer settings on a per-page or per-post basis directly from the WordPress editor.

Where to Find the Theme Page Options

When you are creating or editing a Page or Post in WordPress:

  1. Look below the main text editor area (or in the sidebar if you are using the Block Editor/Gutenberg and have it pinned there).
  2. You will see a panel labeled Theme Page Options.
  3. If you don’t see it, ensure it is enabled in your WordPress Screen Options (or Options menu in the Block Editor).

1. Sidebar Override

This setting allows you to change the sidebar position for the specific page you are editing, ignoring the global default set in the Customizer.

  • Default (from Customizer): Inherits the global setting.
  • No Sidebar: Forces the page to be full-width with no sidebar.
  • Left Sidebar: Forces the sidebar to the left of the content.
  • Right Sidebar: Forces the sidebar to the right of the content.

2. Content Layout Override

This setting controls the structural container of the specific page.

  • Default (from Customizer): Inherits the global layout setting.
  • Full Width: Contained: The background stretches edge-to-edge, but the text/content is constrained to a central column for readability.
  • Full Width: Stretched: Both the background and the content stretch edge-to-edge across the screen. This is ideal when building pages with page builders like Elementor.
  • Boxed Content: The content area is wrapped in a distinct box, usually sitting on a slightly darker background.
  • Boxed: The entire website layout (header, content, footer) is boxed in a central column.

3. Transparent Header Override

A transparent header is when your main navigation bar has no background color and sits directly on top of your hero image or page content.

  • Default (from Customizer): Inherits the global transparent header setting.
  • Enable: Forces the header to be transparent on this specific page (great for landing pages).
  • Disable: Forces a solid header on this specific page, even if the transparent header is enabled globally.

4. Disable Specific Page Sections

Sometimes you need to build a specialized page (like a sales landing page or a coming soon page) where you want to remove standard website elements to keep the user focused.

The Theme Page Options provides a series of checkboxes that allow you to quickly hide elements just for the page you are editing:

  • Disable Top Bar (Only visible if the Top Bar is enabled globally)
  • Disable Main Header: Hides the logo and navigation menu entirely.
  • Disable Page Title: Removes the title banner at the top of the page.
  • Disable Breadcrumbs: Hides the breadcrumb navigation trail.
  • Disable Featured Image: Prevents the featured image from displaying automatically at the top of the post/page content.
  • Disable Pre Footer CTA: Hides the call-to-action section above the footer.
  • Disable Main Footer: Hides the widgetized footer area.
  • Disable Copyright Bar: Hides the bottom copyright text strip.

By checking these boxes, you can easily strip a page down to just its core content, making it incredibly easy to create custom landing pages without writing any code!

Global Colors & Typography Guide

Our theme makes it easy to establish your brand identity globally. Instead of changing colors and fonts on every single page, you can set global rules that apply across your entire website.

Global Colors

To manage your site’s color palette, navigate to Appearance → Customize in your WordPress dashboard, then go to General → Base Colors.

1. Accent Color

The Accent Color is the most important color setting on your site. It is used subtly throughout the theme to call attention to key elements, such as buttons, active menu items, and highlights. Set this to your primary brand color.

2. Content Colors

Expand the Content section to manage the colors used in the main body of your website:

  • Text Color: The primary color for standard paragraph text. Usually, a dark grey (like #333333) is best for readability.
  • Link Hover Color: Defines the color that text links inside your post content change to when a user hovers over them. (Note: Standard links will automatically use your Accent Color, this setting only changes the hover state).
  • Headings Color: The default color for all H1, H2, H3, H4, H5, and H6 headings across your site.

3. Boxed Content Background

If you are using a “Boxed” layout (configurable under General → Layout), you can define the Boxed Content – Background Color here. This is the color of the “paper” your text sits on, usually white or a very light grey.

Global Typography

To manage the fonts used across your site, navigate to General → Base Typography in the Customizer.

The Business Interface theme integrates seamlessly with Google Fonts, giving you access to hundreds of high-quality typefaces.

1. Base Font Size & Smoothing

  • Base Font Size: This controls the REM base of the root HTML element. Adjusting this slider will proportionally scale all typography across your entire site. The default is usually 16px.
  • Font Smoothing: Enable this to apply anti-aliasing to your text, which makes fonts look crisper and more elegant, especially on Mac/iOS devices.

2. Body Typography

Expand the Body & Content section to set the font for all standard paragraph text.

  • Click on Body Typography to choose a font family, set the font weight (e.g., 400 for normal, 700 for bold), and adjust line-height (spacing between lines of text).

3. Headings Typography

Expand the Headings (H1 – H6) section to control your title fonts.

  • Headings Default: Set a global font family for all headings here. This saves time so you don’t have to select the font 6 different times.
  • Specific Headings (H1 through H6): If you want to override the default for a specific heading level (for example, making your H1s much larger, or using a different font just for H3s), you can adjust them individually here.

4. Emphasized Text

  • Heading Emphasized Text: The theme allows you to add special styling to <em> tags used inside of headings. This allows you to create beautiful, magazine-style typographic elements by italicizing specific words in a title with a completely different font family (like a script or serif font).

Saving Your Changes

Once your colors and fonts are perfectly aligned with your brand, click the blue Publish button at the top of the Customizer to save your settings.

Main Header Configuration Guide

Our theme offers a powerful and flexible header builder built directly into the WordPress Customizer. This guide will walk you through setting up and styling your main header.

Accessing the Header Settings

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

1. Header Layout Options

The theme provides predefined layout structures for your header elements (like your logo and navigation menu).

  • Header 1: Standard layout with the logo on the left and the navigation menu aligned to the right.
  • Header 2: Centered layout where the logo is positioned above the navigation menu.
  • Header 3: Split layout with the logo on the left, navigation on the right, and additional space for widgets.

To change your layout:

  1. Under the Header Layout section, click on the visual representation of the layout you prefer.
  2. The customizer preview will update immediately.

2. Header Width

You can control how the header container aligns with the rest of your site content.

  • Content Width: The header elements align with the maximum width of your site’s main content area. This is the recommended setting for boxed or standard layouts.
  • Full Width: The header container stretches edge-to-edge across the screen, ideal for modern, wide-screen designs.

3. Header Widgets

Adding extra functionality to your header is easy using Header Widgets. You can add elements like a search icon or a call-to-action button.

How to add a widget:

  1. Scroll down to the Header Widgets section.
  2. You have two widget locations: Left and Right (relative to the navigation menu).
  3. Click the Add Widget button.
  4. Choose between available widgets such as Search or Button.
  5. Customize the widget settings (e.g., button text, link URL).

Widget Separators

If you use multiple widgets, you can add a stylish separator line between them. Under Widgets Separator, choose:

  • None: No separator.
  • Regular: A straight vertical line.
  • Slanted: An angled separator line for a dynamic look.

Device Visibility

You can control exactly where these widgets appear. Use the Device Visibility dropdown to show widgets on all devices, or hide them specifically on mobile, tablet, or both.

4. Design & Styling Options

The Business Interface theme gives you granular control over the colors and styling of the header area.

Scroll down to the Design Options section to access these settings:

Background

Control the background of the entire header area.

  • Solid Color: Choose a flat background color.
  • Gradient: Create a beautiful color transition.
  • Image: Upload a background image for a textured or photographic look.

Font Colors

Customize the text colors within the header:

  • Tagline Color: If your site tagline is displayed in the header, change its color here.
  • Link Color: The color of standard links and navigation items.
  • Link Hover Color: The color links change to when a user hovers over them with their mouse.

Borders

Add definition to your header by applying borders:

  • Add borders to the Top or Bottom of the header.
  • Define the Style (solid, dashed, dotted), Color, and Width (in pixels).
  • Separator Color: If you enabled widget separators above, you can define their exact color here.

Saving Your Changes

Once you are happy with your header configuration, click the blue Publish button at the top of the Customizer to apply the changes to your live site.

Blog and Archive Customization Guide

Our theme provides extensive options to control how your blog posts are displayed on archive pages, category pages, search results, and your main blog page.

Accessing Blog Settings

To customize your blog appearance, navigate to Appearance → Customize in your WordPress dashboard, then go to Blog → Blog Page / Archive.

1. Blog Layout Styles

The theme offers two primary structures for displaying your post feed:

  • Vertical: The traditional blog layout. The featured image is displayed at the top, followed by the title, meta information, and the post excerpt below it.
  • Horizontal: A modern, list-style layout where the featured image is displayed on one side, and the post content (title, excerpt) is displayed alongside it on the other side.

When using the Horizontal layout, you get additional options:

  • Show Post Categories: Display a list of categories above the post title.
  • Show Read More Button: Toggle the visibility of a dedicated “Read More” button.
  • Featured Image Position: Choose whether the image sits on the Left or the Right side of the content.

2. Featured Image Settings

Control how the thumbnails look across your blog feed.

Under Featured Image Size, you can select the exact dimensions the theme should use when cropping your post thumbnails. The dropdown lists all available image sizes registered on your WordPress site (e.g., Thumbnail, Medium, Large, or custom sizes). Choosing a uniform size ensures a clean, aligned grid.

3. Post Elements Visibility & Order

The Business Interface theme uses a drag-and-drop sortable interface allowing you to build the perfect post card layout.

Under Post Elements, you will see a list of items:

  • Title
  • Post Meta (Author, Date, etc.)
  • Featured Image
  • Summary (The excerpt)
  • Read More (Summary footer)

How to customize:

  • Reorder: Click and drag the hamburger icon next to an element to move it up or down. For example, you can drag the ‘Title’ above the ‘Featured Image’.
  • Hide/Show: Click the eye icon next to an element to hide it completely from the blog feed.

(Note: The Post Elements sorter is primarily designed for the Vertical layout option).

4. Post Meta Configuration

Post Meta refers to the informational details about the post, such as who wrote it and when it was published.

Under Post Meta, use the drag-and-drop sorter to organize or hide these details:

  • Author
  • Publish Date
  • Comments count
  • Categories
  • Tags

Additional Meta Options:

  • Show avatar and icons in post meta: Toggle this on to display the author’s profile picture (avatar) next to their name, and to show small, elegant icons next to the date, categories, and comments.

5. Excerpt Settings

Control how much text is previewed before the user has to click through to read the full article.

  • Excerpt Length: Use the slider to set the maximum number of words displayed in the summary. The default is usually around 55 words, but you can increase or decrease this to fit your design.
  • Excerpt More: Define the text or characters appended to the end of a cut-off excerpt. The default is usually ... or [&hellip;], but you can change it to something like (continue reading).

Saving Your Changes

As you make adjustments, the live preview on the right will update to reflect your new blog design. Once you are satisfied, click the blue Publish button at the top of the Customizer to save your settings.

Site Identity & Logo Guide

Our theme makes it simple to establish your brand identity right at the top of your website. You can easily upload your logo, configure a retina-ready version, and control the display of your site title and tagline.

Accessing Site Identity Settings

To set up your logo and site title, navigate to Appearance → Customize in your WordPress dashboard, then go to Site Identity.

1. Uploading Your Logo

  1. Click on the Select logo button under the Logo setting.
  2. Choose an image from your Media Library or upload a new one.
  • Tip: For the best results, use a .png with a transparent background, or an .svg file if your site allows it.

Retina Logo

If you uploaded a standard image (like a PNG or JPG), you will see an option for a Retina Logo.

  • To ensure your logo looks perfectly crisp on high-resolution displays (like modern MacBooks or smartphones), upload a version of your logo that is exactly 2x the size of your standard logo here.
  • (Note: If your primary logo is an SVG file, you do not need to upload a Retina Logo, as SVGs scale infinitely without losing quality).

2. Logo Sizing and Spacing

Once your logo is uploaded, you can fine-tune how it fits into your header.

Logo Height

Use the Logo Height slider to adjust the maximum height of your logo image (in pixels). The width will scale proportionally automatically.

  • Responsive Tip: Click the Desktop, Tablet, or Mobile icons next to the slider to set different logo sizes for different devices.

Logo Margin

If you need more breathing room around your logo, use the Logo Margin controls. You can add specific spacing (in pixels) to the Top, Bottom, Left, or Right of the image. Negative values are also allowed if you need to pull the logo closer to an edge.

3. Site Title and Tagline

If you don’t have a graphic logo, or if you want to display text alongside your logo, you can manage that here.

  • Site Title: The primary name of your website.
  • Tagline: A short description or catchphrase for your business.
  • Display Tagline: Toggle this switch to show or hide the tagline beneath your site title (or logo).

Typography

To change how your Site Title text looks:

  1. Ensure you do not have an image logo uploaded (the text title will display instead).
  2. Open the Typography section.
  3. Use the Site Title Font Size slider to adjust the text size. You can set different sizes for Desktop, Tablet, and Mobile.

Saving Your Changes

Once your logo looks perfect, click the blue Publish button at the top of the Customizer to save your settings to the live site.

Top Bar Configuration Guide

Our theme includes a versatile “Top Bar” area — a thin strip located above the main header. It is the perfect place to display contact information, a secondary menu, social media icons, or important announcements.

Accessing Top Bar Settings

To configure the Top Bar, navigate to Appearance → Customize in your WordPress dashboard, then go to Header → Top Bar.

Turn the Enable Top Bar switch ON to reveal the configuration settings.

1. Top Bar Layout & Visibility

Top Bar Width

Control how the Top Bar aligns with the rest of your site:

  • Content Width: The content aligns with your main site container. Recommended for most sites.
  • Full Width: The Top Bar stretches edge-to-edge across the browser window.

Device Visibility

You can choose exactly which devices should display the Top Bar. Use the dropdown to:

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

2. Top Bar Widgets

The Top Bar is built using a flexible widget system. You can place widgets on the Left or Right side of the bar.

How to add content:

  1. Under the Top Bar Widgets section, click the Add Widget button.
  2. Choose from the available widgets:
  • Text: Perfect for phone numbers, email addresses, or short announcements. (Supports HTML and Dynamic Strings!)
  • Nav: Add a secondary navigation menu (you must assign a menu to the Top Bar location in Appearance → Menus).
  • Socials: Display social media icons. You can choose between Minimal or Rounded styles.
  1. Once added, you can click the down arrow on the widget to configure it (e.g., adding your phone number).

Widgets Separator

If you add multiple widgets to the Top Bar, you can place a stylish divider between them:

  • None: No separator.
  • Regular: A straight vertical line.
  • Slanted: An angled separator line.

3. Design Options

Scroll down to the Design Options section to style the Top Bar to match your brand.

Background

  • Solid Color: Set a flat background color (often a dark color or your primary brand color looks best here).
  • Gradient: Apply a color gradient.

Font Color

  • Text Color: The color of standard text (like your phone number).
  • Link Color: The color of any clickable links.
  • Link Hover Color: The color links change to when hovered over.

Border

Add separation between the Top Bar and the Main Header below it by adding a Bottom border. You can define the Style, Color, and Width. If you used Widget Separators (above), you can also set the Separator Color here.

Saving Your Changes

Once your Top Bar is configured, click the blue Publish button at the top of the Customizer.

Page Header Configuration Guide

Our theme allows you to display your page and post titles in a dedicated, stylish banner area above your content, known as the Page Header. This is great for creating a magazine or premium corporate look.

Accessing Page Header Settings

To configure the global Page Header style, navigate to Appearance → Customize in your WordPress dashboard, then go to Header → Page Header.

Toggle the Enable Page Header switch ON to activate this layout globally for pages and posts (that have the title position set to “In Page Header”).

1. Layout & Alignment

Title Alignment

Control where the title text sits within the banner area:

  • Left Align: The title sits flush with the left edge of your content container.
  • Center Align: The title is perfectly centered on the screen.
  • Right Align: The title sits flush with the right edge.

Page Title Spacing

The height of your Page Header banner is determined by its padding.

  • Open the Page Title Spacing section to add padding (in pixels) to the Top and Bottom of the title.
  • To create a tall, dramatic banner, increase these numbers (e.g., 100px top and bottom).
  • You can set different spacing for Desktop, Tablet, and Mobile using the responsive device icons.

2. Design Options

To make your Page Header stand out, you can apply custom backgrounds and colors under the Design Options section.

Background

  • Solid Color: Choose a flat background color for the banner.
  • Gradient: Create a beautiful color transition behind your title.
  • Image: Upload a background image to create a textured or photographic banner.

Font Color

If you set a dark background color or image, you will need to change your text color so it remains readable.

  • Text Color: The color of the main Page/Post Title.
  • Link Color & Hover Color: The color of any links that might appear in the header area (like breadcrumbs, if enabled).

Border

You can add a border to the Top or Bottom of the Page Header area to separate it from the navigation menu above it or the content below it.

3. Typography

If you want the titles inside this specific banner area to be larger or smaller than the default headings on your site, open the Typography section.

  • Use the Page Title Font Size slider to explicitly set the size of the title text in this area. You can adjust this independently for Desktop, Tablet, and Mobile.

Overriding on Specific Pages

The settings here dictate the global default for your Page Headers. However, the Business Interface theme allows you to override these settings on a per-page basis!

When editing any Page or Post in the WordPress editor, look for the theme’s Page Settings meta box. From there, you can upload a unique background image or change the colors just for that specific page.

Saving Your Changes

Once your global Page Header is styled to your liking, click the blue Publish button at the top of the Customizer.

Main Navigation Configuration Guide

Our theme offers robust controls over your site’s primary navigation menu, allowing you to create beautiful, responsive menus with hover effects and custom styling.

Accessing Navigation Settings

To configure your primary menu’s appearance, navigate to Appearance → Customize in your WordPress dashboard, then go to Header → Main Navigation.

(Note: To actually create and assign the menu links, you must go to Appearance → Menus first).

1. Hover Animation

Make your menu feel interactive and modern by adding a hover effect.

Under the Animation section, find Hover Animation:

  • None: The text color simply changes on hover.
  • Underline: A smooth animated line will slide under the menu item when a user hovers their mouse over it.

2. Sub Menus & Dropdowns

If your menu has nested items (drop-downs), you can make this visually clear to your visitors.

Under the Sub Menus section:

  • Dropdown Indicators: Toggle this switch to ON to display small arrow icons next to any parent menu item that contains a sub-menu. This is a great usability enhancement.

3. Mobile Menu Settings

Control exactly when and how your menu collapses into a “hamburger” style mobile menu for smaller screens.

Under the Mobile Menu section:

  • Mobile Breakpoint: Use the slider to define the exact screen width (in pixels) at which the standard desktop menu disappears and the mobile menu toggle appears. If you have a very long menu with many links, you may want to increase this number so it collapses earlier on smaller laptops or tablets.
  • Mobile Menu Button Label: You can display text next to the hamburger icon (e.g., “Menu”, “Navigate”). If you only want the icon to show, leave this field completely empty.

4. Design & Styling Options

Scroll down to the Design Options section to customize the colors of your navigation area.

(Note: These options may depend on your chosen Header Layout. For example, if your navigation sits on its own row in Header Layout 3, you can style the background of that row here).

Background

  • Solid Color: Choose a flat background color for the navigation bar.
  • Gradient: Apply a colorful gradient background.

Font Colors

  • Link Color: The color of the top-level menu items.
  • Link Hover Color: The color the text changes to when hovered, or the color of the active page item.

Border

  • Add a border to the Top or Bottom of the navigation bar. Define the Style, Color, and Width.

5. Navigation Typography

If you want your menu links to stand out from standard paragraph text, open the Typography section.

  • Font Size: Use the slider to adjust the size of the top-level navigation links. You can set specific sizes for Desktop, Tablet, and Mobile to ensure perfect readability on all devices.

Saving Your Changes

Once your navigation is styled to your liking, click the blue Publish button at the top of the Customizer.

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> — href, rel, target, class, role, id
  • <img> — src, alt, width, height, class, id
  • <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.

Global Buttons Configuration Guide

Our theme provides a centralized way to style all the buttons across your website. By setting up your Primary, Secondary, and Text buttons here, you ensure a consistent, professional design across all pages and widgets.

Accessing Button Settings

To manage your global button styles, navigate to Appearance → Customize in your WordPress dashboard, then go to General → Buttons.

1. Primary Button

The Primary Button style is used for the most important calls to action on your site (e.g., “Buy Now”, “Submit”, “Read More”).

Expand the Primary Button section to configure:

Colors

  • Background Color: The resting background color. (If left empty, the theme’s global Accent Color is used automatically).
  • Hover Background Color: The color the button changes to when hovered. (If left empty, a lightened version of your Accent Color is used).
  • Text Color: The color of the text inside the button (usually White or Black, depending on the background).
  • Hover Text Color: The text color on hover.

Shape & Borders

  • Border Width: If you want your button to have a visible border, set the width here (in pixels).
  • Border Radius: This controls how round the corners of your button are.
  • Set all four corners to 0 for sharp, square buttons.
  • Set them to a low number (e.g., 4px) for slightly softened corners.
  • Set them to a high number (e.g., 50px) for completely rounded, “pill-shaped” buttons.
  • Border Color & Hover Border Color: If you set a Border Width greater than 0, define the colors of that border here.

Typography

  • Open the Typography panel to define the specific font family, weight, text-transform (e.g., ALL CAPS), and letter-spacing for the text inside your primary buttons.

2. Secondary Button

Secondary Buttons are used for alternative actions (e.g., “Learn More”, “Cancel”) placed next to a Primary button. They often have a less prominent design, such as an outline style (hollow background with a colored border) or a muted grey background.

Expand the Secondary Button section to configure:

  • Colors: Set the Background, Hover Background, Text, and Hover Text colors.
  • Shape & Borders: Define the Border Width, Radius, and Colors exactly as you did for the Primary button.
  • Typography: Set the font styling for secondary buttons.

3. Text Button

Text Buttons are used for subtle links that function as buttons but look more like standard text with an icon or specific styling.

Expand the Text Button section to configure:

  • Text Color: The default color of the text.
  • Hover Text Color: The color on hover. (If left empty, the global Accent Color is used).
  • Typography: Set the specific font family, weight, and sizing for text buttons.

Saving Your Changes

Once your button styles are perfectly aligned with your brand’s aesthetic, click the blue Publish button at the top of the Customizer to apply the changes across your entire site.