Premium Courses

Learn practical web development building multi user SEO blog app in Laravel. A Journey from localhost to live server.

Learn the fastest growing and high in demand React Js in short period of time along with ES6. Build a Newsapp while learning.

A complete beginners guide to Web Development. Master the art of building Responsive web pages with this course. Learn to code from scratch!


WordPress Theme Development from Scratch Part 9 : Implement...

WordPress Theme Development from Scratch Part 9 : Implement Theme Customizer API and Pagination

Category: WordPress   Updated by Ryan Dhungel



In this part of WordPress Theme Development from Scratch series, We are going to Implement Theme Customizer API options that we created in part 8. We will also implement Pagination. We want to be able to change the Showcase background image on the front page, change the Heading Title, Description Text and also the Call to Action Button text and the link for that. In part 8, we started working on it and finished off writting functions into our customizer.php file and then included into the functions.php.

Requirement


Goals

  • Implement Theme Customizer
  • Create Pagination


Implement showcase heading title option

We will start off by making the heading title work.  Head over to front-page.php. There you will see the static heading wrapped in <h1> at the moment. 

<h1>wp_bootstrap theme development</h1>


We need to replace that witht the code below:

<h1><?php echo get_theme_mod('showcase_heading', 'YAY I build a theme'); ?></h1>


Remember the showcase_heading that we created earlier in our customizer.php and used the type theme_mod? That is what we echo here and also supplied 'wp_theme development'as a second parameter. This text will display in the front end by default. Now save and reload your customize page. You can Change the heading from the customizer now. Replace the default text with whatever you like. You can see it changing live. Great!

Implement showcase description text option

Now we are going to do the same with showcase the description text. This is the static description text we have at the moment.

<p>Learn to develop responsive WordPress themes from scratch with kaloraat.com</p>


Let's replace that with the code below:

<p><?php echo get_theme_mod('showcase_text', 'Easiest tutorials ever @ kaloraat.com'); ?></p>


Now the description text field is working too.

Implement showcase button link and text option

We are going to follow the same pattern here with the call to action button link and the button text. This is what we currently have.

<a class="btn btn-primary btn-lg" href="http://kaloraat.com">Read more</a>


Replace this static <a> href and text with the code below:

<a class="btn btn-primary btn-lg" href="<?php echo get_theme_mod('btn_url'); ?>"><?php echo get_theme_mod('btn_text', 'Learn more'); ?></a>

 

If your theme customizer options are not working here then please repeat yourself from part 8 to get it right!


This is what we have acheived so far

wordpress theme customizer api options


Implement showcase background image option

Now the last thing to do with the theme customizer is to implement the background image option. This is the best part of the whole customization process isn't it? We all love the ability to update the front image every now and then. Let's do that.

Currently we are using background color for the showcase box, which we have specified in our stylesheet. Head over to style.css and find the code below and delete it:

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


Now go to the header.php and and put this code right before the ending </head> tag.

<style>
  .jumbotron{
        background: url(<?php echo get_theme_mod('showcase_image', get_bloginfo('template_url').'/img/showcase.jpg') ?>) no-repeat center center; 
      }
</style>


Here we have a default background called showcase.jpg, Please make sure you have an img folder with the image of that name available. If you have been following me from the previous tutorial then I am sure you have that there.

Now You can go to your theme customizer and change, remove or update the background image as you like. Finally we have implemented the theme customizer to our theme successfully.


Implement Pagination

Now that our theme is nearly done, there are a few things I would like to fix before I end this part. If you go to your blog posts, you will notice that we have really nice buttons that says Previous and Next towards the end of our page. The sad thing about it is that it does not work. You might be upset with me for coming to fix it at the end of all these tutorials series, In that case my appologies. It's an easy fix!

This is what we have in our index page, The static nav in the bottom.

        <nav>
          <ul class="pager">
            <li><a href="#">Previous</a></li>
            <li><a href="#">Next</a></li>
          </ul>
        </nav>

wordpress pagination

Let's bring these beautiful buttons to life using the code below:

        <nav>
          <ul class="pager">
            <li><?php next_posts_link( 'Previous' ); ?></li>
            <li><?php previous_posts_link( 'Next' ); ?></li>
          </ul>
        </nav>


Now if you reload the blog page and see them disappear, don't blame me. That is because WordPress defaults the blog posts shown on each page to 10. Go to your WordPress dashboard Settings/Reading and change that to 1. Now its working!


wordpress reading settings

Currently we are using this nav in mulitple pages. Instead of repeating this process on all of them we can use get template part function, go ahead and create a file, name it bootom-nav.php and save it in your theme folder. Now you can paste the above code there and save.

Now on each page you want to include this nav, simply use the code below replacing the old static nav.

<?php get_template_part('bottom-nav'); ?>


Go ahead and make a change in index, page, archive and single. Awesome!

Once you get used to using WordPress functions, You will love working with WordPress. It's fun!


Making Showcase Image Full Width

Did you just shout out to me? Haha..

No I haven't forgot that. Actually I saved it to the end, It's easy fix and looks great. Just minus the jumbotron margin using the css below.

.jumbotron{
   margin: 0 -20px;
}


Conclusion

We have successfully created a fully functioning WordPress theme from scratch. We wrote all the code and understand how each and every element is working in the backend and the frontend. Not only that we have a blog, We have a complete website with custom front page with theme customizer options too. This is a greate acheivment, absoletely amazing!

Thank you for being with me throught all these tutorials. I hope you learned a lot and will continue to sharpen up your skills further. This is just the begining. I want you to be able to create much more professional themes in future. 

You have learned the fundamentals of WordPress theme development here. I will come up with even more exciting and valuable tutorials in coming days. Stay in touch. I encourage you to leave your comments and participate in our forum and help each others out.

I encourage you to start all these tutorials one more time so that you are fully comfortable working with wordpress and understand better. You have an option of downloading the source code for each part from github as it was completed and start from there. I am sure it will be much fun this time!

Download source code from github



Back to articles