WARNING: This documentation might be outdated. Click Here to view the latest documentation.
Need more help or guidance? Check Frequently Asked Questions or register and use our Support Forums. x

Welcome to SmartBlog!

Thanks for Buying

First of all, thank you for buying this theme. To make your experience pleasant, we've added as much info as needed in this documentation. If you're stuck with anything, please refer to support forums.

Installation

There are two methods to install the theme. If the normal installation method (a) is not supported by your web host, you will have to use the alternate option (b).

a. Normal Installation

  1. Go to ThemeForest Downloads and next to SmartBlog, click the Download button. On the dropdown menu, click on All files & documentation.
  2. Extract the zip file in your computer. Browse through the folder that starts with the name themeforest-. You will find the smart-blog.zip file here.
  3. Login to WordPress Admin and browse to Appearance > Themes.
  4. Click on the Add New button and click Upload.
  5. Browse your computer to select "smart-blog.zip" (it's the file you got in Step 1). Click "Install Now" button.
  6. Once it's uploaded, click the Activate link.
  7. Go to Appearance > Install Plugins and install the required and recommended plugins.
  8. All done. Now proceed to What to do next?

b. FTP Installation (alternate method)

  1. Use your FTP software to browse to wp-content/themes folder.
  2. Extract smart-blog.zip and upload the smart-blog folder.
  3. Once it's uploaded, go to your WordPress Admin, browse to Appearance > Themes.
  4. Click the Activate link.
  5. Go to Appearance > Install Plugins and install the required and recommended plugins.
  6. All done. Now proceed to What to do next?

Important After activation, you will be presented with several plugins that you will need for a few of the theme features.

Note If you have existing content and featured images, you will have to install Regenerate Thumbnails plugin and run it from Tools > Regen. Thumbnails.

Sample Content Import (optional)

We highly recommend against using this method in production. Please only use on a an extra copy for testing or experimenting. This method most likely will fail on shared web hosts. Uncheck "import attachments" option if it fails and try again.

Warning Please do not import content on a WordPress installation that already has a lot of content. Or the very least, make a backup first. A catastrophic mess can be created.

  1. Log into Admin and go to Tools > Import > WordPress.
  2. Install the WordPress importer.
  3. Select the sample.xml file (located in the main zip file in Sample Data folder) and upload it.
  4. On the next screen, under Assign Authors, select or enter a new username for each author.
  5. Check "Download and import file attachments" if you have a powerful webhost. It will just download free placeholder images from the public domain.
  6. Please be patient as it will take quite some time. Do not interrupt it.
  7. (Optional) Once it's done, go to Appearance > Menus > Manage Locations. Select the corresponding menu for each location, for example "Main Menu" next to "Main Navigation". These are just sample menus.
  8. Experiment with Customizer settings from Appearance > Customize. Next, continue reading the documentation for learn more about setting up your theme.
  9. All Done.

Regenerate Thumbnails

If you already had images in your Media Library when you installed SmartBlog, you will have to resize your image thumbnails. Follow these instructions:

  • Go to Appearance > Install Plugins and install Regenerate Thumbnails plugin.
  • Next, go to Tools > Regen. Thumbnails.
  • Click the Regenerate All Thumbnails button. It will take some time depending on the number of images you have. DO NOT close your browser.

Setup Your Site ater Installation

Once you have installed the theme, it's time to setup your site. What to do next:

Header & Topbar

Setting up categories for this theme is no different than ordinary category setup in WordPress. If you are not sure how to add categories in WordPress, please refer here.

Top Bar Hamburger Menu

SmartBlog supports a special unique hamburger menu in the Top Bar area above header. It consists of three parts: (a) Menu Items (b) Follow Me (c) Accessory Links.

Adding Menu Items

  1. Go to Appearance > Customize > Menus and click Add a Menu button.
  2. Enter a name for the menu and click Create Menu.
  3. Click the Add Item button and add menu items as desired.
  4. Under Menu Locations, click Top Bar Navigation.
  5. Click Save & Publish.

Enabling "Follow Me"

  1. Go to Appearance > Customize > Header & Navigation > Top Bar.
  2. Under Hamburger Menu Social Icons, tick two social icons you wish to display.
  3. Make sure you have configured your Social Profiles.
  4. Click Save & Publish.

Accessory Links - "Menu Footer"

  1. Go to Appearance > Customize > Menus and click Add a Menu button.
  2. Enter a name for the menu and click Create Menu.
  3. Click the Add Item button and add menu items as desired.
  4. Under Menu Locations, click Top Bar Menu Footer.
  5. Click Save & Publish.

Social Icons

To enable social icons in the Top Bar, you just have to check them in the customizer. Second, you have to enter your social profile details to create proper links.

  1. Go to Appearance > Customize > Header & Navigation > Top Bar.
  2. Under Top Bar Social Icons, check the social icons you wish to display.
  3. Click Save & Publish.

Configure Social Profiles

Social Profiles need to be configured if you wish to use social icons in the theme. These are links to your social media profiles.

  1. Go to Appearance > Customize > General Settings > Social Media Links.
  2. Under each heading such as Facebook, enter the full URL to your social media profile.
  3. Click Save & Publish.

Sticky Top Bar

By default, the Sticky Top Bar is enabled. This means as you scroll, the Top Bar gets fixed at top of the browser viewport (as shown below). If you wish to disable it, follow the steps below.

  1. Go to Appearance > Customize > Header & Navigation > Top Bar.
  2. Uncheck the Sticky Top Bar setting to disable sticky feature.
  3. Click Save & Publish.

To be retina friendly (to look sharp on devices like Macbook Retina, iPad), you will have to create two images of your logo. One would be the normal size and the second exactly double the height and width (2x).

  1. Go to Appearance > Customize > Header & Navigation > Logos.
  2. Under Logo Image, click Select Image button.
  3. Upload your second logo (2x size) under Logo Image Retina (2x).

  4. (Optional) You can set a different logo for smaller mobile devices by uploading a 2x logo under Mobile Logo Retina (2x - Optional).

    Note This logo will be displayed at half the width and height. The double dimensions are required as mobile screens are Retina/Hi-definition.

  5. Click Save Settings.

Setup Navigation & Menus

Setting up Navigation Menus works normally as it does for any WordPress Theme. If you're new to WordPress, you can learn more about menus in this article (external).

Creating a New Menu

  1. Go to to Appearance > Menus.
  2. Click on the + button or the create a new menu link. Enter a menu name and click Create Menu.
  3. Using the Custom Links and Pages boxes at the left, add items to the menu and drag/drop to arrange them.
  4. If you would like to use this menu in navigation, in the "Manage Locations" area, under Main Navigation, select your newly created menu. Click Save.
  5. Click Save Menu and that is all.

Setup Your Homepage

Select the Layout Style

SmartBlog comes with 3 listing styles for the home-page. You can view these styles at our Demo. You will also be able to preview each style directly in the Customizer before you save it.

  1. Go to Appearance > Customize > General Settings > Homepage.
  2. Under Home Layout, select the layout style you wish to use. On changing, you will be able to see the preview on the right side.
  3. If you wish to use the Full and Grid layout, there sidebar goes next to the first post. If your sidebar has many widgets, please setup a Custom Sidebar for your homepage.
  4. You also have the option to enabe or disable the sidebar. Under Home Sidebar, select the setting you need.
  5. Click Save & Publish.

Activate the Slider

  1. Go to Appearance > Customize > General Settings > Homepage.
  2. Tick the setting Enable Slider on Home.
  3. By default, the slider will show posts that have the featured tag. Under Slider Post Tag, you can change this tag to anything you want. Making it empty will show latest posts instead.
  4. Click Save & Publish.

Setup Categories

Setting up categories for this theme is no different than ordinary category setup in WordPress. If you are not sure how to add categories in WordPress, please refer here.

Category Listing Styles

SmartBlog has 3 layout styles for categories. By default, the Blog style is select. To change:

  1. Go to Appearance > Customize > General Settings > Categories & Archives.
  2. Under Category Listing Style, select the listing style you wish to use.
  3. There's a sidebar setting for archives that affects all type of listings (categories, tags, author archives, date archives). You can adjust the Listing Sidebar setting as desired.
  4. Click Save.

Custom Posts Per Page

By default, in WordPress, all the categories and archives (including homepage) use the Blog pages show at most setting from Settings > Reading.

If you wish to set a custom posts per page setting for categories or other archives, you can use the Custom Posts Per Page plugin.

Adding Posts

Adding a new post work the same way as a default WordPress installation. For an extensive guide on adding posts, check this guide.

Featured Image Size

While the theme can function without featured images, it's highly recommended that you add a featured image to each post. This not only makes your site/blog more lively but also improves user experience.

To set the featured image, use the WordPress normal method.

Important If you have existing content and featured images, you will have to install Regenerate Thumbnails plugin and run it from Tools > Regen. Thumbnails. Skipping this will make your existing images look out of proportions or stretched.

Recommended Image Size

Image size (dimensions) will depend on what type of layout you're using throughout your WordPress installation or per individual post basis. This image will not only be used on the post, but also on the category listing pages.

  • Compatible with all layouts and default slider: 1170x515 minimum (width x height).
  • If you don't use Full Width layout: 770x515 minimum.

Note SmartBlog uses WordPress's standard cropping and resizing method.

About Retina We recommended using images of double height and width to have your content images appear sharp on high-res devices like iPad. Read more below.

About Retina Images

Retina images are used for hi-definition / hight DPI screens such as iPad, Macbook Retina and so on. For these devices, you need to upload images twice the recommended dimensions above.

SmartBlog, when activated, informs you to install a few plugins and one of them is WP Retina 2x. Assuming you had existing images that are large enough, you can convert them to retina images from Media > Retina, after activating the plugin.

Choose Your Post Format

Post formats allow you to display posts differently. For example, a video format post will show a featured video instead of a featured image. Similarly, an audio post can show Soundcloud embed instead of featured image. The gallery format will show a gallery slider.

Video/Audio Format

Setup your post normally and set a featured image. Copy the URL of a YouTube, Vimeo, Soundcloud etc. video/audio and paste it next to Featured Video/Audio Link.

Note Videos will be resized to fit the container so you can choose a larger embed format if the video site allows you to specify size/dimensions.

SmartBlog will automatically convert the first gallery inserted into a post to a gallery slider - granted "gallery" post format is checked. We recommend setting a featured image even for gallery posts to make it functional in all layouts.

  1. When adding/editing a post, click Add Media button.
  2. Click Create Gallery. Upload images or select from Media Library. Click Create a new gallery.
  3. Click "Insert gallery".
  4. (optional) If you wish to show thumbnails or create a static/non-slider gallery, set image captions and click Insert Gallery. Change post format to Standard.

Note To create a justified in-post gallery, see below

Post Options

You will see the following post options when adding a post.

Post Options

  • Layout Style: You have the option of a layout with a sidebar on right or a full-width layout for this post.

  • Primary Category: Archives and listing layouts show a single category in the post meta. If a post is assigned to multiple categories, left to Auto-detect, a category is selected based on alphabetical sorting.

    For example, a post assigned both to Apples and Oranges will show Apples in post meta. If you wanted to show Oranges instead, selecting Oranges in this option will ensure that.

  • Galleries Type: You can force a specific gallery type for a specific post. For example, if you have globally set galleries type to Justified Galleries in the Customizer, you can still use Normal galleries for a few posts.
  • Featured Video/Audio Link: For Video or Audio post format - explained above in Post Formats.

Multi-weight Post Titles

You can create post titles that display a few words in an italics style. We call these multi-weight post titles. To make your post title multi-weight:

  1. Add/Edit a post.
  2. Add astericks to the words you wish to make italic. For instance, Multi-weight *Example* as a post title will make the word Example italics.
  3. Save the post.

Justified Post Galleries

Justified galleries are a unique feature of SmartBlog. You may have already seen this on our demo. However, by default normal Classic WordPress Galleries are enabled. To use justified galleries:

  1. Go to Appearance > Customize > Posts & Listings > General. Under Post Galleries Type, select Justified Galleries and click Save & Publish.
  2. While adding/editing a post, click Add Media.
  3. Create a normal gallery by clicking Create Gallery, selecting your images and clicking Create a new gallery button. Make sure to select at least 2 tall images. Others can be wide.
  4. Next, under Gallery Settings, next to Size, choose Large. Next to Link To, choose Media File.

    While the columns concept doesn't exist in justified galleries, the column setting will affect the height. If you choose 9 columns, the Justified Gallery algorithm will try to go as low as 150px height for each image (may show 2-4 images per row). Whereas, a setting of 1 column will make it go as high as 650px height (more likely to show a single image per row).
  5. Click Insert Gallery button.
  6. Update or Publish your post.

Tip You can use Justified Post Gallery for only a few posts (skip Step 1 above). There's a post option to choose the gallery type for a specific post, explained above in Post Options.

Adding Pages

Creating pages is a simple process just like a default WordPress install. If you're unsure, learn more about pages.

Add a Contact Page

Setting up a contact page requires that you install the "Contact Form 7" (go to Appearance > Install Plugins if you have not already installed it).

First create a contact form:

  1. Go to Contact and edit the default contact form (Contact Form 1).
  2. Edit the "Mail" settings to suit your needs and Save
  3. For more information, refer to Contact Form 7's FAQ and Docs.
  4. Go to Contact again and copy the code liste under Shortcode column.
  5. Go to Pages > Add New. Add your page content and paste the shortcode where you would like your contact form to appear.

Adding Google Maps to Contact Page

To add Google Maps:

  1. Go to Google Maps.
  2. Find the desired location and in the left pane, click Link icon (it's to the right side of "My places" button, next to print icon).
  3. Click customize and preview embedded map. Set settings as desired and the copy the HTML code.
  4. Edit your page and go to Text editor (next to Visual). Paste your code and Publish.

Sidebars and Widgets

SmartBlog comes equipped with several custom widgets but also styles the default WordPress widgets.

Additional Custom Widgets

SmartBlog - About
A widget to display an image/logo and a description of your site/blog.
SmartBlog - Posts List
Show either latest posts or popular posts from your blog.
SmartBlog - Social Follow
An improved widget for the "Social Count Plus" plugin that's more suitable for SmartBlog.
SmartBlog - Social Icons
Add social icons in the sidebar without counters or requiring API data.
SmartBlog - Quote
Add a quote of the day or week with a link.

How to use widgets

  1. Go to Appearance > Widgets.
  2. Main Sidebar is the main right sidebar. Expand the box at right, where you would like to place your widget, by clicking on the arrow icon next to it.
  3. Drag & drop the widget you wish to use, in the expanded area below the box (Main Sidebar for example).
  4. Fill in the information necessary and click Save.
Multi-weight titles in widgets

To use multi-weight titles in widgets, use the same format as post titles. For example, My *Followers* will show the Followers part as italics.

Adding Social Followers Widget

This widget relies on the Social Count Plus plugin. First, ensure you have activated this plugin. Go to Appearance > Install Plugins and Install the plugin Social Count Plus. If it's not in the list, it has already been installed.

  1. Go to Appearance > Widgets and drag & drop the SmartBlog - Social Follow widget to Main Sidebar.
  2. Enter a title for the widget and save it.
  3. Go to Settings > Social Count Plus. Activate the social profiles you wish to use and enter the information it requires. Click Save Changes.
  4. Click the Design tab at top and scroll to bottom of the page. Drag/drop to change Order of your social icons. Click Save Changes.

The Right Sidebar

SmartBlog's right sidebar uses the Main Sidebar widget area. Any widgets you drag/drop in this widget area will be displayed in the right sidebar.

Custom Sidebars

A custom sidebar allows you to add different widgets on a particular page in WordPress. You can install Custom Sidebars plugin to setup custom sidebars for your home-page (or any page). To install the plugin:

  1. Go to Plugins > Add New.
  2. In the search box, enter Custom Sidebars.
  3. Next to Custom Sidebars, click Install Now button.
  4. On the next screen, click Activate Plugin link.

Creating the custom sidebar for Home

  1. Go to Appearance > Widgets and Create a new sidebar.
  2. Enter a name like Home Sidebar and click Create Sidebar.
  3. Drag and drop your widgets (from left) to this newly created sidebar area.
  4. Click the Sidebar Location link. In the popup, click For Archives.
  5. Check As Main Sidebar for select Archive Types. In the input box, and select Front Page. As shown below:
  6. Click Save Changes.

Custom sidebar for posts or pages

You an also use a custom sidebar for a specific post or page. Simply add/edit a post or page and you should have a Sidebars box at the right side where you can select your sidebar from a drop-down list. Generally, you only want to replace Main Sidebar.

Using on categories, tags archives, search, and other archives

Additionally, custom sidebars can be used on archives too.

  1. Go to Appearance > Widgets. Click arrow to expand the sidebar you wish to use on a category.
  2. Click Sidebar Location link. You should see this:
  3. Click to expand For Archives.
  4. For categories, click on Category Archive tab.
  5. For other archives like custom taxonomies, search, tag archives etc. click on Archive Types.
  6. Check "As Main Sidebar for selected"... and click on the input box to select your categories or archives types.
  7. Save Changes.

Color, Style & Typography

Both the color/style and typography settings are located in Theme Settings.

Color & Style

Customizing the Colors & Backgrounds

  1. Go to Appearance > Customize > Color & Style.
  2. Usually you may wish to only change Main Theme Color from General. This will effect several crucial areas of the theme and acts more like a skin.
  3. If the Main Color changes are not enough, adjust other colors as you please.
  4. You can also adjust logo padding from Header section.
  5. Save & Publish.

Typography

For typography, we use Google Web Fonts. It's usually best to leave the typography at default, but typography elements have suggested font families or fonts as alternatives.

Additionally, even if you desired Google Font isn't in the list, you can click on Font fields and type the name of any font from Google Fonts directory. You will be presented with the option to Add and use that font as shown below.

  1. Go to Appearance > Customize > Typography > Fonts & Sizes.
  2. Select a font you like as the Primary Font, Heading Font etc.
  3. Experiment to get the best effect - the preview is updated instantly on the right.
  4. Save & Publish.

About Character Sets — Advanced

Non-latin script based languages will not display correctly when using the default fonts. This is because, to limit size, only latin charset is included by default.

To get the fonts to display correctly, you will have to tick the character sets for your language from Appearance > Customize > Typography > Advanced. Some latin-based languages required Latin Extended.

Translation & Internationalization

SmartBlog comes with .po/.pot file included under the smart-blog/languages folder. To translate:

  1. Download and install Poedit.
  2. Open smart-blog.pot in Poedit. Translate as needed. Note the backend strings have a context [Admin - so ignore those if you wish to skip backend translations.
  3. Save the file with the ISO language code locale. You can check this list (look under "WP Locale") to find the locale. If your locale is en_GB In this case, you would save your file as en_GB.po
  4. Step above should have generated a .po and an .mo file. Copy both these files under the wp-content/themes/smart-blog/languagesfolder.
  5. Go to Settings > General and select your language next to Site Language.
  6. Save a backup of these files somewhere safe. If you upgrade the theme from WordPress admin, the language files will have to be re-uploaded.

Advanced Customizations

If you are looking for layout customizations beyond the Style & Typography settings built into the theme, it's important to judge the nature of customization.

If it's a simple layout change, it's very likely achievable by using Custom CSS. However, for something not possible using either of these, a child theme is recommended.

Child Theme

WPBeginner has a great article on How to create a WordPress Child Theme. Use Template: smart-blog instead of twentyeleven.

Also, use @import url("../smart-blog/style.css"); in the CSS file to import parent stylesheet.

Frequently Asked Questions

  • 1 My grid post titles are cut with 3 dots "...". How to show full title?

    We limit the title to one line for aesthetical reasons. To show the full title:

    1. Go to Appearance > Customize > Posts & Listings & Post Listings.
    2. Uncheck the setting Grid Style: Single Line Titles.
    3. Save.
  • 2 Full posts are being displayed on the homepage in large posts. How to show a few lines excerpt?

    (a) Using more tag

    A native feature of WordPress blogs is called the more tag (also called a teaser). This allows you to create an excerpt. The lines before the <!--more--> tag in a post are used as an excerpt. The advantage of using this method over an automatic excerpt is that it preserves line breaks and formatting such as bold italics and so on. It's the recommended method for large posts.

    » Learn about more tag.

    (b) Automatic excerpts

    Another way is to use the automatic excerpts feature. Here's how to enable them:

    1. Go to Appearance > Customize > Posts & Listings > Post Listings.
    2. Set the Post Body setting to Excerpts.
    3. Save.
  • 3 How do I create a Mosaic, Squares, or Circle Images Gallery?
    1. Install Jetpack plugin.
    2. Activate the Tiled Galleries extension from JetPack > Settings. Don't worry, you can disable all the other extensions and you don't have to connect Jetpack with WordPress.com so it will stay light-weight.

    3. Add a gallery to your post. While adding the gallery, next to Type setting, select Tiles for Mosaic. Example:

    4. Make sure to set post format to Standard (default). Do NOT use Gallery format - it is used for adding a gallery slider.
    5. By default, post galleries are set to normal WordPress galleries in SmartBlog settings. However, if you have changed "Post Galleries" to "Justified" via the Appearance > Customize, then you have an extra step. When adding/editing the post, under Post Options, next to Galleries Type (If Any), select Default WordPress Gallery.
  • 4 My images do not have the right size.

    If you already had images when you activated the theme, you will have to refer again to the installation section and run Regenerate Thumbnails plugin.

    » Refer to Regenerate Thumbnails

Copyright & Credits

Resources Used