Extra Theme Demo Part 1 – How to Create it from Scratch

In this tutorial, we are going to re-create the Extra Theme Demo from scratch since we cannot find a full demo download available for the theme.

Assuming you have installed the Extra Theme, from the WordPress Dashboard go the the Extra menu and click on Category Builder.

You will find 2 default layouts on the list – Homepage and Default Category. Click on Homepage → Edit to open the layout.

Below you can see the default layout for the Homepage.

And this is what the frontend looks like.

To re-create the exact Homepage, we need to replace the existing layout.

From the Edit Category Layout for Homepage, click on the Load Layout tab.

You’ll find a list of Layouts available which you can choose from. For the Demo, we will be using the Magazine Homepage layout. Click on the Load button for Magazine Homepage and make sure you check on “Replace the existing content with loaded layout” to replace the existing layout.

This is now what the Homepage layout looks like. Under Layout Usage box, make sure you check on the “Use this layout as the home layout?” option then click on Update button to save the settings.

The frontend will now look like this.

Now the next thing we need to do is to populate the content. To do this, we need to add dummy Posts content.

Since we are re-creating the exact Extra Theme Demo, we would also like to use the images from their Demo site https://www.elegantthemes.com/preview/Extra/. To save time on downloading the images, you can just save the whole page from your browser. For Chrome, go to the Settings → More Tools → Save Page As, then select “Webpage, Complete” as Save as Type option then hit Save.

Now that you have downloaded the Extra Theme Home demo folder with images, you can start adding Posts.

Top Slider Posts Section

Let’s start by adding the top slider posts.

Go to Posts → Add New

Add the Title and dummy content

Add the Category (ex. Nature)

Set the Featured Image

To feature the Post at the top slider, make sure you check on “Featured Post” under Extra Settings box.

Click on Publish when done.

Your first slider post will now appear in the frontend. Repeat the same for the other slider posts.

For the next sections, we suggest you add all the Dummy Posts first along with the appropriate categories and images so you can just update later what to display for each sections.

2-Column Category Posts Section

Assuming you have added all the Posts, go to Extra → Category Builder and open the Homepage layout.

Open the left Posts module of the 2-column section

Select the Category you would like to display e.g., Nature. then click on Save and Exit. Keep the Posts Limit to 4.

Do the same for the right column Posts module.

Now you have setup the 2-column section.

Posts Carousel Section

The next section is the Posts Carousel.

At the moment, the Posts Carousel section has been auto setup because it was using the default category “All” to display the posts.

If you’d like to change the category to be displayed, you can open the Posts Carousel Module and edit the default settings.

3-Column Category Posts Section

For this section, the setup is just the same as the 2-Column Category Posts Section.

You can edit each column and select corresponding Category to display. You can also select the Sort Method for each.

Tabbed Posts Section

To set up the Tabbed Posts section, open the Tabbed Posts Module Settings and edit the Category for each Tab (currently set to ‘All’ by default). You also need to set a number to Posts Limit option. It will control the number of Posts to be displayed for each tab.

You may need to start on the second tab as the first tab is already set to ‘All’ category.

Open the Tab Settings. Select the Category then click on Save. Repeat this for other Tabs. You can also add a new tab by clicking on +Add New Tab link.

Your Tabbed Posts Module Settings should now look like this. Click on Save & Exit.

You have now finished setting up the Tabbed Posts.

Changing the Category Color

If you noticed from the Demo, each category has a color code. To set it up, go to Posts → Categories.

Open a Category to edit. Select a Color you would like to assign to a Category and then click on Update. Do this for other categories.

You now have color-coded Categories.

Sidebar Widget

Finally, we will be setting up the sidebar widget. For this demo, we will skip other widgets which requires actual data to display.

Go to Appearance → Widgets. We will be modifying the default Main Sidebar.

First, you need to remove all widgets inside the Main Sidebar except for Search as we will not be using them.

Now, drag the “Extra – Recent Posts” widget to the Sidebar. Enter a Title, assign a Number of posts to show, check all Display (post date, post thumbnail, and post categories) options then click on Save.

Next, drag the “Extra – Social Network Followers” widget to the Sidebar. Enter a Title, enable Facebook, enter the page URL, Page Name, App ID and the App Secret, and then click on the Authorize button. Don’t forget to Save the widget. Do this for other social networks you would like to add.

Next drag the “Extra – Recent Videos” widget to the Sidebar. Enter a Title then click on Save.

Next drag the “Extra – Login” widget to the Sidebar.

That’s it! The Extra Theme Homepage Demo is now complete.


affpro wide-banner ad

Sign up now for our FREE Newsletter!