Create a front page like the live demo – Part 1

If you would like to create a front page like the live demo has, this tutorial will show you what I did. Most of it will involve shortcodes which will require the Opportune Shortcodes plugin to be installed; you can find this in the original download package for this theme.

Important Info Before we Begin

Working with Shortcodes can be a bit of a challenge, more so when working with content that is more complex. When working with shortcodes, especially for this HUGE tutorial, take it slow and don’t rush into it. Shortcode is finicky to work with when using a lot of it in the same page and also with the WordPress editor. Save your work often as you build your page up. I’m going to take you through the steps for creating the front page, but there are a lot of steps and things to do as you will find out because I had to split this into 3 separate tutorials.

NOTE To show the front page widgets only on the front page, we need a way to do this, so if you are using Jetpack, we can use the Widget Visibility feature, otherwise, I recommend a plugin called Display Widgets, which lets you set each widget to where you want to display it (them). 

Shortcodes that are Complete

Throughout these tutorials on setting up a front page like the demo, there are many instances where shortcodes with various attributes are used. I take you through each one, but to help make things easier, I’ve also included snippets that gives you the full code from the live demo site that you can copy and paste. You can find them in the “snippets” folder in the original theme download package. The shortcode snippets include:

  • front-page-action-box
  • front-page-content
  • front-page-image-boxes
  • front-page-logo-bar
  • front-page-showcase-gallery

Get yourself a big coffee, get comfortable without distractions, and lets get started….

Step 1 – Create your Front Page Content

This is the part of the front page we will be making. It has two columns that we will make, along with the content we will add to each column shortcode. It’s important to remember that it’s best to add your content to the shortcode before you click “Insert Shortcode” into your page editor.

frontpage content

To begin, you will want to create your front page…

  1. Go to Pages >> Add New
  2. Select the “Landing Page” template.
  3. Title your page what you want, but remember that we won’t be showing the title on the front-end…more on this in a moment.
  4. Save your page as a draft (or publish it if you are on a development site location)

Hiding the Page Title

I recommend using a plugin called “Hide Title” because it makes it easy by checking the box on the page editor as you make your page. 

Create Columns

Now we need to add our columns by using shortcode, so you will want to make sure you have the Opportune Shortcodes plugin installed and activated. You can find this plugin in the original download package of the theme.

  1. Just above the page editor is a button called “Insert Shortcode” that I want you to click on. A popup window will show, so I want you to choose “Columns“.
    shortcode columns
  2. Now we want to choose “One Half” and then immediately below, click the button “Add Column” and once again choose “One Half“. Before we insert this, check the little box next to “Last Column
  3. Click on “Insert Shortcode

Adding Content to our Columns

  1. First thing we need to do is add an image to the first shorcode column, so in your editor where you see the first part that says “Column Content” needs to be deleted by highlighting it and then click on the “enter” key once to delete it, a second time to create a line, and then a third to create another line so that we can add content between it where “Column Content” was.
    fp column content1 deleted
  2. Now with the editor, we want to insert an image in that empty spot, so let’s do that by clicking the editor button “Add Media” and get an image. Make sure you align it as “none”.
  3. We should have an image showing inside our first shortcode column. It’ll probably look out of place in our editor, but that will change when we preview/view the page.

Adding our List Content and Button

  1. Next, we want to find the other shortcode column code in our editor, and once again, we will remove the text that says “Column Content” and add the extra lines with the “enter” key on our keyboard just like we did.
    fp column content2 deleted
  2. In that empty spot, type in Flexible and Loaded with Features and highlight it and make it a heading as H1
  3. Next, type in a paragraph intro below it
  4. Then we create a list of items like the demo
  5. Now just below that, we need to insert another shortcode, but this time it’s a button. So just below the list we made, we will insert a button shortcode by clicking on the top “Insert Shortcode” button again and then select “Button”. Fill in the necessary information that you see in the window, then click “Insert Shortcode”.

Now we can click Publish or Update the page and take a peek at it. If all went well, it should look like the screenshot further up this page.

CONTINUE TO PART 2