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.

Related Content you might be interested in

Current Title:

Small book image
Learn to Create WordPress Themes by Building 5 Projects
Eduonix Learning Solutions
Dec, 2017 | 458 pages
Small book image
Learn Node.js by Building 6 Projects
Eduonix Learning Solutions
Mar, 2018 | 310 pages
Small book image
Learning Bootstrap 4 by Building Projects
Eduonix Learning Solutions
Aug, 2018 | 218 pages
Small book image
Vue.js: Understanding its Tools and Ecosystem
Dave Berning
Nov, 2019 | 194 pages
Table of Contents (6 chapters)
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Free Chapter
1
Creating a Simple Theme with WordPress
Creating a Simple Theme with WordPress
Installing and setting up WordPress
Single posts and thumbnails
Pages and menus
Widget locations and comments
Summary
2
Building a WordPress Theme
Building a WordPress Theme
Post formats
Creating a design using HTML and CSS
Creating a WordPress theme
Displaying blog post
Creating a single post and adding an image
Creating custom archive pages
Different post formats
Pages, custom templates, and sub navigation
Working with Theme Widgets
Custom home page
Comment Functionality
Summary
3
Building a WordPress Theme for Photo Gallery
Building a WordPress Theme for Photo Gallery
Creating the layout of the home page in HTML and CSS
Implementing the animation and single.html page
Adding the theme header and footer
The post loop
Displaying the post content
Adding the category widget and search option
Working on the single post theme
Summary
4
Building a Twitter Bootstrap WordPress Theme
Building a Twitter Bootstrap WordPress Theme
Building a Bootstrap theme
The post loop
Implementing Navbar
Adding a search bar and single post page
The comment functionality
Summary
5
The Foundation E-Commerce Theme
The Foundation E-Commerce Theme
E-commerce HTML template – Part A
E-commerce HTML template – Part B
Theme setup, logo, and navigation
The custom showcase widget plugin
The sidebar widget setup
The main product post page
Single product and single page
Summary
Conclusion

Working on the single post theme

Next, we want to do now is the single page that's what we have left of this theme. When we click on one of the images, it takes us to the correct place as shown here, but it doesn't look too good:

We want this image to look like the single HTML page that we created. For this, we need to follow the steps discussed in the following subsections.

Creating a single HTML page

First, in our photogenik theme folder we will create a new file named single.php:

Next, we will go into the index.php file and copy and paste its code it in the single.php file as shown here:

<?php get_header(); ?>

<?php if(have_posts()) : ?>
  <?php while(have_posts()) : the_post(); ?>
    <?php...
Previous Section
End of Section 8
Next Section