WordPress Theme Development From Scratch Part 7 : Custom Ful...

WordPress Theme Development From Scratch Part 7 : Custom Full Width Front Page, Icon Boxes, Font Awesome and Widgets

Category: WordPress   Updated by Ryan Dhungel



In this WordPress theme development from scratch Part 7,  we will create Custom Front Page, Icon Boxes with Font Awesome Icons and Widgets. In the last part we learned how to load things from template and simplify our code. Most importantly, we learned how to use post formats and also used few of them. That was fun and this part will be even more fun.

Requirements


Goals

  • Create custom front page
  • Use full width layout
  • Use font awesome icons
  • Use the icon boxes as widgets


Getting Started

The first we need to do is get inside the WordPress admin and create two pages with the title of Home and Blog, leave them completly blank and click publish. We will make Home a front page which is also going to be a landing page. Then the Blog page will feature all the latest blog posts we create.

Once you have published those pages, go to Settings/Reading and choose Home as your front page and Blog as your posts page and then save. Now go to Appearance/Menus and add those pages to your menu and save.

Now if you reload your page you will see that our home page is empty whereas blog page has all the blogs. Great. Let's start working on the front page.

Create front-page.php

Our front page must have a different layout then the rest of the pages. So the first thing we need to do here is create a file called front-page.php in our theme folder and save. Now if you reload the home page, all you see is a white screen because we just created it, we haven't done anything yet. However, WordPress is smart enough to detect front-page.php and loads it automatically.

Do you remember the startup template you downloaded from github when we started WordPress theme development in part 1? You still have that, haven't you? I give you a link here anyway in case you need to download it from github again. There you will find frontpage.html. We will make similar front page for our theme.

Open up frontpage.html and keep it aside. The reason we are keeping it aside is because we can't copy paste the whole code. Since we have our own header and footer files etc

Loading header and footer

Open up front-page.php and call for get header and get footer function.

<?php get_header() ?>

<?php get_footer(); ?>


Now we have header with navigation and footer working in the front page.

Bringing the front page content

Now we need to copy the content from frontpage.html which you downloaded from github and Paste it right between get header and get footer function in our front-page.php.

Make sure you do not copy the header, navigation and footer sections because we just included them using get header and get footer.

Just in case you are a bit confused, I am posting the complete code for front-page.php. It looks a lot but don't worry. It is all static text!

See the code below:

<?php get_header() ?>
<section>
    <div class="jumbotron text-center">
        <h1>wp_bootstrap theme development</h1>
        <p>Learn to develop responsive WordPress themes from scratch with kaloraat.com</p>
        <a class="btn btn-primary btn-lg" href="http://kaloraat.com">Read more</a>
    </div>
</section>
<article>
    <div class="boxes">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="box">
                        <i class="fa fa-coffee" aria-hidden="true"></i>
                        <h3>Lorem epsum dolor</h3>
                        <p>Eiusmod fugiat velit ita nisi, officia ipsum noster vidisse quorum, proident o 
                            quorum, quibusdam lorem fugiat do noster. Voluptate minim id senserit 
                            comprehenderit. Nostrud a noster proident ad ut legam expetendis comprehenderit. 
                            Duis hic an aute litteris, aliquip quorum lorem ab summis. Et duis si nulla ea 
                            noster ex litteris.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="box">
                        <i class="fa fa-gears" aria-hidden="true"></i>
                        <h3>Lorem epsum dolor</h3>
                        <p>Eiusmod fugiat velit ita nisi, officia ipsum noster vidisse quorum, proident o 
                            quorum, quibusdam lorem fugiat do noster. Voluptate minim id senserit 
                            comprehenderit. Nostrud a noster proident ad ut legam expetendis comprehenderit. 
                            Duis hic an aute litteris, aliquip quorum lorem ab summis. Et duis si nulla ea 
                            noster ex litteris.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="box">
                        <i class="fa fa-bolt" aria-hidden="true"></i>
                        <h3>Lorem epsum dolor</h3>
                        <p>Eiusmod fugiat velit ita nisi, officia ipsum noster vidisse quorum, proident o 
                            quorum, quibusdam lorem fugiat do noster. Voluptate minim id senserit 
                            comprehenderit. Nostrud a noster proident ad ut legam expetendis comprehenderit. 
                            Duis hic an aute litteris, aliquip quorum lorem ab summis. Et duis si nulla ea 
                            noster ex litteris.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>
<?php get_footer(); ?>


Now you can reload the page to see your progress. You will notice two things.

  • Front page is not full width
  • It is missing the main image and displays only Read more button
  • We can not see font-awesome icons anymore

Making the front page fullwidth

Our front page is not full width at the moment. That is because our theme is using <div class="container"> to wrap all the contents inside of it. If you head over to header.php, to the bottom of it, right after the nav you will see a div with a class of container at the end. We need to change this to container-fluid. It is a bootstrap class that makes the container full width.

See the code below:

<div class="container-fluid">


Once you do that, reload the page. You front page is full width now. Awsome! But, if you go to blog page, that also has become full width. That's not what we want right? Let's fix that up, It's easy!


Making the blog page not full width

We have to put a conditional if statement in our header.php to see if it is front-page or not. If it is a front page then we want it to use the class name container-fluid to make it full width, if not then we want to use the class name container. In your header.php replace <div class="container-fluid"> with the code below:

   <?php if(is_front_page()) : ?>
        <div class="container-fluid"> 
      <?php else : ?>
        <div class="container">
    <?php endif; ?>


Now go ahead and reload the page. Our blog page is using the container class and our home page is using container-fluid class. Moving forward, you can use such conditional statements anywhere in your theme to suit your need.

Change the background color of the container

Currently we can see only Read more button because the text is white and so is the background color. We will be using theme customizer to upload image as the background later. But for the moment, Let's change the background color to something else than white so that we can see the text. Go to style.css and find this:

.jumbotron{
    height: 400px;
    padding: 100px 20px;
    color: #fff;
    border-bottom: #ccc 1px solid;
    margin-bottom: 30px;
    color: #fff;
    background: url(../images/clouds.jpg) no-repeat center center;
}


Let's add a background color before the url, see the code below and make adjustment.

background: #333 url(../images/clouds.jpg) no-repeat center center;


Now you can reload the page and see the heading that we had originally. We will be using theme customizer to control this heading too which will be cool. But let's start off with the title, descriptions and icons.


Remove the blog title and the description from the front-page

You must have noticed that we have blog title and description on top of all the pages. We want them only on blog page, not on the front page. Let's create another if statement to deal with that. Go to header.php and find this code which is at the bottom.

<div class="blog-header">
  <h1 class="blog-title"><?php bloginfo('name'); ?></h1>
  <p class="lead blog-description"><?php bloginfo('description') ?></p>
</div>

Replace the above code with the code below:

    <?php if(!is_front_page()) : ?>
        <div class="blog-header">
         <h1 class="blog-title"><?php bloginfo('name'); ?></h1>
         <p class="lead blog-description"><?php bloginfo('description') ?></p>
        </div> 
    <?php endif; ?>


Here all we did is put the whole div in if condition. if it's ! front page then display the div. Cool right?

 
Bringing back the font-awesome icons

In the part 1 we used the WordPress templating system to load our stylesheets but we did not include font-awesome.css. Let's fix that up. First thing you should have font-awesome.css inside your css folder. If you don't have that yet, Go ahead and find the folder that you downloaded from github earlier. You will find font-awesome.css file there sitting inside css folder. Just copy and paste inside your thmes css folder.

Go to header.php and replace <link href="css/font-awesome.css" rel="stylesheet"> with the code below:

<link href="<?php bloginfo('template_url'); ?>/css/font-awesome.css" rel="stylesheet">


You can head over to font awesome official get started page and enter your email address to get your font-awesome embed code.

Or, simply use the code below. It will load font-awesome icons from bootstrap CDN. I love it!

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">


Use icon box as widget

Our front page is looking great. The next step is to use those icon boxes as widgets so that we can control them from the widgets area from within the WordPress admin.

Head over to functions.php and go to my_init_widgets function. There we already have register_sidebar widget array. We need to add 3 more widgets and name each of them Box1, Box2 and Box3. We will basically copy the register_sidebar array and make changes to name, id, div class and the heading.

Here is the full code for my_init_widgets function:

// Widgets
function my_init_widgets($id)
{
    register_sidebar(array(
        'name' => 'Sidebar',
        'id' => 'sidebar',
        'before_widget' => '<div class="sidebar-module">',
        'after_widget' => '</div>',
        'before_title' => '<h4>',
        'after_title' => '</h4>'
    ));

    register_sidebar(array(
        'name' => 'Box1',
        'id' => 'box1',
        'before_widget' => '<div class="box">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));

    register_sidebar(array(
        'name' => 'Box2',
        'id' => 'box2',
        'before_widget' => '<div class="box">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));

    register_sidebar(array(
        'name' => 'Box3',
        'id' => 'box3',
        'before_widget' => '<div class="box">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));
}
add_action('widgets_init', 'my_init_widgets');


Here we defined each div class name box, because that is the name we are using in our front-page.php where all the icons are wrapped within <div class="box"></div>

Now if you go to WordPress admin Appearance/Widgets, you will see the new widgets that we created with the name of Box1, Box2 and Box3.

 widgets box


This is getting interesting right?

It is time to create widgets from within the WordPress admin and populate them dynamically to the icon boxes in the front page. First let's go to front-page.php and copy the everything within <div class="col-md-4"> for each of the boxes, we have total three box. Below is the content that I am going to copy from the first box.

<div class="box">
    <i class="fa fa-coffee" aria-hidden="true"></i>
    <h3>Lorem epsum dolor</h3>
    <p>Eiusmod fugiat velit ita nisi, officia ipsum noster vidisse quorum, proident o 
        quorum, quibusdam lorem fugiat do noster. Voluptate minim id senserit 
        comprehenderit. Nostrud a noster proident ad ut legam expetendis comprehenderit. 
        Duis hic an aute litteris, aliquip quorum lorem ab summis. Et duis si nulla ea 
        noster ex litteris.</p>
</div>


Now go to WordPress admin Appearance/Widgets and drag a text widget from the left to Box1. Paste all the content that you copied earlier from the first box and paste in there and click save. Do the same for other two boxes.

Now that we have already copied the content from each boxes, we can delete them and place the following code instead. It will load widgets that we created from within WordPress.


Box1 - Widget

<?php if(is_active_sidebar('box1')) : ?>
  <?php dynamic_sidebar('box1'); ?>
<?php endif; ?>


Box2 - Widget

<?php if(is_active_sidebar('box2')) : ?>
  <?php dynamic_sidebar('box2'); ?>
<?php endif; ?>


Box3 - Widget

<?php if(is_active_sidebar('box3')) : ?>
  <?php dynamic_sidebar('box3'); ?>
<?php endif; ?>


Now the icon box in the front page is using widgets. We can go to widgets and change the content, icons etc and display on the front page dynamically. Cool stuff!


Conclusion

I think we did a really cool job in this part creating our front page. We learned to create a custom page and make it full width. We will further style it later. We also used font awesome icons which was really easy to use and also great for presentation. We used widgets to control the icon boxes in the front page which is the highlight of this part I guess. So far you must be feeling pretty good that you followed me all the way to this part. Now you know a lot about WordPress. Follow along with me to become a superb WordPress developer in a very short time.

In the next part we will work further to implement theme customizer to control the front page layout such as the full width background image, title and description.

Please leave your comments below and use our forum to ask questions and give answers.

Download source code from github



Back to articles