Installing Mag from the WordPress Dashboard
Download the zipped theme pack to your local computer from themeforest and extract the ZIP file contents to a folder on your local computer.
Ok here’s the thing, you might be thinking why would I need demo content anyway for building my own site. Well in that case it is much more easy to build something from already existing things rather than from the scratch. All you need to do is replace certain stuffs, and your site will be ready.
The first step after activating the theme would be to install all the necessary plugins required by the Mag theme. It is important and highly recommended that you do install the suggested and required plugins before importing the demo data.
You would see a message like pop up in dashboard after activating the theme as shown in the figure above. This tells you the the required and recommended plugins that are required by this theme that needs to be installed. You can click Begin installing plugins in that message box or navigate to Appearance > Install Plugins from the admin dashboard menu. You will then reach the area as shown in the image below.
It is must that you install all the plugins of type Required. For now in this tutorial (It is best to install all the recommended plugins as well), let’s install all the plugins by checking the check mark and doing the Bulk-Install action. After successfully installing all the plugins, you should be able to see the page as shown in the image below:
After you have install all the required plugins, its finally time to import the demo data. We have shipped the demo data along with this theme.
When import data has been successfully imported, you should be able to as shown in the image below.
If your Front page displays is set to Your latest post (settings > Reading), and if you now view your site after importing demo data, your site should look similar to the image as shown below.
You might have noticed that it lacks menu in the header and it still doesn’t look quite as Demo Site yet. Next we will be focusing on making our site more and more like Demo Site which we have promised to deliver.
There are number of instances or places in this theme where we utilize the category images to make the visual more appealing. For this we have used the plugin named Category Images. The plugin allows us to represent a post category with its own image.
Follow the step blow to represent category by its corresponding images.
Now if you view the site again and hover the header menu item for which we have created a mega drop down. The images of the category will be displayed as shown below:
Its time to build the front page and we will continue building our front page with the help of demo data. It is strongly recommended that you build the front page of your site with the help of demo content, this way you can quickly set up your front page without any hassle. Of course, later in this documentation we will also look into how to create a page/front page from the scratch as well if you really want to build the page/front page from scratch.
First of all, we need to tell the WordPress, which page are we intend to make our home page / front page. Below is the image which shows step by step guide.
You might be thinking, ‘Oh well, it looks better but still something is missing’. You are right we are missing couple of things here. One is front page Hero Slider and the Recent News section if you compare to our Demo Site. Next we will look into how the front page have been structured and then we will also put the missing stuff (Hero Slider and Recent news section).
Follow the following steps to set up the Hero section of the front page.
Since the trend of using page builder in WordPress has been a huge success, we too have used the page builder for this theme. It makes easy for customer to grasp the structure of the page visually in the page edit mode. In our theme, we have used the page builder named, Visual Composer. The entire front page has been built with the Visual composer’s components. Each section of the front page is the component of visual composer and each section may contain other visual composer component inside it.
You might have noticed that we still do not have any hero in our front page. You might also have noticed that, despite the presence of Hero Section when viewing the page (front page) in edit mode, it still not rendering the Hero in our front page. Well, let’s make it then. Follow the step below as shown in figure below:
You might have noticed that we still do not have any recent news section our front page as displayed in our Demo Site . You might also have noticed that, despite the presence of Recent Post section when viewing the page (front page) in edit mode, it still not rendering the Recent post in our front page. Well, let’s make it then. Follow the step below as shown in figure below:
Then, Magazine Recent Post Settings box will appear,
In the figure above, you can see that the post are displayed in two orientations. One is vertical orientation (Left Figure) and the other is horizontal orientation (Right Figure). If you look carefully in our Demo Site in the front page, you would see there are total of 5 of these posts group. However, only one custom visual composer component is responsible to create this group of posts. The component name is Display Post. Through the component settings, you can specify whether to display the post vertically or horizontally. Have a look at the figure below to know the placing of these component in the front page in page edit mode.
Open up the setting box of one of the Display Post component by clicking while hovering the component in edit mode.
Open the front page in edit mode and focus on the area as shown in figure below. The area enclosed by red rectangle is responsible to make the Top Categories section of the front page. The name of the component is Display Top Categories.
Open up the setting box of of the Display Top Categories component by clicking while hovering the component in page edit mode.
Open up the front page in page edit mode.
Open up the setting box of of the Photo viewer component by clicking while hovering the component in page edit mode.
Note: Make sure you have installed and activated the plugin named, Magazine Instagram Feed.
Follow the step as shown in figure below:
Click on Configure Widget
Now back in the front page edit mode,
Open up the setting box of of the Widgetised Sidebar component by clicking while hovering the component in page edit mode.
Before we start getting to know with each custom visual composer (Page Builder) component , lets set up the place (page) where we will test each custom component.
After this we will look into how to add different page builder components inside the page. However we are not going to look on every page builder component of visual composer. We will only cover those custom builder components which were developed by us for this theme specifically in this documentation. The regular components provided by the visual composer have got their own full fledged documentation here.
Magazine Wrapper is a custom element which acts as a wrapper for different section in the site. It provides a more manageable section within the site. Let’s inset the component in our page (page we created earlier using Page: Visual Composer Page).
Under the tab, Magazine (place for custom page builder component) select Magazine Wrapper, as soon as you add the component, its setting box will automatically appear as shown in figure below:
Once you placed wrapper (with or without container inside it), you can place other component inside it. Well, that’s pretty much about wrapper component. However, it is not compulsory that you you should place other components inside Magazine Wrapper element. It is a nice way to separate the blocks (slider section, subscription section…) and allows to place a container inside it.
One important thing to note is, whenever you place the Magazine Wrapper component, you will see a icon inside it which means you can place other component inside it by clicking icon. There are basically two types of component in visual composer. One is wrapper type component and the other is non-wrapper type component. Wrapper type component is a component which allows other component to be placed inside it whereas, Non-wrapper type component don’t. Magazine Wrapper Component is a custom wrapper-type component.
Magazine Carousel helps to create page hero. It is used to make carousel, slider, post grid etc.
Let’s insert this component in the page. Place this component inside the the Magazine Wrapper component discussed earlier by clicking icon inside magazine wrapper component and select the component as shown in figure below:
Click Magazine Carousel, after clicking it it’s setting box should appear. We have already learned in the section, Setting Up Hero how to manipulate this component by adjusting its values.
With the help of this component, we can create five different types of Hero. That’s not all ! Each Hero types comes up with number of variations. Technically there are currently 11 Variations of Hero to choose from. Isn’t it lots ! More the Better !
Screenshots of all the possible output of this component are shown below:
Magazine Map renders the google map with minimum effort in your page.
Settings of Magazine Map:
Try to match the number in the figure above with the number in the figure below, you will get the idea of what this component does, easy huh…
Magazine Paragraph is another custom component which lets you to inset a paragraph in pages along with its title.
Setting box of Magazine Paragraph
Preview of the output render by this component.
Photo Viewer is another custom builder component which allows to select multiple images from media gallery or from the system to create a slider of image with an image preview facility. We have discussed this component when creating front page with Demo Front Page | Photo Gallery Section here.
Magazine Display Post is another custom builder component which allows to display a post from a specific category in two different layouts (Horizontal and vertical). We have discussed this component when creating front page with Demo Front Page | Horizontal and Vertical Post here.
Magazine Recent Post displays the recent post or can be made to display a recent post from a particular category. We have discussed this component and its settings when creating front page with Demo Front Page | Setting Up Recent Post here.
We may have discussed this component earlier in Setting Up Recent Post, however we have only displayed only one variation. Below is the screenshots of all the variations that this component can render in the site.
Magazine Mail-chimp Subscription is another custom builder component which allows you to insert Mail-chimp subscription form. We have discussed this component when creating front page with Demo Front Page | Newsletter Subscription here.
Magazine Display Top Categories is another custom builder component which allows you to select categories to create the archive link to a post belonging to that particular category. We have discussed this component when creating front page with Demo Front Page | Top Categories Section here.
Before we create page from scratch using page builder (However, I still recommend you to create your front page using our one of the demo front page Learn here) we first need to understand the concept of wrapper and container. Just to give you the idea visually, have a look in the figure below:
So basically, we use the site wrapper and site container to whether we want our content to be full width or not. Thumb of rule is,
Before building the page from a scratch, first we need to add new page. See here for choosing template to create page.
Let me tell you, how are we going to structure our page.
So it’s all clear now for what we are going to do, It’s time to start building our page. Do not get confused with the Demo Front Page tutorial with this Create Page from Scratch section. In Demo-Front-page section we learned only about manipulating the existing component and in this section we will learn more about how to put those component inside the page and the organization of page structure like (wrapper, container, columns and responsiveness as well).
The component, Magazine Carousel is responsible to create page hero. Before we insert the component, we first need to create a wrapper to wrap the hero section. Lets insert the wrapper first.
Choose the Magazine Wrapper under the Magazine tab to insert the wrapper compnent
The setting of the component,
Now its time to insert Magazine Carousel component inside this newly created wrapper. Click the icon inside the wrapper and select the Magazine Carousel component to place inside the wrapper. After you have selected the Magazine Carousel component, its setting box will appear. We have already discussed on about the settings of this component Here. After inserting component, it should look like the figure below:
If you update the page, and preview the site, page should have the hero as shown in figure below:
The component, Magazine Recent Post is responsible to display recent Post. Before we insert the component, we first need to create a wrapper to wrap the this section as well. Insert the wrapper and inside the wrapper insert the the component Magazine Recent Post. As we looked in overview section we are going to put this section inside the container. Here’s what you need to do in order to place container inside the wrapper and in turn we will be able to put our component inside the container.
Make sure you have place container inside the wrapper with the class name container for container when inserting wrapper component (Magazine Wrapper) comportment. it should look like the figure below:
Now its time to insert Magazine Recent Post component inside this newly created wrapper. Click the icon inside the wrapper and select the Magazine Recent Post component to place inside the wrapper. After you have selected the Magazine Recent Post, its setting box will appear. We have already discussed on about the settings of this component Here. After inserting component, it should look like the figure below:
Update the page and preview the page. So far our page is looking like in the figure below:
As we mentioned in overview, our next task is to create the main content after recent news section. We will divide this main content into two columns. In which, the right column will be used as a placeholder for the primary sidebar of the site.
To do so, first we need to insert the site wrapper (Magazine wrapper) with container inside it and inside the site wrapper (with container) we will insert another component named, Row (standard visual composer component) and we will divide this row into two columns of size span-9 (left column, made up of 9 grids) and span-3 (right column, made up of 3 grids).
So far we have created Hero section, recent news section and also have setup the main content holder section earlier. Now its time to divide the main content holder into two columns. Lets do this.
Hover over the area enclosed by red rectangle in the figure above to reveal more control as shown in figure below. Click the custom.
Now, mention the column size
Now it should look like in the image below:
After creating columns, its pretty much straight forward to insert other component. Insert the Magazine Display Post (more info on this component) component in the left column. It should look like in the image below after inserting the component.
Append another component, named Magazine Top Categories (more info on this component) after Magazine Display Post. And also insert Widgetised sidebar component in right column (select Sidebar 1) .Now it should look like in the figure below.
The things like what header type you want to use, what footer type (dark mode or light mode), social link etc.. can be manipulated via theme options. there are lots of theme options, I am only going to cover those options which really needs explanation, most of the theme options are self explanatory.
Accessing theme option:
Navigate to Appearance > Theme Options > Header [tab]
Changing the layout of the single page / Blog page
Enable or disable Page scroll percentage in blog page
Enable / Disable banner Image in single blog:
You can enable or disable banner image in single post. We have a default banner image displayed initially, however you can change the banner image by navigating to Appearacne > Theme Options > Blog [Tab] and look for the setting ‘Enable image banner in blog posts’ and ‘Single Page Banner Image’. Note this banner image set from Theme options will be applied globally to all the the posts. However if you want to have a particular banner image for a particular post, you can overwrite via single post edit.
In this demo, post with slider image, you can see that there is a slider image instead of single feature image of the post. We can make a sliding image gallery by creating a gallery in a single post where you can put multiple image related to post which will be rendered as a slider at the top of the post.
First, navigate to Posts, choose any of the post and open it in edit mode. Under the Post Options meta box of the post, you should be able to see the section as shown in image above.
Our theme also integrate pop up based subscription in addition to Mailchimp Subscription. In this section we will discuss on how to setup the pop up based subscription.
For the pop up style subscription, our theme utilizes the the plugin named, PopUp by Supsystic to display the popup.
After creating new popup subscription box, its time to manage its settings.
Changing the submit button text:
In the above image, you might have noticed the word, subscribe seems to be not fitting well. Well, do not worry this preview is just the admin preview. Once this popup render in the site, our custom css will takeover and everything will be good.
Changing the body text of pop up:
In the above image, go to Design Tab > Texts. Then there you can change the body text of the popup.
Changing / Playing with CSS and HTML (Only if you Know)
You might have noticed that when you click the the breadcrumb icon in the header on the right side. A new hidden menu is revealed. Well, we have called this hidden menu a Side Hiding Menu Box. Below is the screen shot of the hiding menu box.
The following screenshot show how to manipulate the side hiding menu box:
Tiny Top bar is a thin top bar that appears at the top of the page. Below is the image showing the tiny top bar in the page.
Of course you can enable / disable the Tiny top bar from the theme options. Navigate to Appearance > Theme Options > Header [tab] and look for the following settings/options
The content of the tiny top bar is controlled via different widget area. Navigate to Appearance > Widgets. Refer the image below for the content manipulation.