Book Image

Learn to Create WordPress Themes by Building 5 Projects

By : Eduonix Learning Solutions
Book Image

Learn to Create WordPress Themes by Building 5 Projects

By: Eduonix Learning Solutions

Overview of this book

WordPress has emerged as a powerful, easy-to-use tool to design attractive, engaging websites. Themes play a big role in making WordPress as popular as it is today, and having an eye-catching, fully-functional theme could separate your website from the rest! This book will help you take your first steps in the WordPress theme development process, with 5 different projects centered around creating unique and responsive WordPress themes. Start with creating a simple WordPress theme using HTML5, CSS, and PHP. Then, you will move on to incorporate different APIs, widgets, and tools such as Bootstrap and jQuery to create more dynamic and highly-functional themes. Whether you want to create a photo gallery theme, a highly customizable e-commerce theme, or a theme designed to suit a particular business, this book will teach you everything you need to know. By the end of this highly interactive book, you will have the required mastery to develop WordPress themes from scratch.
Table of Contents (6 chapters)

Building a Bootstrap theme

In our previously created template, we have a standard Bootstrap navbar up, and you can see that we have a drop down:

The way that we got to do the drop-down functionality was by using the wp-bootstrap-navwalker class at www.github.com/twittem/wp-bootstrap-navwalker shown in the following screenshot:

This is the most common and, probably, the easiest way to integrate a Bootstrap navbar with the drop-down functionality in WordPress. Let's implement that.

As seen earlier, we have the search box up on our WordPress page. We have some custom code in the header file that allows us to use the search box and have it work correctly, and this will work for posts and pages.

For instance, if I type lorem and hit the Search button, it's going to bring back everything that has the word lorem in it:

If we go to the backend, we can see we have some posts...