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.
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).
Important After activation, you will be presented with several plugins that you have to activate. Do not forget to activate them all or not all of the theme features will be available.
Note If you have existing content and featured images, you will have to install Regenerate Thumbnails plugin and run it from Tools > Regen. Thumbnails.
If you already had images in your Media Library when you installed SmartMag, you will have to resize your image thumbnails. Follow these instructions:
Once you activate the theme, to get full theme functionality, you will have to install the required plugins. You can also install the recommended plugins to further enhance the theme features, based on your requirement. Finally, there are a few advanced & optional plugins that are only required for a few users (read more).
To install these plugins, go to:
The plugins under this heading should be installed only if you need a feature they provide. The Advanced plugins affect performance unless configured properly and may require a powerful webhost.
If it's a fresh site (or a test site) with no content, it's a good idea to import one of the demos with Full Content to get you started. You don't want to do it on a live production site as it will import several posts, pages, and images.
Tip If it fails, you will have to request your webhost to increase your PHP max_execution_time (or any other webserver timeout to at least 120 secs) and memory_limit (to at least 196M) temporarily. If you tried it on a fresh WordPress install, you can go back to fresh install by using the "WordPress Reset" plugin.
Once you're done with theme installation, it's time to setup your blog. What to do next:
There are many different widgets/blocks that can be used to construct your homepage (or any page).
We'll be using Elementor Pagebuilder plugin to build the homepage. Please make sure it's installed and active.
If you have never used Elementor before, please get some basic knowledge of using Elementor via these links: (a few minutes is all you need)
Now that you have basic knowledge, let's begin:
NOTE: If you imported a theme demo, you don't have to create a new homepage. Go to your site home and click "Edit With Elementor" in the adminbar at top, or edit the page "Homepage" in WordPress admin and click Edit with Elementor button.
The easiest way to get started is to import a pre-made Homepage layout.
Start editing the blocks, widgets, and sections. Learn more about editing blocks below.Note Some blocks will look different from screenshots. This is because they adapt to your global settings. For example, block headings default style, typography, and so on will be used from your Customizer settings.
With the basic knowledge of Elementor from above, you can add a section with sidebar.
The easiest way is to click the Smart Studio button and under Structure, import Content + Sticky Sidebar.
But if you wish to do it manually, learn more below:
We have 12 Flexible Smart Blocks in Elementor that are extremely customizable into countless variations. You will find them under SmartMag Blocks section on the left pane of Elemnetor.
Adding a block and customizing it is quite simple:
With Smart Studio, apart from Homepages, you can also import blocks and section.
We would recommend exploring and trying out the customization options under each block. The Smart Blocks are extremely flexible.
Block headings can be enabled from the Heading section of edit block panel.
When you add multiple blocks in a section in Elementor and want them to act like a single block, for example, skipping posts already displaying in block 1, block 2 and so on, you can use our most unique feature: Section Queries.
You can set the query in the section settings. Doing so will make all the blocks under this section act as if it were one block. Here's an example video showing blocks using section query:
Once you have created a page that you would like to use as your homepage, follow these steps:
SmartMag comes with a Smart Flexible Header customizer that lets you build your header or import and customize and premade one.
To use a header preset:
We recommend using two versions of the logo. One the base logo size and another 2x/retina size (twice the width and height of original) for higher resolution devices.
If your logo is large, you will also need another version for mobile devices. Since mobile devices are generally 2x/retina, only 2x version is needed.
Using about 16 elements, you can customize or build your own header layout. The header consists of 3 sections: Top Row, Main Row, and Bottom Row. Each row has 3 Columns: left, center and right.
Start by selecting the width.
Now that you have a basic layout, you may wish to modify the elements you added. Each of the elements have settings on the previous screen. For example, if you wish for Social Icons:
Similarly, for any Element, go to Appearance > Customize > Header & Nav Menu and navigate to the section for that element.
If the header preset you selected shows an advertisement, it will be most likely using Text Text/HTML 1.
However, if your current header layout doesn't have an ad element, you will have to add it to one of the sections. See customize header layout section above and add Text/HTML 1 to the appropriate Row.
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.
It's preferred to setup global settings from Customizer instead of setting per category.
Go to Appearance > Customize > Categories & Archives to set layouts, and featured grids for all your categories.
There are several layout styles and options to choose from:
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.
SmartMag supports featured sliders for categories. There are two options here:
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.
By default posts per page setting from Settings > Reading is used. This option can be used to override that.
Adding a new post is the same way as default WordPress installations, however, there are extra options that might need explaining.
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.
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.
Note SmartMag uses WordPress's standard cropping and resizing method.
Retina images are used for hi-res / hight DPI screens such as iPad, Macbook Retina and so on. For these devices, you need to upload images double the minimum dimensions above.
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.
Note To create a tiled mosaic gallery, Slim Jetpacks plugin is required.
WordPress supports embedding into posts by default. An audio player will be inserted into the post.
Image format works very similar to a standard post. Just set a featured image of a recommend size and you're done.
You will see the following post options when adding a post.
The review system is pretty self-explanatory. You only have to enable it for posts that are supposed to contain to be a review.
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:
Note It's recommended to check "Disable Featured?" for posts of this type.
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.
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 is a simple process just like a default WordPress install. If you're unsure, learn more about pages.
If you're looking to build your homepage, head to Homepage Section.
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:
Adding Google Maps to Contact Page
To add Google Maps:
Details in Sidebars & Widgets section.
To create a page with the list of authors, simply create a normal page and use Authors List as Page Template.
SmartMag comes equipped with several custom widgets but also styles many of the default widgets in several locations.
The included subscribe form relies on Mailchimp - the industry standard for managing mailing lists. You can either manually send newsletters or use their RSS to Email guide to automatically send newsletters campaigns. But before that, you need to create an email list by integrating it to your blog subscribe form.
Sidebars are increasingly being used for prominent content but as the user scrolls, the sidebar goes out of the view. The solution is Sticky Sidebar.
Sticky sidebar makes your sidebar widgets always visible as the user scrolls, until they reach the footer. To activate:
Note: These settings do not apply to the Homepage. You have to enable the sticky sidebar in your homepage using Elementor. See this section to learn more.
What if you don't want your whole sidebar, but only the last widget to be always visible/sticky? The solution is a great lightweight plugin named Q2W3 Fixed Widget.
Once you have installed it, you have to configure it to work properly with SmartMag:
Next, to make a widget sticky:
WARNING This only works for the last widget in a sidebar.
SmartMag relies on Custom Sidebars plugin to offer this functionality. This means your sidebars will be safe even if you decide to switch the theme. 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).
Go to Appearance > Widgets and Create a new sidebar.
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. Generally, you only want to replace Main Sidebar.
The social followers widget is a simple drag/drop widget that's enabled when Sphere Core plugin is active. The widget name is SmartMag Social Follow.
To configure the social follow icons, head to Appearance > Customize > Social Follow & Count.
Note: Please note if you wish to use counters, automatic count isn't possible for all services. Instead, you can enter the count using the field Manual Count under the service settings. The webhost may be blocking the service or the service might be blocking the webhost and in those cases, manual count is also helpful.
If you have enabled the followers counters, you will need to set up API keys for the following. Other services either work without API or require Manual Count.
As not all services support automatic count, and sometimes the connection might be blocked by webhost or the service might block the webhost, you may have to use manual count instead. To set manual counters:
Both the color/style and typography settings are located in Customizer.
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.
To use system fonts, you will have to go to Appearance > Customize > Colors & Typography > Global Typography and set the Primary and Secondary fonts to use one of the system fonts stack from the dropdown list (bottom of list).
Additionally, you will have to go through all the Customizer typography related settings under each section, where customized. For example, if a custom font was set for a block heading or Headings Font, you will have to change it to system fonts as well.
We fully support TypeKit/Adobe Fonts. Using TypeKit is similar to using Google Fonts above, with a few more steps.
brandon-grotesque. This is same as adding a custom Google Font name as explained here.
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.
SmartMag is well optimized for general performance but there are several steps you can do to make it even faster:
Lazy load is a built-in theme feature in SmartMag that loads images as the user scrolls on the home, category listings, archives etc. - basically images are loaded as needed. This saves bandwidth and speeds up the first load. To enable Lazy Load:
There are countless great options to optimize images for WordPress. You can refer to this comparison article for the options. Some premium plugins like ShortPixel offer a generous free quota per month as well.
If you want to go even more advanced, we recommend using WebP Express plugin. WebP is the latest technology that offers lowest size at same quality. However, it doesn't work with Cloudflare and some other CDN providers.
We recommend using W3 Total Cache for your caching needs. If you know how to use a cache plugin, you may use any like WP Super Cache or WPRocket etc.
Not For Beginners Don't add a caching unless you have some WordPress experience.
Next to Page Cache: tick Enable and set page cache method to Disk: Enhanced.
Next to Browser Cache: tick Enable.
Go to Performance > Browser Cache and ensure Set expires header, Set Last-Modified header and Enable HTTP (gzip) compression are ticked.
One biggest performance gains, after cache plugin, can come from improving CSS and JS delivery. We have well-tested, custom-made tight integration with Debloat plugin.
On the main settings under Optimize CSS tab, we suggest enabling all the optimizations.
If you use a lot of third party services, you will have to add them to delay load as they can cause a lot of delay. For each of the service below that you do use, copy the code and paste it (one per line) in Target Scripts field.
Note Google Adsense will be delayed load by default. A few others like twitter widget are also delayed by default.
This is an advanced feature yet due to our custom integration with SmartMag, the theme's unused CSS removal will be simple enough. All you have to do is enable it as follows. Tick Remove Unused CSS and Enable for Theme CSS.
WARNING Do not enable this if you don't have a cache plugin.
This should be generally trouble-free. If you use a Child theme with Custom CSS that's causing issues, you can exclude it next to Exclude Stylesheets like this:
Note There usually is little benefit from removing too much of CSS unless you have really bad plugins doing hundreds of KBs of CSS. So this is usually unnecessary. It's better to focus on other optimizations.
If you're an advance user with some CSS / dev tools knowledge, looking for that extra snappiness, you can enable Remove CSS feature for your plugins, or even everything.
Finally, there's also a way to load all of the original CSS with a delay using the Delay load Original CSS feature. This will speed up initial render and load rest of the CSS before user starts interacting with the page. Using this method, precise effort of using Keep Selector feature can be avoided.
WARNING We recommend Debloat plugin instead explained above. This is for Advanced users only. DO NOT use both plugins.
Minification and merging of all the assets of WordPress, plugins and theme can improve delivery of data by reducing size, improving compression, and sending all the data in one request instead of multple ones. You will need a free plugin named Autoptimize for this.
For max performance, you can remove all scripts under "Exclude scripts from Autoptimize:" but this might break some plugins - only enable it after everything else is tested.
For max performance, tick all the settings as below including: Aggregate CSS-files, Aggregate Inline CSS, and Inline all CSS.
SmartMag demos, by default, don't need many of the assets Elementor loads. Unless you're using some of the built-in Elementor widgets, these can be safely disabled.
Frontend JS will be needed for some of non-SmartMag Elementor blocks that use video APIs, lightbox, or custom sliders. Some like Swiper may also need the frontend modules.
Animations assets are only needed if you use Advanced "Motion Effect" in Elementor for a widget or section.
Share Links is only necessary for the non-recommended Elementor social block.
Note This section assumes you already have WooCommerce Plugin activated. If you do not yet know how to use WooCommerce, please use WooCommerce's Documentation to familiarize yourself.
SmartMag uses the WooCommerce's default sample content. Follow the official WooCommerce Dummy Data guide.
Please note, on demo, for the Shop Sidebar example, we're using a custom sidebar with two widgets: WooCommerce Price Filter, and WooCommerce Top Rated Products.
SmartMag fully uses WooCommerce's internal pages. When WooCommerce is activated, it will create Shop, Cart, Checkout and My Account pages. These are normal WordPress pages that you can edit just like any other page.
By default, the WooCommerce integration will have right sidebar for the shop page and full width for other pages like cart, product etc.
This feature requires SmartMag v5.4 or later.
A special widget area Shop Sidebar is used for WooCommerce, when a sidebar is enabled.
Sometimes you may wish to disable the sidebar for only some pages, such as the "Checkout" page. You can disable the sidebar selectively for pages.
Tip The page named "Shop" is used for all product listings so you may change its sidebar settings to affect all product listing pages/archives.
SmartMag can be used with bbPress with fully compatibility offered since version 1.5.
Note This section assumes you already have bbPress Forum Plugin activated.
SmartMag's default bbPress layout is based on traditional forum hierarchy. You need to create categories and forums.
Please make sure to sure (bbPress) SmartMag Login Widget for the sidebar. There's another widget with a similar name. Make sure the one you use has the name SmartMag in it.
If you're considering activating AMP on your site, make sure you're aware of the pros and cons of doing so. Google AMP can help your articles get better ranking but there are also drawbacks.
Search Engine Journal: Does Your Website Need Accelerated Mobile Pages (AMP)?
Moz: Should you AMP-lify your site?
We have done our best to make SmartMag fully compatible with AMP. Our Bunyad AMP plugin is based on AMP for WordPress plugin (joint effort by Automattic and Google Engineers), with our unique features to preserve all your site's original branding - logo, colors, look and feel - even in the AMP mode.
As with all AMP plugins, there are a few basic requirements to keep in mind. First, you need a good quality webhosting provider and setup a proper cache plugin.
Bunyad AMP with SmartMag does not require any configuration. All you have to do is install and activate it.
?ampto any URL to access its AMP version.
If the validation fails, go through the following troubleshooting steps:
Most popular cache plugins will cache the AMP just fine. However, a few cache plugins may not cache AMP when using the default URL scheme. To workaround this:
Path suffix: /amp/option.
SmartMag comes with .po/.pot file included under the smart-mag/languages folder. The front-end strings are in bunyad.pot file. While the back-end strings are in bunyad-admin.pot. To translate front-end:
Easy Method You may use the Loco Translate plugin instead for an easy GUI translation instead of using PoEdit. Or you can use the WordPress default way explained below.
en_GBIn this case, you would save your file as
If you wish to translate the backend too, you will have to follow the same steps as above but the filename will be prefixed with
For languages that read from right-to-left unlike English which is left-to-right, SmartMag will automatically switch to an RTL style, as long as you it's in your language and uses the correct locale (as explained above).
For multilingual sites, the best way is to purchase the WPML Plugin. SmartMag is compatible with the plugin.
When using WPML, we recommend you use Display the language switcher in the WP Menu option and select Main Menu. This will display the languages drop down menu in the main navigation menu.
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.
WPBeginner has a great article on How to create a
WordPress Child Theme. Use
Template: smart-mag instead of twentyeleven.
@import url("../smart-mag/style.css"); in the CSS file to import parent stylesheet.