Introduction

We would like to first thank you for purchasing this theme. This documentation consists of several parts that guide you through the entire process of installing and setting up our theme starting from a fresh install.

We did our best to make this documentation as clear as possible with step-by-step guidance, including screenshots. However, if you have any difficulties with this theme or have any suggestions on improving our documentation, please post in our support forums or submit a support ticket.

First Steps

After you have purchased our theme, you will need to download and install it on your website. This tutorial will show you how to do this.

Download from Rough Pixels

There are a couple of ways to download your theme, the first is from a download link found within the email purchase receipt that you get when you made your purchase. Please note that this link has an expiry date.

If you decide to download from this website, you will need to log in and then visit your Purchase History.

Purchase History

From your purchase history, you will click on the View Details and Downloads link.

View Details and Downloads link

Your next screen should now show your download(s) for a single theme.

Clarified download button

If you purchased the All-Access membership, you should see a large Click Here To Use Your All-Access Pass button. Once you click this, you will be taken to a page where all your theme downloads are displayed; each with a download button:

All Access download button

Installing a Theme

You can install the theme in two ways: through WordPress, or via FTP.

Install via Dashboard

  1. Log in to the WordPress Administration Panels.
  2. After you have logged in, navigate to the Appearance > Themes.
  3. Click the Add New button on the top of the screen.

    Add a new theme from dashboard
  4. On the next page, click the Upload Theme button on the top of the screen.

    Dashboard upload theme
  5. Click the Choose File button to browse your computer and navigate to where you downloaded your theme too. Select the file clarified.zip and click Install Now.
  6. WordPress will upload and extract the theme archive for you. All you need to do next is to click on the Activate text link under the message for successful theme installation.
    Activate Clarified
  7. Now you can view your site’s front-end to see the theme active, or you can jump right in and begin setting up your website.

Install via FTP

  1. Navigate to where you downloaded your theme and double-click the clarified.zip file to extract using your standard zip archive software (eg: WS_FTP Pro, Filezilla, etc.)
  2. Using your FTP client (program) to log into your host web server.
  3. Go the WordPress root folder on your server, then go to /wp-content/themes/ folder.
  4. Upload the extracted file folder clarified into the themes folder.
  5. Log in to the WordPress Administration dashboard.
  6. Navigate to the Appearance > Themes. On this page, you should see the Clarified theme in the list of themes.
  7. Move the cursor on the block with the Clarified theme and click the Activate button.
    Activate Clarified from the themes page
  8. Now your theme is active!

Theme License Key

This tutorial will apply to all premium themes, but may also include any free versions that we host ourselves instead of the theme directory on the wordpress.org website.

Themes from Rough Pixels use a license key to help manage active memberships, but they also give you the added benefit of receiving update notices with 1-click updating.

The first thing you need to do is log into the Rough Pixels website with your user account and then go to your Purchase History:

Purchase History

Activate Theme License

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to the Appearance > Theme License.
  3. In a new browser window (or tab), log into the Rough Pixels website and navigate to your Purchase History.

    Purchase History
  4. You should see a License Details table with an Inactive status, but from here, you will copy your license key:
    Ckarified license details
  5. Go back to your website’s dashboard with your theme license screen open and paste your key into the field.

    Enter license key
  6. Click the Activate License button and then the Save Changes button
  7. Once you activate your license, you can return to your License Details in your Purchase history to see the status is now set to Active.

Adding Another Licensed Website

Depending on the theme or membership purchase, each one comes with a specific number of license usages. When you first activate your license key, you should see a message similar to this:

Ariele licenses left

With the example above, we see that 1/3 sites have been activated, which means we have 2 left. This also means that this license gives us a total of three separate websites that can use the same license key. If you have additional sites that you want to receive support and updates for, you have to add more sites to your license.

Add More Websites

  1. Log in to Rough Pixels and visit your Purchase History page.
  2. In the License Details table, click on the Manage Sites link.
    Clarified manage websites
  3. Enter the Full URL (with the http://www or https://www part included) for the website you are adding.

    Add Website to be licensed
  4. Click the Add Site button.
  5. Repeat for additional websites you want to add.

Update Theme

Updating your theme is easily done because we have incorporated an update feature that is similar to the method if you had downloaded a plugin or theme from the wordpress.org website. When an update arrives, you will get a notification in your dashboard in a few areas:

Theme Update Notice
Another Theme Update notice

In the screenshot above, you can click Update Now for your theme, and then once it’s finished updating, you will have the latest version installed.

IMPORTANT: This update method only works if you have activated your theme with a license key, but also, to make sure your theme membership is still active and has not expired.

Installing Plugins

This theme recommends the installation and activation of some plug-ins to add additional features and capabilities. We made a shortlist of plugins to consider plugins:

  • Widget Options — Allows you to publish widgets to select pages and also hide widget titles;
  • Regenerate Thumbnails — This lets you regenerate thumbnails if you ever change sizes or the blog layout;
  • Contact Form 7 — Contact form plugin;

Installing Plugins

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Install Plugins menu.
  3. In the Search field, type in the name of a plugin and once it shows up, click the Install button.

    Search and add plugins
  4. Once installed, you can click Activate and then customize the plugin’s settings if needed.

Site Title & Tagline

With Clarified, you can do more than just edit your site title and tagline (description).

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Site Identity.
  3. Add or edit your site title.
  4. Add or edit your site description (tagline).
  5. You have the option to hide the title and/or tagline; ideal if you want to use a logo.
  6. We’ve added a couple of colour selectors for the title and tagline.
  7. Upload a logo (if you plan to use one).
  8. If you would like to change the font to the Site Title, you can change the font family, font-weight, and font size:
    Empt site title font styling
  9. Click Publish button.

Favicon

Follow the below steps to set favicon on your site.

upload a site favicon
  1. Prepare your favicon image file. It must be square, and at least 512 pixels for the width and height.
  2. Log in to the WordPress Administration dashboard.
  3. Navigate to Appearance > Customize > Site Identity.
  4. Open the Site Indentity tab.
  5. Click Select Image at Site Icon section, upload the image file you prepared in the above step from Upload Files tab screen, and click Select.
  6. Click Save & Publish button.

Navigation Menus

The Amble theme supports up to 3 custom navigation menu locations which include your main menu, a social, and a footer menu. WordPress comes with a simple user interface that makes it quite easy for beginners to create and manage menus.

Creating Menus

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Menus
  3. If you don’t have any menus, click the Create Menu button and create a new menu.
  4. From the blocks on the left side select pages that you want to add in your menu. Click the Add to Menu button.
  5. Once you’ve added a few items to your menu, you will see the added menu items on the right side in the Menu Structure section.
  6. If you want to rename a menu item, click the down arrow of a menu item to display its properties. You can then edit the navigation label that is displayed on menus.
  7. You can also change the order of menu items by dragging them to the position that you want them.
  8. To create a drop-down menu, drag a menu item slightly to the right of the menu item above it to create a sub-item relationship on the menu.
  9. Scroll to the bottom of the menu editor window. In the section titled Theme locations, click the checkbox for the location where you want your menu to appear.
  10. Click Save Menu button.
Clarified creating menus

Social Profile Menus

The social profile menus are generally found at the top of your webpage and depending on the theme, in the footer area. The Clarified theme supports the most popular social networks, which you can use to get followers to your site.

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to Appearance > Menus.
  3. If your social menu is not made, you will need to create a new one.
  4. You will add each social network by pasting in their respective URL into Custom Links the box under Add Menu Items. For example, we would enter in https://twitter.com/roughpixels for our twitter profile URL.
  5. Drag your new menu item(s) into your new menu
  6. Assign your social menu to one or both of the social menu locations under Menu Settings
  7. Click the Save Menu button

Enable Thumbnail Creation

This theme includes the option to enable automatic thumbnail creation each time you upload a photo. This is generally a benefit when you want to maintain a consistent thumbnail size for blog posts, widgets, and anything else that uses thumbnails.

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Featured Image Options
  3. Scroll down to the Blog Thumbnail Creation section and set the type of thumbnail(s) you want to enable for automatic creation. We recommend that if you know what blog layout you plan to use, only set the thumbnail crop for that blog. If you enable the others, you end up with a lot more thumbnails that won’t be used.
  4. You also have a couple of other sections for the Post Thumbnail Creation and Miscellaneous thumbnails too.
  5. Click the Publish button to update the customizer.

Front Page Banner

When you visit the demo site for this theme, you will notice a nice banner image on the front page; including a call-to-action.

Clarified front page banner example

This is optional, of course, but this gives your site some extra visual impact when someone visits. In addition to displaying an amazing photo, you can use it as a Call-to-Action (title, intro, and even a button).

For this feature, we used the WordPress Custom Header Image for this. All we did then was to add some customizer options to create the call-to-action group, which I will take you through that below…

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Header
  3. From here, you can upload a photo at which point you can crop it to 1600x650 pixels
    Clarified front page header setting
  4. If you want to take advantage of the Randomize feature, you can upload additional banner photos and then click on the Randomize uploaded headers button. This will rotate your images when refreshing the front page or each time someone visits.
    Clarified front page multiple headers
  5. Click the Publish button.

Front Page Banner Height

We will take you through a separate tutorial that introduces you to the image banners used in various ways. However, for this one, we will show how to manage the height of your front page banner. You can manage the height of your banner and even control the positioning of the image.

  • Log in to your WordPress Administration dashboard.
  • Go to Appearance > Customize > Featured Image Options
  • Under the Featured Banner Images section, use the slider to change the front page banner height.
    Clarified front page banner height setting
  • If you want to reset the height, click on the round arrow icon at the end of the slider.
  • Click the Publish button.

Front Page Banner Position

Sometimes you might be using a photo with unusual positioning of subject-matter. By default, images uploaded are positioned from the center/middle. We’ve given you a setting to position your front-page banner.

  • Log in to your WordPress Administration dashboard.
  • Go to Appearance > Customize > Featured Image Options
  • Under the Featured Banner Images section, use the Front Page Banner Image Position drop-down to choose the reposition your image
    Clarified front page banner position setting
  • If you want to reset the height, click on the round arrow icon at the end of the slider.
  • Click the Publish button.

Adding a Call-To-Action

This is optional, but you can add a call-to-action to your WP custom header image. We’ve categorized the option settings under the label options tab as “Hero Text Settings“.

  1. Log in to your WordPress Administration dashboard.
  2. Go to Appearance > Customize > Label Options
  3. Add your title, intro, and if you want a button, add a full URL and then your button label
    Clarified hero settings
  4. Click Publish at the top.

When you view the live demo for Clarified, you will notice there are some pages with banner images. They depend on what type of page you are on:

  • The Front Page – This is the WordPress Custom Header Image feature; it shows only on the front-page
  • Page Featured Image – When you add a featured image to a page, they become banner images.
  • Post Featured Image – This will only be seen if you choose one of the banner image-based post layouts; you need a featured image for this to work correctly.

To ensure that you have the best looking featured images, I recommend using quality photos that have large-enough and sharp looking quality. I would also recommend optimizing them if their file size is huge. It’s a balance of quality and file size that is important.

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Image Options
  3. At the top, you will see a set of 3 sliders, each one will change the height of your banner viewable area on the front-end. The minimum size is 30, while the maximum is set to only 70. We didn’t want to go 100% because this theme is not designed for full browser height image viewing, but if you really want 100%, submit a support request and we can show you how to do this with some custom CSS.
    Clarified image banner size setting
  4. Once you are happy with the height you have, click Publish at the top.

NOTE: Adjusting the height for each of the banner types, will affect “all” pages that have the banner image feature. We should also mention that the values set are not actually percent (%) but vertical height (vh) values. The full range is 0 to 100 for

What can happen is when you upload and use an image for your page or post, it is that the subject matter might not be positioned as you would like it. By default, the banner area positions your image is centered (middle) of the viewable background area. If you find that most if not all of your images have parts of the subject cut off, we can reposition the banner image.

You can position your image to have it start at the top of the viewable area, centered, or have the bottom of the image begin at the bottom viewable area.

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Image Options
  3. Look for the appropriate banner image setting for positioning, and decide what works best. Please note that what you change here will affect “all” other pages for that particular banner image type.
    Clarified image banner positions
  4. Click Publish when ready.

Mobile Banner Image Views

The above sizing will only affect desktop monitor viewing since there are many types of mobile devices. We have a default banner image height set to be 30%. Only when you view your pages on a desktop monitor, the adjusted sizing will take effect.

Theme Customization

The Clarified theme offers a lot of customization. Using the theme-specific options and settings, you can change the layout, colors, background image, etc.

Customizer

The Clarified theme supports the WordPress Customizer. The Customizer is a framework for live-previewing any changes that you make to WordPress. It provides a simple and consistent interface for users to customize various aspects of their theme and their site, from colors and layouts to widgets, menus, and more. Themes and plugins alike can add custom options to the Customizer.

To access the WordPress Customizer, log in to the WordPress Administration dashboard and navigate to Appearance > Customize.

Clarified customizer

Header Style

Clarified gives you a couple of header styles, one is the default wide layout:

If you prefer a centered layout:

The banner section is not part of the header, but to set your header style, follow these steps:

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Customize > Other Options
  3. Use the drop-down list to choose your header layout
  4. Click the Publish button.

Blog Intro

Clarified gives you the option to create a custom blog title and introduction. By default, WordPress does not give you this option, with exception to the category archive pages. Your heading group would look something like the “My Blog” example below:

Clarified blog intro
  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Customize > Label Options
  3. Type a blog title (heading) for your intro.
  4. Type a blog introduction for your intro.
  5. Click the Publish button.

Blog Layouts

We included 7 blog layout options from the classic style to a full-width grid.

  • Classic Right Sidebar
  • Classic Left Sidebar
  • Grid
  • Grid Wide
  • Wide
  • Minimal Left Sidebar
  • Minimal Right Sidebar

To change the layout, follow these steps:

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Theme Options.
  3. Find the Blog Layout dropdown setting and select the layout you want to use.
  4. Click the Publish button.

Blog Display Options

In addition to selecting your blog layout style, you can also manage a few more options. As you click the toggles next to each item, you should see a live preview in the preview window (if you have your blog showing there). Once done, click the Publish button at the top of the customizer.

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Customize > Blog Options.
  3. Toggle each item that you want to show or hide on the post or page views; like this example:
    Empt toggle the show or hide items
  4. Click the Publish button.

Blog Excerpts

This tutorial will show you how to change your blog summaries to use excerpts instead. This is useful if you want a consistent look to your blog home page (and categories). Excerpts will also hide all formatting and page elements from view.

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Theme Options > Blog Options.
  3. Look for the Blog Excerpts section and then chooseEnable Blog Excerptsby clicking on the toggle.
    Empt toggle the excerpt setting
  4. Now look for the Excerpt Length setting and choose how many words to have in your post excerpts. You can see the counter to the right, along with a reset if you change your mind.
    Empt slider for excerpt size
  5. Click the Publish button.

Post Layout

Just like the blog layout options, you also have a set that is set aside for the full post (single) view. You get up to 6 styled layouts for your full post.

  • Single with Right Sidebar
  • Single with Left Sidebar
  • Single with no Sidebars
  • Single with Featured Banner no Sidebars
  • Single with Featured Banner Left Sidebar
  • Single with Featured Banner Right Sidebar

To change your full post layout, follow these steps:

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Post Options
  3. Find the Post Layout setting and select the layout you want to use.
  4. Click the Publish button.

Post Display Options

Similar to the blog display options, you can show or hide various (full) post elements.

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Theme Options
  3. Check the boxes next to each item that is associated with the “Full Post“.
  4. Click the Publish button.

The show or hide settings not only hide small items, but it can also hide sections. For example, if you decide to disable the Related Posts section, there is a setting for that. The related posts section looks like this:

Clarified related posts example

If you choose to show the related posts at the bottom of your article, you have the option to choose how to show them:

  • Random
  • By Category
  • By Tags

Follow these steps to show or hide the Related Posts section and related options:

Clarified Related Posts setting
  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Post Options.
  3. Look for the Show Related Posts setting and toggle the switch to become blue.
  4. Select from the drop-down list to display your posts based on the choice made.
  5. Click the Publish button.

Colors

This theme comes with a large number of colour settings, each for a specific element in your theme. Colours will be using the HEX values which are made up of a # symbol, followed by 6 characters, for example: #dd9933

Colour Selector

To change your colour, simply move the round cursor across the palette. You can also change the level of colour with the vertical slider to the right:

  1. Log in to the WordPress Administration dashboard.
  2. Go to Appearance > Customize > Colours
  3. When you are in the Colours tab, you have colour settings placed into sub-sections:
    Empt colour sections
  4. To preview your changes, navigate to the page in the preview window.
  5. Decide what elements you want to change the colour of by moving the circle on the colour area and select a colour.
  6. Click the Publish button.

Labels

With Clarified, you can change some of the labels such as “Read More“, and a few others that show up in the front-end of your website. So this tutorial, we will take you through the elements that you can customize the label text and a few other things that you can edit text content. So, let’s get started with the blog intro…

Blog Intro Labels

NoteThe blog heading is only if you are not using a custom page for your blog.

Empt blog title group label settings
  1. Log in to the WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Label Options.
  3. Customize the label you want to change for each of the listed label settings
  4. Click Publish button.

When done, this will add a similar blog intro group to the live demo like this:

Clarified blog intro example

NOTE: When you move the blog from the front-page of your website, this setting will no longer be used; the page you create will be then be used to display the title and the introduction text. However, the setting to disable the intro, even with a page being used, will still hide it if you choose.

Read More Label

To change Read More to something else, you can use this setting:

  • Log in to the WordPress Administration dashboard.
  • Navigate to Appearance > Customize > Label Options
  • Edit the Read More Text field
    Ariele read more setting
  • Click the Publish button

Clarified includes the option to display Related Posts at the bottom of each article, but this tutorial is going to show how you can change the heading “Your Might Also Like“.

Clarified Related Posts label
  1. Log in to the WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Label Options
  3. Look for the Related Posts label field and then change it to your own preference
    Ariele Related Posts label setting
  4. Click the Publish button.

Archive Title Label

By default, WordPress always includes a prefix to your archive titles. For example, if you go to a category, you get the label “Category:” inserted. This is not visually pleasing to see it attached to the category name, but of course, this is a subjective choice.

Clarified archive prefix label example

This tutorial will show how to disable the prefix label for archives. Note: We will be moving this to the labels section of the customizer in a future theme update.

  1. Log in to your WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Blog Options.
  3. Go to the Show or Hide Settings section and check the box next to the Hide Prefix in Archive Page
    Clarified hide archive prefix setting
  4. Click the Publish button.

Once you hide the prefix, your category (and any other archive type) will no longer have a prefix label:

Clarified hide the archive prefix - hidden

The copyright text is displayed at the bottom of every page. You can change the copyright text from within the customizer.

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Customize > Label Options
  3. Type your custom copyright text in the Copyright Name field.
  4. Click the Publish button.

Custom CSS

Part of the WordPress customizer gives you the option to add some of your own CSS stylings. You can quickly and easily add your custom CSS code without touching the theme’s own code. Your CSS code will have the highest priority and will override your theme, and sometimes, plugin styles.

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to Appearance > Customize > Additional CSS.
  3. Add your custom CSS code, either by typing it or pasting your code.

    Adding custom CSS to the customizer
  4. Click the Publish button.

We have incorporated the Colorbox lightbox feature for viewing images from the WordPress Gallery Shortcode (even the block gallery). You can now view your photos in a popup overlay viewer.

NOTE: We are planning to remove the lightbox in the next update because it does not work with actual image captions correctly (not compatible). We will be offering an alternative.

  • Log in to the WordPress administration dashboard
  • Go to Appearance > Customize > Other Options
  • Look for the Enable Gallery Lightbox setting and toggle the setting
    Empt gallery lightbox setting
  • Click the Publish button

Disable Gutenberg Styles

Not everyone wants to use the Gutenberg block editor that is now the default editor in WordPress. Many are using the Classic Editor instead, so we added a setting to disable the block styles.

  1. Log in to the WordPress administration dashboard
  2. Go to Appearance > Customize > Theme Options
  3. Look for the Disable Gutenberg Styles setting and check the box to disable
  4. Click the Publish button at the top

Once you do this, no more block styles will load, which helps speed up your website. From this point, just keep the classic editor as your default one.

Remember, though, when disabling the block styling, anything that was using blocks will now be unstyled. You will also lose the ability to do some of the blocks that we put into the live demo for this theme.

Typography Options

Typography generally has a learning curve for most people, even developers. We normally do not include extensive font options in our themes because of that. We usually refer customers to seek out a font plugin—and we still do because they are more comprehensive.

Then there is the fact that a theme has way too many text elements to have a setting for every single one, so many themes will only include the most common ones.

But as we state, typography and themes can have a steep learning curve. You generally have a few options:

  1. Manually customize fonts and text-based elements in a page
  2. Use a font plugin
  3. Just use the existing styling that comes with the theme

Typography, as it applies to fonts and font management can be overwhelming, so we gave you some help in this area by adding a Typography section to the customizer.

Site Title Font and Size

Let’s start with the Site Title and it’s very own font options. We kept this separate in the Site Identity tab of the customizer.

If you are not using a logo, then you can change your site title’s font and “some” attributes, which depends on the font you choose.

  1. Log in to the WordPress administration dashboard
  2. Navigate to Appearance > Customize > Site Identity
  3. Look for the font settings and then make your changes.
    Empt site title font styling
  4. Click Publish at the top when done.

Primary Font – Your Main Body Text

We’ve made this a simple concept for this theme, starting with the main body text (font). Changing this setting will change the font for the body.

Empt primary font setting

Make your selection from the drop-down setting. We use Google fonts here, so you can reference the Google Fonts website to select the font you want.

Secondary Font – Your Headings

Just like the primary font, here you will choose the font for your headings and titles. These are headings such as your h1, h2, h3, h4, h5, and h6, but also, for your page and post titles.

Empt secondary font setting

Font Size

This setting is global, meaning that this will change the font size for “ALL” text on your website. Try it out and if you want to reset it, click on the reset icon on the far right of the slider.

Empt font size setting

Helpful Font Info Links

  • Fonts Information: If you need to learn more about fonts and typography, we recommend you start with the W3Schools website for Fonts.
  • Text Styling: They also have information about CSS Text.
  • Google Fonts
  • Languages: This is probably the most confusing part, is the “Languages” support, so language support info might help.
Do You Still Need Help?

If you find this is overwhelming, or you have some text that you are trying to change the size of, please submit a support ticket and we will be happy to help guide you through.

Theme Sidebars and Widgets

With the Clarified theme, you get 10 sidebar positions. These help add more layout and content capabilities for your web pages, but will also depend on what widgets you add to them. To add widgets to the footer of your site, follow these steps:

  1. Log in to the WordPress Administration dashboard.
  2. Navigate to the Appearance > Widgets 
  3. Choose a Widget and either drag it to the sidebar where you wish it to appear.
  4. To customize the Widget features, click the down arrow in the upper right corner to expand the Widget.
  5. To save the changes you make to a widget, click Save.
  6. To remove a Widget, click Remove or drag the widget back into the Available Widgets list.

If you change WordPress Themes, any widgets you have will return to the Available Widgets list. You may need to add them again and rearrangement depending upon the new Theme’s sidebar positions.

Clarified sidebar positions

Dynamic Width Sidebars

Most themes from others have fixed sized sidebars; meaning they don’t adjust in size based on what is published in each position. We offer Dynamic Width Sidebars which do adjust based on how many widgets you publish. If we use our Content Bottom sidebar group as an example, this is how it works:

  • Publish a widget in Bottom 1, your widget will become 100% in width.
  • Publish a widget in Bottom 1+2, each widget will now be 50% in width.
  • Publish three widgets in Bottom 1+2+3, each widget will become 33% in width.
  • Publish four widgets in Bottom 1+2+3+4, each widget will be 25% in width.

You don’t even need to publish them in sequential order of positions; you can do 1+3+4, without one being in the Footer 2 position. They will still function the same way.

About Me Widget

With Clarified, you get an “About Me” widget that gives you the option to upload a portrait photo and to write a brief introduction of yourself. You even have the option to add a signature.

Clarified About Me widget
  • Log in to the WordPress Administration dashboard.
  • Then navigate to Appearance > Widgets
  • Drag the Clarified About Me widget into the sidebar position you want to show it in.
    1. Add a title for your widget
    2. Upload a portrait of yourself (or author).
    3. (Optional) Upload an image of your signature.
    4. Add author’s name
    5. Add an author’s introduction
    6. (Optional) Insert a URL link if you want to show a button linking to something
    7. (Optional) Type in a button label
  • Click the Save button
Clarified About Me widget settings

Recent Posts Widget

We’ve included a nice widget for you that displays the most recent posts with thumbnails. The thumbnails are automatically generated from the featured image you upload for the post(s). You can publish this in the left or right sidebars, or the bottom, or the footer.

Clarified recent posts
Clarified recent posts in the footer
  • Log in to the WordPress Administration dashboard.
  • Then navigate to Appearance > Widgets
  • Drag the Clarified Recent Posts widget into the sidebar position you want to show it in.
    1. Add a title for your widget
    2. Select how many posts to show
    3. Choose how to order the posts
    4. Select the category to grab posts from
    5. Display the post date?
  • Click the Save button
Clarified Recent Posts widget settings

Comments Widget

We took the default WordPress Recent Comments widget and made a couple of modifications to it. Instead of a basic list of comments, we added more style.

Clarified Comments
Clarified Comments widget in the footer
  • Log in to the WordPress Administration dashboard.
  • Then navigate to Appearance > Widgets
  • Drag an Clarified Recent Comments widget into a sidebar position
  • Click the Save button

Create a Contact Page

This tutorial will show you how to make a contact page when using the Contact Form 7 plugin for WordPress. Basic knowledge of WordPress administration is required when doing this, but this tutorial is for the demo site’s contact page:

Clarified contact page example like the demo

Install the Contact Form 7 Plugin

Before we can do anything, you will need a plugin called Contact Form 7 before we can continue. If you already have Contact Form 7 plugin installed, you can skip this step. But to install it, go to Plugins >> Add New, and then type in the search, “Contact Form 7” into the field. Once it shows up in the results, click Install and Activate.

NOTE: Although this plugin is optional, this tutorial is for anyone who uses or decides to use the Contact Form 7 plugin.

Creating a Contact Form

Let’s start by creating a form for your page. To help you get started, here is the code we used for the live demo:

p>[text text-74 placeholder "Name"]</p>
<p>[email* email-635 placeholder "Email"]</p>
<p>[text text-75 placeholder "Subject"]</p>
<p>[textarea* textarea-173 placeholder "Message"]</p>
<p>[submit "Submit Form"]</p>
  1. Log in to the WordPress Administration dashboard.
  2. Then navigate to Appearance > Contact > Contact Forms
  3. You will see a default form named Contact Form Demo
  4. You will also see a shortcode, similar to this: [contact-form-7 404 "Not Found"]
  5. Copy the shortcode and then go to Pages > Add New
  6. Name your page Contact Us (or whatever you decide) and add any content you want
  7. (Option 1) With the Classic Editor, assign the Half & Half page template to it by going to Page Attributes and selecting it. Then, navigate to Appearance > Widgets and drag a text widget into the Half Sidebar, then paste your form shortcode into it.
  8. (Option 2) With the Block editor, we can ignore the Half & Half template and drop a column block into our page. In the first column, add your content. However, for the second column, drop a shortcode block and then paste the contact form shortcode into it.
  9. Click the Publish button for your page.