Setup Categories

We prefer and recommend categories over tags, but if you wish to use tags, you can enable them from theme settings panel.

Setting up categories for this theme is no different than ordinary category setup in WordPress, however, we provide some additional layout settings.

Go to Posts > Categories and fill in the info required. To choose the correct layout, refer to the Demo.

Category Options

Category Listing Style

There are 3 layout styles and 4 options to choose from: (click to view demo for more information on each style)

  1. Default Style: This is the style you have chosen to be the default from Theme Settings. If you change the default from Theme Settings, the layout for this category will change too.
  2. Modern Style - 2 Columns: Shows the listing with a 2 column grid format. Recommended!
  3. Blog Style: Shows category listing in a typical traditional blog layout.
  4. Class Large Blog Style: Shows category listing in a typical traditional blog layout.
  5. Timeline: Timeline is best left for categories where the post date/time and content is most essential.

Show Sidebar?

This option allows you to set whether you would like to show the sidebar in the category listing or not.

Note It does not affect the "single post" view in the category. You can modify whether to show sidebar for a post or not for each post.

Featured Slider?

SmartMag supports featured sliders for categories. There are two options here:

  1. Show Posts Marked for Featured Slider: This will show posts that have "Featured Slider Post?" checked.
  2. Show Latest Posts: Show most recent posts in slider, ignoring "Featured Slider Post?" setting.

Category Color — Optional

SmartMag uses the category color to add an underline in the menu for the category. It's also used in homepage blocks for category headings and label colors.

Adding Posts

Adding a new post is the same way as default WordPress installations, however, there are extra options that might need explaining.

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: 1078x516 minimum (width x height).
  • If you don't use Full Width layout: 702x336 minimum.
  • For posts that will only appears in homepage blocks and listings (no slider, no full-width): 351x185 minimum.

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

About Retina We recommended using images of double height and width to have even 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.

SmartMag, 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.

Supported Post Formats

Video Format

Setup your post normally and set a featured image. Copy the embed code of the video from YouTube, Vimeo or any other site that gives you video embed codes. Paste the code in the "Featured Video Code" box.

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.

SmartMag will automatically convert the first gallery inserted into a post to a gallery slider - granted "gallery" post format is checked. To use the gallery post format, same as every other post, set a featured image first.

  1. 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 tiled mosaic gallery, Slim Jetpacks plugin is required.

Audio Format

WordPress supports embedding into posts by default. An audio player will be inserted into the post.

  1. Click Add Media button.
  2. Select your audio file. Once uploaded, make sure embed option is selected.
  3. Insert and Publish.

Image Format

Image format works very similar to a standard post. Just set a featured image of a recommend size and you're done.

Post Settings & Options

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

Post Options

  • Featured Slider Post? - Check this to feature this post in the homepage/category sliders.
  • Layout Style: You have the option of a layout with a sidebar on right or a full-width layout for this post.
  • Featured Video Code: As shown in the Video Format above, it's for setting a featured video for the post.
  • Custom Background Image: Available when your layout is set to Boxed in Theme Settings. This allows you to change the background image of your site for only this post.

Reviews System

The review system is pretty self-explanatory. You only have to enable it for posts that are supposed to contain to be a review.

Review Options

  • Enable Review? - Check this to enable review box for this post.
  • Display Position: You can either display the review box at top being full width, or at bottom full width.
  • Rating Type: You can use either percent or percentage format to display rating in the box.
  • Heading: A heading text can be set for the review box. If no heading text is provided, the review box header is hidden.
  • Verdict: Enter one word for verdict, such as "Awesome".
  • Verdict Summary: Enter a few line summary of the review. You can use advanced shortcodes here too.
  • Criteria: Click on Add More Criteria and fill in the Label and Rating for each Criterion that follows.

Multi-page Content Slideshow

One of the unique features in v2.3+ is a multi-page content slideshow. It's basically <!--nextpage--> feature of WordPress with enhanced functionality.

If you are new to WordPress nextpage feature, the only thing to know is that you can place a <!--nextpage--> in Text editor anywhere to split to content into multiple pages - More info here.

Once you have created a multi-page post normally, you will have to enable the slideshow feature. Follow the steps below:

  1. Edit your post and look for Post Options.
  2. Next to Multi-page Content Slideshow? select either "AJAX - No Refresh" or "Multi-page" option (explanation below).
  3. Save your post. That's all. Your slidehow will be split based on <!--nextpage-->.

Note It's recommended to check "Disable Featured?" for posts of this type.

AJAX or Multi-Page?

There are two options available. AJAX option prevents a page refresh so the content will be loaded via AJAX. This may be good or bad depending on your personal usage.

A site looking for more advertising views will want to use the Multi-page option to register more views. Whereas, a dynamic website wishing to make things faster for users will want to use the AJAX option.

Shortcodes

Most of the shortcodes you will need are added to the GUI Shortcode Generator. Click the "Shortcodes" button while adding a post to see a list of generator-based shortcodes. There are a few layout related shortcodes that will not be listed there.

For more info, refer to the Shortcodes section of the docs.

Creating Pages

Creating pages is a simple process. However, the available templates and special layout based shortcodes might need a bit of explanation.

The Page Builder

Page Builder

Using the page builder is recommended to create homepages. But you can use it to setup any page you like using the combination of widgets available. What's more, you can even use shortcodes within the text widget within the page builder. The only limit is your creativity!

To use the page builder:

  1. Considering you're at new page screen (Pages > Add New), click Page Builder next to Visual and Text tab, above the post editor.
  2. Click the + button to add new widgets. There are two types of widgets, the normal widgets and special block widgets. You can drag and drop multiple normal widgets into a row or column but the same cannot be done for block widgets.
  3. Click on three lines button next to + button to add a row. You can create multi-column or single column row.
  4. Under Page Attributes, select Homepage & Blocks as Template.
  5. Play around with the widgets. Don't forget to enter a page title. Preview and Publish.

About Shortcodes — Advanced & Optional

You can either use the pagebuilder or use advanced shortcodes for everything. Not only that, you may also use shortcodes within the pagebuilder widgets such as Text or Rich Text widget.

For more info, refer to the Shortcodes section of the docs.

Page Templates

Page Templates

  1. Default: The default page has a container.
  2. Homepage & Blocks: This is a bare-bone template. Use it with page builder or when using advanced shortcodes to create the homepage.
  3. Authors List: Use this template to create a list of blog authors.
  4. Sitemap: This is a special template only to be used to create a Sitemap page as shown in the demo.

Setting The Slider

Page Options

When creating or editing a page (for example, your Homepage), under the editor in Page Options, next to Show Featured Slider?, select the type of slider you wish to use.

Both the options are self-explanatory, the first uses posts you manually marked as "Featured Slider Post?" (read Add Posts to Slider), whereas the second option shows the most recent posts automatically.

Custom Sidebars

Details in Sidebars & Widgets section.

Other Pages, Instructions and Samples

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. Replace form content with this:

    <p>[text* your-name placeholder "Your Name"] </p>

<p>[email* your-email placeholder "Your Email"] </p>

<p>[text your-subject placeholder "Subject"]</p>

<p>[textarea your-message placeholder "Your Message"] </p>

<p>[submit class:submit-button "Send Message"]</p>
  3. Edit the "Mail" settings to suit your needs and Save
  4. For more information, refer to Contact Form 7's FAQ and Docs.

Once you have created your form:

  1. Go to Contact again. Copy the code under Shortcode column.
  2. 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.

Authors List

To create a page with the list of authors, simply create a normal page and use Authors List as Page Template.

Homepage Setup

There are many different widgets/blocks that can be used to construct your homepage (or any page). To create a page, please refer to Creating Pages section of the docs.

Setting Up Homepage

Once you have created a page that you would like to use as your homepage, follow these steps:

  1. Go to Settings > Reading.
  2. Choose "A static page" option for Front page displays.
  3. Next to Front Page, select the page you created to be used as the homepage.
  4. Save Changes.

Pagebuilder Blocks For Homepage

While you can use all the page builder blocks widgets for homepage, there are few blocks that are very suitable for homepage. We have used a combination of these in our demo.

Highlight Block — 2 or 3 Columns

There are two highlight styles that you can use on the home-page. The first one, which shows two categories side-by-side, is shown below.

The second style, is of three columns. As shown below:

To setup, enter page builder mode. If you haven't already read the section on Page Builder, read it before you proceed.

  1. Click "+" button to add a pagebuilder widget.
  2. Click on "Highlights Block".
  3. Select "2 Columns" and select a category or enter a tag for each column. Posts will be displayed from the selected category or the entered tag.
  4. Click "Done" and Save/Update your page.

Note You can either choose to use a category OR a tag - but not both at the same time.

News Focus Block

News focus block displays a category and all its sub-categories, as you can see in the picture below. It's a great compact format to display a lot of content.

To setup, enter page builder mode.

  1. Click "+" button to add a pagebuilder widget.
  2. Click on "Highlights Block".
  3. Select the parent category. By default all sub-categories under this category will be displayed in tabs. You can choose your own sub-categories by ticking them manually. Alternatively, you can enter tags.
  4. Click "Done" and Save/Update your page.

Note You can either choose to use sub-categories or sub-tags, but not both at the same time.

Blog/Listing Block — 3 Listing Styles

This is the default listing module you should have already seen on your setup or in the demo. It's the traditional blog listing format as defined earlier for categories.

  1. Click "+" button to add a pagebuilder widget.
  2. Click on "Blog/Listing Block".
  3. There are three types of listings as can explained under Category Listing Style. Rest of the preferences are self-explanatory.
  4. Click "Done" and Save/Update your page.

Example Homepages Setup

Below we will mention the pagebuilder blocks used in the example homepages in the demo. Please make sure you already know how to create a page and a homepage.

1. Default Homepage

Page Template: Homepage & Blocks (Advanced), Layout Style: Right Sidebar, Show Page Title: No.

Highlights Block
4 Posts, 2 Columns, and categories selected for each column.
News Focus Block
4 Posts and a category selected.
News Focus Block
4 Posts and a category selected.
Separator
Line.
Highlights Block
4 Posts, 3 Columns, and categories selected for each column.
Latest Gallery
Title "Recent Videos", 10 Media, "Videos" as Type of Media, and "Not Limited" to any category.

Setup Navigation & Menus

If you have imported demo content, follow (a) else follow (b) to create a new menu.

(a) Existing Menu

  1. Go to to Appearance > Menus.
  2. In the "Manage Locations" area, under Main Navigation, select Main Menu. Click Save.

(b) 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. (optional) 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.

Mega Menus

There are two types of mega menus that SmartMag is equipped with.

Links Mega Menu

The first one is used to create an organized multi-column list of links. We call it the "Links Mega Menu".

Category Mega Menu

The category mega menu is a 3 column mega menu that shows sub-categories in first column, the latest featured post in the second, and 2 recent posts in third.

Add Mega Menu

To add mega menu to your menu item:

  1. Go to to Appearance > Menus and select your menu.
  2. Expand the item you wish to add mega menu to by clicking the arrow icon.
  3. Under Mega Menu, select Mega Menu for Links or Category Mega Menu.
  4. Save Menu. Next configure sub-items (below).

Configure Mega Menu Items

To make mega-menus work, you have one additional step of adding sub-items.

For Category Mega Menu, add a few sub-categories as sub-items (drag/drop them under a parent category in menu). Example:

Links Mega Menu is configured by adding Custom Links to be used as headings. You can use 4 of these headings. Then, a 3rd-level sub-items are added which are displayed as links, under each heading. Example:

SmartMag has breadcrumbs enabled by default on all pages but the homepage (they would be redundant on homepage). The navigation breadcrumbs not only aid in navigation but also are immensely valuable for Search Engine Optimization (SEO).

The default breadcrumbs have Rich Snippets built-in so more SEO is undesirable. If you use a SEO plugin like "WordPress SEO by Yoast", please do not enable the breadcrumb functionality of the plugin.

However, if you wish to disable the breadcrumbs: (NOT RECOMMENDED)

  1. Go to Appearance > Theme Settings.
  2. Under Header, click on the button under Disable Breadcrumbs.
  3. Save Settings.

Sticky Navigation

SmartMag has an option that can make your navigation menu stick to top of the browser when your users scroll. This ensures that your navigation menu is always accessible to the user, no matter how scrolled into the page.

To enable sticky navigation:

  1. Go to Appearance > Theme Settings.
  2. Under Header, click on the button under Sticky Navigation.
  3. Save Settings.

Sidebars and Widgets

SmartMag comes equipped with several custom widgets but also styles many of the default widgets in several locations.

If you are unable to see these custom widgets, please activate the Bunyad Widgets plugin.

Custom Widgets

Bunyad - About
A widget to display an image/logo and a description of your site/blog. Recommended for footer.
Bunyad - Flickr
Display a configurable number of flickr photos from your account with configurable sorting options. Recommended for footer.
Bunyad - Recent Posts
An improvement over the default recent posts widget, including thumbnail. Suitable for main sidebar and footer.
Bunyad - Recent Tabs
Display latest posts. First tab is Recent and other tabs can be any category. Recommend for main sidebar.
Bunyad - Latest Reviews
Display the latest reviews.
Bunyad - Popular Posts
Displays the overall popular posts, based on number of comments received, with thumbnails.
Bunyad - Tabber Advanced
Like Recent Tabs but allows you to select a sidebar to use widgets from. Thus allowing you to use any type of widget in tabs.

How to use widgets

  1. Go to Appearance > Widgets.
  2. Main Sidebar is the main right sidebar and Footer (3 widgets columns) is the large footer. 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.

About Tabber Advanced Widget

This widget relies on Custom Sidebars provided by the plugin. To use it:

  1. Create a custom sidebar. You can use any name but use a descriptive name to remember it like Tabber Widgets.
  2. Drag/drop widgets to newly created custom sidebar/widget area normally. Note that the widget title will be used as the tab title - so keep it short.
  3. Drag/drop the Bunyad - Tabber Advanced widget in your Main Sidebar area.
  4. Select the newly created custom sidebar from the drop down next to sidebar.
  5. Save.

SmartMag'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.

Demo uses Recent Tabs, a Text widget with latest-gallery shortcode, an Advertisement widget, and the Latest Reviews widget.

Latest Gallery

The latest gallery in the demo shows 5 recent posts in a slider. For the latest gallery widget in the right sidebar, we use the following shortcode in a Text widget:

[latest_gallery cat="all" number="5" type="slider"]

For more information on this shortcode's settings, refer to the Shortcodes section.

Advertisement Setup

Setting up advertisements on the right side is pretty simple. You will create a Advertisement widget and paste your ad code in it.

For a normal ad, create the Advertisement widget as explained in section above, and paste the code in it. That's all.

If you would like to use custom ads in two columns, you can use the columns shortcode, for example:

[columns]

	[column size="1/2"]left ad code here[/column]
	[column size="1/2" class="right"]right ad code here[/column]

[/columns]

Custom Sidebars

SmartMag is fully compatible with all of the custom sidebars plugins available for free. Custom sidebars allow you to change the right sidebar (for example) to display different widgets on a specific category, post, or page.

If you wish to use custom sidebars feature, we recommend the Custom Sidebars plugin. It's an extremely powerful and flexible free plugin. It's recommended by the Theme to be installed but if you haven't installed it yet, install it from Appearance > Install Plugins (not visible if plugin already installed).

To use this plugin, go to Appearance > Widgets and Create a new sidebar. After you have created a Custom Sidebar, you will have to to go to Appearance > Widgets, click to expand "Main Sidebar", and tick "Allow this sidebar to be replaced".

Next, 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.

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

  1. Go to Appearance > Widgets. Click arrow to expand the sidebar you wish to use on a category.
  2. Click Sidebar Location link.
  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.

Older Custom Sidebars - less than v2.0

If you're using older than v2 of Custom Sidebar, go to Appearance > Custom Sidebars, under Replaceable Sidebars select Main Sidebar and Save.

  1. Go to Appearance > Widgets. Click arrow to expand the sidebar you wish to use on a category.
  2. Click Where? link.
  3. Click to expand on As a default sidebars for archives.
  4. Click on Category archives. Expand your desired category by clicking on it.
  5. Select your sidebar from the drop-down list or click the "<- Set SIDEBAR here." where SIDEBAR is your sidebar name.

As you may have noticed, there are other boxes after step 3 such as "Tag archives", "Author archives", "Search results page". You can use these to set a custom sidebar for a tag, author page, or the search results page respectively.