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)

The main product post page

In this section, we'll work on this main content area, the area where the posts show up. Right now it's just a bunch of static HTML, so we'll go ahead and fix that.

So let's go into the index.php file in the MyShop folder in themes. Let's go to div class="products" where we have 4-column divs to represent each product. We'll add a class of row on this products div and then get rid of all but one of these 4-column divs. We'll preserve the div tag with the black shirt details. We'll get rid of all the div tags and then inside the 4-column div we'll go right above it and create our while loop.

Before we do the while loop, though, let's make sure that there are some posts. So we'll say if(have_posts) and then we'll end it. Also, if there are some posts then we want our while loop:

&lt...