How to create custom widgetized homepage in WordPress

WordPress is now known to be a CMS (Content Management System) instead of a simple blogging platform. A lot of developers like to create website using it, to save quality time on building a website and spending time styling each page.

However, a newbie to WordPress, like how it happen to me previously, would spend time styling the PHP files for a custom home page in WordPress. That will takes a long time, especially when copy need to be revise or added.

Widget Homepage

First in functions.php, we register a new widget,

register_sidebar(array(
'name' => 'Home Page',
'description' => '',
'before_widget' => '<div class="home-widget">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>',
));

Then, in index.php, we point the front page / home page of default WordPress to a place where it is widgetized to allow custom content.

<?php if(is_home() || is_front_page()) { ?>
<?php get_header(); ?>
<div id="content">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Home Page') ) : endif; ?> // Home page widget
</div>
<?php get_footer(); ?>

<?php } else { ?>
// Default WordPress loop
<?php } ?>

WP custom Homepage

Change default WordPress front page

Being one of the choosen CMS (Content Management System) I choose to work on variation projects, a lot of time, client want a custom home page instead of the page that list only the recent entries.

The simplest way on changing the front page would be go into the setting page and set a page that you created as the front page.
Wordpress front page settings
However, custom home page may come in variation requirement too. Normally I would go for change the home page using PHP. Similar like the tagging keywords, the almighty if… else.

<?php if (is_home()) { ?>
<!-- Custom design and content -->
<?php } else { ?>
<!-- Post loop -->
<?php } ?>

However, both style have their own pro and con.

Setting a front page with WordPress settings doesn’t give you the abilities of custom design on the front page and it also limited the content. Since, it only shows the page you created on the “Pages”.

As for the if…else trick, you cannot have a specific posts pages, even if you set in the WordPress settings it will come back as the custom home page, because it is on the first page (is_home, right…).