Custom WordPress Homepage with Customizable Widgets
In this Tutorial, you’ll learn how to build a Custom homepage for your WordPress Theme using Page Templates: Complete with a featured content slider, and customizable Widgets.
Quick Nav:
Materials Needed:
- WordPress
- Text Editor
- Note: any text editor will work.
A lot of people I have seen asking about how to make a custom landing page for their WordPress website. In most standard themes, the homepage is a listing of recent posts.
What if instead you want to display a separate landing page? Maybe your site isn’t a typical run of the mill blog.
To have a custom template page for WordPress to recognize, simply create a new PHP file, I named mine custom_home.php, and at the very top when you call the header as you normally do, include this little snippet with the name of your custom page, so it should look like this,
<?php /* Template Name: Custom Home Page */ get_header(); ?>
Upload this file to your Theme Folder.
Now, when you’re adding or editing a page in WordPress, you should see a new Template in the Template Dropdown (inside the Attributes box).
You can use it now, but it wont do much for you just yet, since this is a blank file.
How you develop your template is completely up to you. In this tutorial, we’re going to craft something based off the illustration below:
So go ahead and code this in HTML as you would any other page, keeping in mind that your header and footer should still be called with WordPress,
<div id="main_wrapper"> <div id="featured_area"> </div> <div id="column_wrapper"> <div class="column"> </div> <div class="column"> </div> <div class="column"> </div> </div> </div>
Adding a Featured Content Slider
At the top of this page, we’re going to add a featured Content Slider using the awesomejQuery plugin Easy Slider 1.7 by Alen Grakalic. I love his plugin because it is very easy to implement and built really well. Go ahead and download and unzip the file. Move the "easySlider1.7.js" file into your theme folder (if you’d like to stay organized, placing it in a /js/ folder makes sense)
Jump back into the featured_area div we created earlier, and build yourself a little list of links like so,
<div id="feature_slider">
<ul>
<li><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/image1.jpg" alt="First Slide" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/image2.jpg" alt="Second Slide" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/image3.jpg" alt="Third Slide" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/image4.jpg" alt="Fourth Slide" /></a></li>
</ul>
</div>
Notice that the links point to nowhere for now, you can put any address you like there. Also, the image path points first to the theme directory, where you will be uploading this very file you are making, so simply upload your images into an images folder in your themes root.
Now we need to add a bit of CSS to handle the slider and columns. So open up your style.css located in your theme’s root and find a cozy place to add some styling.
Careful
If your theme already uses some of the ID’s and classes we’re trying to use, you may need to rename them. Otherwise, some styles may not work properly.
#main_wrapper{
width:940px;
}
#featured_area{
width:720px;
margin:10px auto;
border:1px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#feature_slider{
margin:0 auto;
position:relative;
width:700px;
}
#feature_slider ul, #feature_slider li{
margin:0;
padding:0;
list-style:none;
}
#feature_slider li{
width:700px;
height:250px;
overflow:hidden;
}
#column_wrapper {
width: 940px;
height: 200px;
margin: 10px auto;
}
#column_wrapper .column {
width: 290px;
margin-left: 15px;
float: left;
border: 1px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
This is assuming that you are using slides that are 700 pixels wide by 250 pixels tall, naturally you can adjust at your leisure. Also note, we are installing only basic functionality of what this slider is capable of, feel free to add to it by examining the downloaded plugin files. We also set a wrapper for the columns and gave them each a width of 290px and spaced evenly.
So we have a list of pictures and some styling to surround them, but they still wont do much without a final step. Open up header.php and inside the
<head></head>
area, we need to both include the slider script, and call the function. So somewhere below
<?php wp_head();?>
add the following;
<script src="<?php bloginfo('template_directory'); ?>/js/easySlider1.7.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#feature_slider").easySlider({
auto: true,
continuous: true,
controlsShow: false
});
});
</script>
What happens here is we call the plugin function and send in the arguments to override the default behavior, setting the slider to start automatically, and keep on going. We now have a sweet working content slider!
Now you can guess what comes next, we have three nice columns just begging to be widget friendly, so I think we shall comply. Inside each column, we will include the code to let WordPress know they are ready to accept widgets. To do this, we will need something like this:
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('WIDGET_TITLE')) : else : ?>
This first checks to see if widgets are activated, and if so will call the appropriate widget based on the argument passed in, currently it calls a dummy widget named WIDGET_TITLE, we will change that. But for now go ahead and add one of these inside each of the column classes:
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('left_column')) : else : ?>
<p><strong>Widget Ready</strong></p>
<p>This left_column is widget ready! Add one in the admin panel.</p>
<?php endif; ?>
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('center_column')) : else : ?>
<p><strong>Widget Ready</strong></p>
<p>This center_column is widget ready! Add one in the admin panel.</p>
<?php endif; ?>
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('right_column')) : else : ?>
<p><strong>Widget Ready</strong></p>
<p>This right_column is widget ready! Add one in the admin panel.</p>
<?php endif; ?>
Take note that all three must have unique names in order to function properly. Additionally, don’t go try and play with this yet because it won’t work! We still need to tell WordPress we are making up our own widget areas.
So go now and open up the scary functions.php file, found once again in the root folder of your theme files. Once open, we are going to add this ugly chunk of code, don’t worry though we will step through it.
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'Left Column',
'id' => 'left_column',
'description' => 'Widget area for home page left column',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Center Column',
'id' => 'center_column',
'description' => 'Widget area for home page center column',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Right Column',
'id' => 'right_column',
'description' => 'Widget area for home page right column',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
}
Alright, so it looks nasty, but all that happens here is WordPress sees that we are creating our own areas capable of being widgetized. First it checks if we are allowed to register new areas and then creates a couple of sidebar arrays. Don’t worry, they will not become sidebars, that is just the name. Inside the array we identify a few values such as the name of the widget area and a unique ID to assign it for CSS purposes and the like. The description is, well, a description and then the weird stuff. The before and after widget attributes open and close a div element, and use a WordPress magic to make sure the class and id are unique to each. The title before and after set, optionally, what surrounds the user entered title of the widget. This places it inside a set of h4 tags.
Not too bad right? And we are almost done! Go ahead and call the footer in at the very bottom of your new custom home page, and this will close up this page for now, yay!
<?php get_footer(); ?>
Ok now grab your completed file, custom_home.php (if you named it same as mine) and if you have not already drop it into your theme root folder and lets make this happen. Log into your WordPress Admin area and be sure the theme you want is activated. Create a new page and name it ‘Home’ then be sure to set its template to the one we just made, like this,
Now head into the settings area and click on the ‘reading’ option. Up at the top where it asks you what the front page should display, click on static page, then choose your freshly made ‘Home’ page from the drop down menu.
Only one more stop! Hit up the widgets panel now, and notice you have three of your own widget ready areas sitting on the side begging for some content.
So comply! Fill them up and save it then visit you site and you should see an awesome custom home page now, enjoy it!
117 Comments
This is EXACTLY what I’ve been looking for!!
Flag as inappropriateI’ve been searching all over for how to do this, and I posted on the wordpress forums but nobody helped me, I’m sooo glad I found this site.
This is the BEST tutorial on wordpress I’ve ever read and the easiest to follow, for the first time ever something worked on my first go! Thank you so much and keep writing you are incredibly talented!
I have followed the tutorial great really helpful with customizing my themes!
but I have a problem where it doesn’t display the widgets? it only displays the message ‘This left_column is widget ready! Add one in the admin panel’ ect… just wondering why this would be?
Flag as inappropriateNo worries all fixed now! Great post keep up the good work!
Flag as inappropriateI’d like to do this because wanted three columns for a long time on a home page. All themes should have a few templates to choose from for a home page. I don;t need the slider just trying for three columns of widgets.
But I’m getting errors all over the shop! It won’t take my functions and save it.
When you say build a regular html page the div’s and column info and php goes into the template php doesn’t it?
Flag as inappropriateI got a few of those things sorted out. In iNove Theme it still shows the sidebar anyone have any way to make it show the three columns instead of two??
Flag as inappropriateHey there, sorry I had not checked this post in a while, missed your questions.
Still having issues? Have a link to the page in question?
-Ryan
Flag as inappropriateSimply great! thanks a lot
Flag as inappropriategio
Thanks you guys, happy to see this tutorial is still helpful! :)
Flag as inappropriateJust wanted to thank you so much for a clear, understandable tutorial. This really helped me get through a project that I found very challenging and consequently also reduced my stress levels significantly. Thank you!!
Flag as inappropriateAwesome. Thank you for the great tutorial! Page looks great.
Flag as inappropriatenice, you help me alot
Flag as inappropriateThank you! This is really great and worked! It’s exactly the information that I needed with great step-by-step and clear instructions. Well done! This site is a keeper!
Flag as inappropriatewell i got it thanks for that helpful tutorial
Flag as inappropriateThanks for this it is a very well written tutorial.
Flag as inappropriateYou do not know how much i needed a tutorial like this. I had made by blog in a /blog folder because of the issue of needing a separate home page.
Can you, hence, tell me how i can move my blog – http://www.tonz.net/blog to http://www.tonz.net ? Thanks once again for this tutorial.
Flag as inappropriatestill stuck please help
Parse error: syntax error, unexpected $end in /hermes/web04/b1941/pow.sbty/htdocs/wp-content/themes/blue1/custom_home.php on line 42
Flag as inappropriatei got it thanks though
Flag as inappropriateAwesome tutorial!
im haveing a problem
the error
Parse error: syntax error, unexpected T_VARIABLE in /hermes/web04/b1941/pow.sbty/htdocs/wp-content/themes/blue1/functions.php on line 1028
the code
‘before_widget’ => ”,
please help
Flag as inappropriateThat really interesting article,im really enjoyed it.Thanks
Flag as inappropriateHello, thanks a lot for this great tutorial! :-)
I had an error, and I’m sure it’s something stupid, but I’m not able to fix this… Can you please help me?
When I connect to my homepage http://www.paroledimusica.com I get this error message:
“Fatal error: Call to undefined function php�bloginfo() in / … /header.php on line 39″
This is line 39 of header.php file:
<script src="/js/easySlider1.7.js” type=”text/javascript” charset=”utf-8″>
File easySlider1.7.js is correctly located where it should be.
Can you help me to understand what’s wrong?
Thanks a lot.
Filippo
Flag as inappropriateSorry… line 39 is this one:
<script src="/js/easySlider1.7.js” type=”text/javascript” charset=”utf-8″>
Flag as inappropriateUups…
Flag as inappropriateapparently I can’t write php in comments!
I hope somebody can help me anyway.
In this photoshop tutorial we will learn to design a clean website layout. … This photoshop tutorial show you how to design a very beautiful and shining …
Flag as inappropriatethanks.. find more best tutorials here http://newsclub1.com
Would have been nice to see the finished page.
Flag as inappropriateGreat! Dreaming ask directory Are Introduced Last Week!
Flag as inappropriateBut ‘hard coding’ the features images in the plugin defeats the purpose of a feature slider, no?
Flag as inappropriateGreat tut !
Flag as inappropriateYou could also make some fields ready for a particular category, like i did here http://www.quadrisun.be (sorry, only in dutch)
Download60s.com is a graphic designing website. photoshop tutorials.
Flag as inappropriatehttp://download60s.com
aigo
Flag as inappropriatehi, it’s aigo, thanks for your sharing
Very Nice!!!! This taught me a lot… Appreciated!
Flag as inappropriateNice tutorial. It’s detailed and informative. This customization is a great way to make your site stand out against competitors.
Flag as inappropriateGreat tutorial. It’s great and informative. This customization is a great way to make your site stand out against competitors.
Flag as inappropriateNice tutorial. It’s great and informative. This customization is a great way to make your site stand out against competitors.
Flag as inappropriateVery nice tutorial for a beginner wordpress designer. These tutorial are really pushing the wordpress community forward to create new and exciting ideas! Great work.
Flag as inappropriateExcellent! very nice tutorial for a wordpress theme designer. Thank you so much for this.
Flag as inappropriateCheers.
Thanks for the share. I will make a static page with this demo.
Flag as inappropriateA very complete solution! Thanks for sharing.
Flag as inappropriateGreat yaar…..
Flag as inappropriatereally great work
Great info thanks for sharing :)
Flag as inappropriateThis is great post, with another alternative solution to creating a WordPress homepage. Thanks for sharing.
Flag as inappropriateWow Ryan! Lengthy tutorial no doubt, but this is of high degree of usefulness indeed. I’ll try this out in my next holidays.
Flag as inappropriatevvvvvvvvvvvvvvvvvvvv
Flag as inappropriateHello!
I’m new to webdesign and coding. I must say it’s very interesting! Anyways, I’m going to begin creating my own website soon, and i wonder why is WordPress really so good?
But the most important question is: Do I need to know PHP to creat my own template for wordpress?
Thank you!
PS. Tutorial9, you always have awsome tutorials!
Flag as inappropriateincredible stuff…thnx for sharing
Flag as inappropriateNice read very informative.
Flag as inappropriateAwesome as always!
Flag as inappropriateThis tutorial’s not new, but thanks for sharing it :)
Flag as inappropriateGreat post. This is very similar to the custom homepage template I am using on my site. If you want to modify it to pull in the content from a specific post category try something like this:
This will pull all the post in category 8
Flag as inappropriateThe code got striped out of my above comment so i will try to explain:
before the ul do a query_posts containing: (‘post_type=post&order=asc&cat=8′)
Flag as inappropriateafter the ul add the wp loop ie: (have_posts()) : the_post()
then between the li tags call the content ie: the_content()
close the ul then end the loop then close the div
OK, I think I got it Ryan. Not sure why my last comment showed up on your blog, but thanks again!
Flag as inappropriateOk I did not see a comment on my blog… weird. Do you have it all working? If not don’t hesitate to ask and I will try and help ya out.
Flag as inappropriateThanks! ;)
Well, I spoke too soon, I can’t get my other template pages to show the sidebar, so maybe I need to go back to the original functions.php and figure out what’s wrong (but I’m a php novice so that might be futile). Any suggestions would be welcomed.
Flag as inappropriateUh Oh, Trouble in Paradise…
Flag as inappropriateEverything was going well until this afternoon I couldn’t log in, using my testing server (MAMP). Got a blank page after password entry. Ended up deleting the functions.php file and substituting the one from the “Classic” WP theme, then adding your modifications. Everything now works, although this blocks access to the widgets from the theme I was using. But that’s OK. One question: I am using a Child theme, so should the functions.php file go there or in the parent? Or does it matter?
Thanks everyone! I am so thrilled to have been a help. :)
Flag as inappropriatePerfect! Just what I was looking for! You saved my butt!
Flag as inappropriateGreat tutorial! I could have used this a couple of weeks ago :-)
Flag as inappropriateAwesome stuff. Just started out using WordPress and this is very helpful!
Flag as inappropriateVery detailed tutorial, thank you!
Flag as inappropriateNice tutorial…good start but knowing how to integrate this with say a your 5 most recent posts (or whatever posts you want to feature) would make it the one stop shop for tutorials like this.
Flag as inappropriateNice post Ryan, Needed this tut a while ago. But now I can starting thinking about moving my business static site over to WordPress. Thanks a lot.
Flag as inappropriateI so much appreciate this everyone. Very inspiring to write more when people read and enjoy it. So thank YOU very much! :)
Flag as inappropriateWish I had this when I was starting out with WordPress. This is an amazing tutorial!
Flag as inappropriateLovely tutorial. I can always get some valuable insight whenever I visit Tutorial9.
Flag as inappropriateThat’s a really good one
Flag as inappropriateWOW ! excellent……. trying now..
Flag as inappropriateThanks you guys, it is always great to hear when something is useful! :)
Flag as inappropriateNow this is a really useful post. I remember struggling with page templates way back. This is essential know-how for getting the most out of wordpress!
Flag as inappropriategreat to read. find it very handy and useful. thanks
Flag as inappropriateIt’s always exciting to see WordPress tutorials go out. Good job!
Flag as inappropriateGreat tut! Thanks for the help!
Flag as inappropriateThank you Zach!
Flag as inappropriatethanks that was a mistake for sure ;-)
Flag as inappropriatesorry i meant this post :D
Flag as inappropriateHey Ryan
I would like to ask for permission to translate this blog if u do not mind
Flag as inappropriateThank you guys for your comments, I hope I get to write more for Tutorial9 it is great fun!
What kind of tuts would you like to see, anything frustrating you lately? ;)
@Dmitry You are right man, initially when I wrote this I had my personal site as the end result, but I since changed it around. But I have it running here as a demo for another thing, http://obox.thatryan.com/
Flag as inappropriateAmazing post. Thanks Tutorial9!
Flag as inappropriateThanks! this was very helpful!
Flag as inappropriateThanks for sharing!
Flag as inappropriateBut it would be awesome if I could see a result − live or at least as a pictures at the end of the article.
Great tut, great details and so well structured. Good job Ryan!
Flag as inappropriatelol I spent the last 2 weeks figuring this out. Awesome tutorial Ryan! Thank you.
Flag as inappropriateThank YOU for reading! :)
Flag as inappropriateI just learned that you’ll need to copy over jquery.js and put a link to that in the header, as well.
Flag as inappropriateHey Michael,
Flag as inappropriateYup you are right. My oversight here, so many themes load jQuery on their own now that I kind of expected it to be in play already. Sorry about that!
Heh. I just spent all weekend figuring this out. I wish I had waited to read this article. Anyway, I love the jQuery slider and widget idea. I’m getting started right away.
Thanks for the great tutorial!
Flag as inappropriateAlways so well written Ryan! Great detail, u make it look so easy. Those file are still scary :), but maybe I can face them with your help and with this tutorial.
Thanks!
Flag as inappropriateHA thank you, they get less scary the more you beat them into submission. ;)
Flag as inappropriateThank you all so much for feedback and reading. I appreciate it and am inspired to write more! Thanks!
Flag as inappropriateYou could skip the entire “create a page template” part by naming the file home.php.
Flag as inappropriateYou’re absolutely right!
Flag as inappropriateGreat ! one hell of a tutorial, thanks man !
Flag as inappropriateVery helpful. That what I was looking for quite a while for our blog. Seems to be easy. Thanks
Flag as inappropriateexcellent tutorial for specially bloggers.
Flag as inappropriateThanks for the Tut Ryan. It will help me customize my client’s homepages. You rock!
Flag as inappropriateThanks Ryan, recently I was looking for a similar tutorial.
Flag as inappropriateThanks a lot.
Thanks Ryan .. Amazingly well written article. ! I’m going to have to give this a go.
Flag as inappropriategreat :) thanks a lot
Flag as inappropriateGreat, thanks for the tut!
Flag as inappropriateGreat!! I have been looking for such a tutorial long time ago
Flag as inappropriateBig thanks really :)