More and more websites work on WordPress CMS these days. WordPress can hardly be called just blog basis.

In this tutorial, we are going to show you how to make a WordPress template with custom main page with the help of Divine Elemente and 2 PSD templates.

Final Product

What You’ll Be Creating
Before producing a theme with a separate Front Page you should

Download Source Files / Theme live preview


Step 1. Prepare two WordPress themes

Before producing a theme with separate front page you should:

  • Create a simple WordPress theme from a prearranged PSD template (1st Theme).
  • Create a simple WordPress theme from a prearranged PSD template (2nd Theme) as a future front page (theme header should better be set higher as it will be the front page).

Update: before publishing, make sure none of the elements are set as editable “Not editable in CMS”, otherwise, it does not work.

Before producing a theme with a separate Front Page you should

You can download prepared sources below (based on simple WP theme for Divine Elemente):

How to convert PSD template to WordPress theme you can read at “Quick Start Guide“, or watch our Quick start Video tutorial.

Step 2. Prepare a custom WordPress Template

After both of the themes are prepared on your local computer with Divine Elemente, you should:

  • Rename the following files of the 2nd Theme and copy them to the 1st Theme:
    • header.php -> home.php
    • footer.php -> home_footer.php
    • style.css -> home_style.css
    • images -> home_images
    • divine.install.php-> home_divine.install.php

Note: In case the Billboard was not applied in the 1st Theme, but was used for the front page, copy ‘billboards.js’, jQuery.backgroundPosition.js, jQuery.js files to the 1st Theme as well.

Before producing a theme with a separate Front Page you should
  • Upload the obtained theme in the directory where WordPress installed
    (‘/wp-content/themes/’);
  • Go to the Admin Panel and activate your theme.

Note: You can always use an online storage comparison, in case you are looking for suitable host.

Activate WordPress temlate

Step 3. Set Up a Theme

To set up a theme properly you should go to the
‘/wp-content/themes/your_theme_name/’ directory and rename the ‘home_divine.install.php’ file to ‘divine.install.php’.

Note: by then obsolete ‘divine.install.php’ file should no longer exist, as it has been removed after activation.

  • Copy all the slides (slide1, slide2, etc.) from ‘home_images/’ to ‘images/’
  • Then update the blog page in order to establish all necessary Front Page elements;
  • Go to the WordPress theme editor (Appearance > Editor) and open the ‘home.php’ file.
    • Implement the following alterations:
      • Replace this line:
                              <?php bloginfo('stylesheet_url'); ?>
                        
        by:
                              <?php bloginfo('template_directory'); ?>/home_style.css ?>
                        
      • Remove the following lines:
                                <!-- Start Content ->
                                <div class="content-stretch-warp">
                                <div class="content-stretch-bottom">
                                <div class="content-stretch-top">
                        
      • And add the line below:
                                <?php include_once ('home_footer.php'); ?>
                        
      • Also, replace all the ‘images/’ with ‘home_images/’ (if there are any)
  • Open the ‘home_footer.php’ file and remove the following lines:

                        </ div>
                    </ div>
                </ div>
                <!- end Content ->
            
  • Also, replace all the ‘images/’ with ‘home_images/’ (if there are any)
  • Open the ‘home_style.css’ file in theme editor (Appearance > Editor) and replace the ‘images/’ by ‘home_images/’;
  • Update your blog page.

That is all. Custom WordPress template is ready.

Now you can see how WordPress theme with custom main page works or you can download it in “zip” format.

Conclusion

As this tutorial proves, producing a WordPress template with separate front page is easy with Divine Elemente.

DOWNLOAD NOW

As this tutorial proves, producing a WordPress template with separate front page is easy with Divine Elemente.


PSD Hints, Elements And Best Practices

PSD hints, elements and best practices PSD hints, elements and best practices


Divine Elemente PSD to WordPress

Convert graphics from Adobe Photoshop to a working WordPress theme. No coding.


  • Frlu
    It doesn’t work! I tried your sample PSD files – did exactly as you said and the ‘home’ page is all messed up. All I can say is that the code generated by divine for you PSD files is completely different to your sample template.
  • Sergey, Divine Elemente team
    Thank you for your remarks. We have examined all the items one more time, and made a few corrections into the text.
  • Emiliano Moras
    Hello o fillos your tuto and it didn´t work, i downloaded the zip file and it doesn´t shoy the main page
  • Sergey, Divine Elemente team
    Hello Emiliano, we are sorry for the inconvenience. What exactly is the issue with the template? Could you please provide us with this information, so we can improve the article? At what stage was the issue with the template, at what part should we provide more information to make this article as clear as possible?
  • Hello again
    issue with the template is that i followed all the instrucions and i put the template in the WP, i can´t see the homepage in the template, only i can see the bolg template in the site, ¿what i need to do to make de home.php as the homepage? Reggards
  • Emiliano Moras
    Hello again, I want to know how i can determinate the homepage as default page? i downloaded the zipfile and i don´t know what determinate it.
  • Sergey, Divine Elemente team
    Since this tutorial is not as simple as we thought it was, we decided to make a video on this topic, which we would publish in the near future.
  • Emiliano Moras
    i resolved the problem with the template. we need to put in the top of page.php and with this code i can choose the template, i hope this help in the toutorial. reggards
  • Sergey, Divine Elemente team
    We have almost finished the video to this tutorial, and will publish it in the nearest future.
  • MuhamadKhairanHadafi
    1-may i know is that ” Creat, Aspire , Believe and etc is the blog post ? 2- is that this tutorial just intergrated “main page” and “blog post” only in this theme template ?
  • skcayon89
    opss when i try this template the slides are not working no images are shown in the slide area.
  • skcayon89
    please pm on how to solved this problem. thanks
  • DivineElemente
    [email protected] Could you please send us a detailed description of your issue to [email protected]? Sending a couple of screenshots or a screencast would be very helpful. Looking forward to hearing from you.
  • http://macostudios.com/ viridislament
    I already know how to do something like this within the actual wordpress software, but I am bookmarking to try withing the Divine plugin later today…. One question – Does this work with the trial version, I still haven’t gotten the full version yet
  • Cherie
    Hi, When I get to the second part of step 2 i get this error on my browser window: “Parse error: syntax error, unexpected T_STRING in /home/content/96/9587096/html/wp-content/themes/sample_theme/Blogpsd/divine.addpages.php on line 1″ Please advise. Thank you=)
  • Stephen
    “i resolved the problem with the template. we need to put in the top of page.php and with this code i can choose the template, i hope this help in the toutorial. reggards ” Emiliano Moras November 23, 2011 @ 1:01 am —————————————————————– Can you please explain this in english WHAT code do you need to add in the page.php file for this to Work? Template: Page Template (page.php) find code below for page.php What do i need to add? ————————————————— post_content; ?>
  • http://www.legendswebdesign.com sarah
    Wordpress has changed the coding slightly so that home.php no longer over-rides the index.php. In order to display a custom main page, the file must now be named front-page.php. I’ve done that, but it still doesn’t look right. I’ll keep searching – but for those of you having issues, that is why. The file must now be named front-page.php not home.php
  • http://www.legendswebdesign.com Sarah
    If you follow the instructions and be sure to rename image files in ALL THREE files, front-page.php, home_style.css and home_footer.php, this works great on older versions of wordpress. I can not get the billboard or shortcodes plug-in to work on the newest version, 3.5 so I would not suggest upgrading until that is worked out. Unfortunately I did upgrade not knowing, but I have several clients running various versions and it seems to only NOT work on 3.5.
  • http://maisdesign.it Marco Cardia
    Why instead of looking for an ‘automatic’ homepage don’t you simply use WP built in function: Static Homepage (or something like this) ? And instead of Wouldn’t be better to use: get_template_part ? Have a nice day :-)
  • http://www.wickfreescentedwarmers.co.uk Rob
    are you able to use the above process to create more than just one extra custom page ..is it possible to use on several custom pages?
  • kewebs
    Hi. I want to know what exactly means “New Unlimited Free Trial”. I really appreciate your response. Thanks.
  • Ivan, Divine Elemente Team
    Fully functional software forever. But: watermarks + GIF only.
  • JP
    After many attempts I could upload the template to my hosting (forget my past message). However, the images of the Billboard not appear on screen and also I want to know how can make this template responsive?.
  • Ivan, Divine Elemente Team
    Hi, we will guide you. Please email to our support: info (at) divine-project (dot) com
  • Divine Elemente
    Please send all your questions at support(at)divine-project.com, and we will assist you in resolving any issues with Divine Elemente. Thanks.