Custom WordPress Homepage with Customizable Widgets

Posted: December 29, 2011 in Php

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.

Materials Needed:

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.

The Structure

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,

  1. <?php
  2.     /* Template Name: Custom Home Page */
  3.     get_header();
  4. ?>

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:

Image Description

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,

  1. <div id=”main_wrapper”>
  2.     <div id=”featured_area”>
  3.     </div>
  4.     <div id=”column_wrapper”>
  5.         <div class=”column”>
  6.         </div>
  7.         <div class=”column”>
  8.         </div>
  9.         <div class=”column”>
  10.         </div>
  11.     </div>
  12. </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,

  1. <div id=”feature_slider”>
  2.     <ul>
  3.     <li><a href=”#”><img src=”<?php bloginfo(‘template_directory’); ?>/images/image1.jpg” alt=”First Slide” /></a></li>
  4.     <li><a href=”#”><img src=”<?php bloginfo(‘template_directory’); ?>/images/image2.jpg” alt=”Second Slide” /></a></li>
  5.     <li><a href=”#”><img src=”<?php bloginfo(‘template_directory’); ?>/images/image3.jpg” alt=”Third Slide” /></a></li>
  6.     <li><a href=”#”><img src=”<?php bloginfo(‘template_directory’); ?>/images/image4.jpg” alt=”Fourth Slide” /></a></li>
  7.     </ul>
  8. </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.

  1. #main_wrapper{
  2. width:940px;
  3. }
  4. #featured_area{
  5. width:720px;
  6. margin:10px auto;
  7. border:1px solid #333;
  8. -moz-border-radius: 10px;
  9. -webkit-border-radius: 10px;
  10. }
  11. #feature_slider{
  12. margin:0 auto;
  13. position:relative;
  14. width:700px;
  15. }
  16. #feature_slider ul, #feature_slider li{
  17. margin:0;
  18. padding:0;
  19. list-style:none;
  20. }
  21. #feature_slider li{
  22. width:700px;
  23. height:250px;
  24. overflow:hidden;
  25. }
  26. #column_wrapper {
  27. width: 940px;
  28. height: 200px;
  29. margin: 10px auto;
  30. }
  31. #column_wrapper .column {
  32. width: 290px;
  33. margin-left: 15px;
  34. float: left;
  35. border: 1px solid #333;
  36. -moz-border-radius: 10px;
  37. -webkit-border-radius: 10px;
  38. }

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.

The JavaScript

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

area, we need to both include the slider script, and call the function. So somewhere below

  1. <?php wp_head();?>

add the following;

  1. <script src=”<?php bloginfo(‘template_directory’); ?>/js/easySlider1.7.js” type=”text/javascript” charset=”utf-8″></script>
  2. <script type=”text/javascript”>
  3.     jQuery(document).ready(function(){
  4.         jQuery(“#feature_slider”).easySlider({
  5.             auto: true,
  6.             continuous: true,
  7.             controlsShow: false
  8.         });
  9.     });
  10. </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!

Add Custom Widget Areas

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:

  1. <?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:

  1. <?php if (function_exists(‘dynamic_sidebar’) && dynamic_sidebar(‘left_column’)) : else : ?>
  2.         <p><strong>Widget Ready</strong></p>
  3.         <p>This left_column is widget ready! Add one in the admin panel.</p>
  4.     <?php endif; ?>
  5. <?php if (function_exists(‘dynamic_sidebar’) && dynamic_sidebar(‘center_column’)) : else : ?>
  6.         <p><strong>Widget Ready</strong></p>
  7.         <p>This center_column is widget ready! Add one in the admin panel.</p>
  8.     <?php endif; ?>
  9. <?php if (function_exists(‘dynamic_sidebar’) && dynamic_sidebar(‘right_column’)) : else : ?>
  10.         <p><strong>Widget Ready</strong></p>
  11.         <p>This right_column is widget ready! Add one in the admin panel.</p>
  12.     <?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.

  1. if (function_exists(‘register_sidebar’)) {
  2.     register_sidebar(array(
  3.         ‘name’ => ‘Left Column’,
  4.         ‘id’   => ‘left_column’,
  5.         ‘description’   => ‘Widget area for home page left column’,
  6.         ‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,
  7.         ‘after_widget’  => ‘</div>’,
  8.         ‘before_title’  => ‘<h4>’,
  9.         ‘after_title’   => ‘</h4>’
  10.     ));
  11.     register_sidebar(array(
  12.         ‘name’ => ‘Center Column’,
  13.         ‘id’   => ‘center_column’,
  14.         ‘description’   => ‘Widget area for home page center column’,
  15.         ‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,
  16.         ‘after_widget’  => ‘</div>’,
  17.         ‘before_title’  => ‘<h4>’,
  18.         ‘after_title’   => ‘</h4>’
  19.     ));
  20.     register_sidebar(array(
  21.         ‘name’ => ‘Right Column’,
  22.         ‘id’   => ‘right_column’,
  23.         ‘description’   => ‘Widget area for home page right column’,
  24.         ‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,
  25.         ‘after_widget’  => ‘</div>’,
  26.         ‘before_title’  => ‘<h4>’,
  27.         ‘after_title’   => ‘</h4>’
  28.     ));
  29. }

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!

  1. <?php get_footer(); ?>

The Endgame

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,

Image Description

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.

Image Description

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.

Image Description

So comply! Fill them up and save it then visit you site and you should see an awesome custom home page now, enjoy it!

Courtesy: Tutorial9

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s