I am asked “How do I make my home page look like your demo?” for many of my themes, so I decided I will include these kind of tutorials with every new theme I release, starting with the Visionary…which I will base this setup on.

Create a Static Front Page and a Blog Page

  1. Go to your “Pages” manager in your WordPress admin and create two new pages: (1) one for your home which I called mine “A New Version of Visionary”; (2) then create the other page and call it “blog” (but do not put any content into this one).
  2. Go to Settings >> Reading, and then choose the “Static Page” option, and in the dropdowns, choose the pages you just made with the Front Page being the “A New Version of Visionary” and the Blog page is the “Blog” page you made.

    wp-reading-settings

  3. Click Save Changes

Create Your New Home Page Content

  1. Open the new home page you just made and to get the columns I have, I used shortcode in the page to give me 4 columns. Copy & Paste the following code but be careful with the WordPress editor because it has this habit of putting line breaks <br> after each press of the “Enter” key on your keyboard.
    [c196first]
    <h3>Add a Heading</h3>
    [dropcapgrey]1[/dropcapgrey]Add your own content here.
    [/c196first] [c196]
    <h3>Add a Heading</h3>
    [dropcapgrey]2[/dropcapgrey]Add your own content here..
    [/c196] [c196]
    <h3>Add a Heading</h3>
    [dropcapgrey]3[/dropcapgrey]Add your own content here..
    [/c196] [c196]
    <h3>Add a Heading</h3>
    [dropcapgrey]4[/dropcapgrey]Add your own content here..
    [/c196]
  2. Replease the text you see above for both the headings and the content areas. You will also notice I have a nested shortcode for the numbers which are used with the Dropcap styles I provided with the Visionary theme (see the demo). They can be the first letter of each word in each column if you choose.
  3. Make sure you have comments and the allow trackbacks unchecked – although that is just my preference for pages and also check that the page template is the “Default” option
  4. Click SAVE on your page.

Create Your Main Menu (if you do not have that yet)

  1. Go to Appearance >> Menus and click NEW on the menu page and title it as “Main Menu” then click SAVE
  2. Add your menu items you want, pages, your own links etc. For the first one, create a Custom Links item and call it “Home” and link it to the home page of your site (best without the index page: http://www.yoursite.com ). Add your blog page you made to the menu as well. Save the Menu and then in the left column panel that says “Theme Locations“, there is a “Your Primary Site Menu” selection there. In the drop down, select the Main Menu you just made and click SAVE there as well. If all goes well, your menu should not show up in the front-end, with the static front page “home” you just made and the “blog” page you just made.

Setup the Content Slideshow like the Demo

  1. Get your images together (you will need to get your own images because these are copyrighted and owned by their respective artists through www.veer.com ) and the content slides. Regarding the images at Veer.com, you can of course use any photo stock house website you wish, but I now use veer because their terms of use are a bit more flexible and the prices are reasonable…starting at $2.25 each. You may also noticed the images in the demo slideshow site, each one has a transparent vertical white panel on them, I simply opened the image in my graphics software (in my case it’s Adobe ImageReady) and added a white vertical rectangle and made the opacity like 16% and a little less on the other one that is even more transparent.
  2. Image Size I use is the default settings: 555 x 340 (sized in pixels), so prepare your images on your computer how you want them and then use the WordPress Media Manager to upload them. As you upload each one, copy and paste the image PATH to a text editor like Notepad or whatever you use because you will need the paths to each image shortly…
  3. Go to the Theme Settings control panel and click on the Showcase and Slideshow Settings panel, then select the “Content Slideshow” in the first dropdown list for the Home Page Showcase option…click Save Changes
  4. Now click on the Slideshow Content panel because this is where you will now add the images and the content for each slide
  5. For your 1st slide, make sure you enable it, paste your image path (the ones you just copied earlier when you uploaded them), add your image ALT description (basically a description for your image that relates to the content you are writing about), title, intro, choose your button text from the selection, and then add the link (http://www.link-to-somewhere.com) to the button link field
  6. Click SAVE Changes
  7. Repeat this process for each slide you plan to add, up to 5 are possible.

You Should Now have a Front Page like the Demo Site

If all went well, you should have a front page like the Visionary demo site, but with your own content and images.

By |2010-10-15T01:15:38+00:00October 15th, 2010|Blog|