32,39 €
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
If you are a blogger or a WordPress user who wants to learn how to create attractive, eye-catching WordPress themes, this book is for you. A basic understanding of HTML5, CSS, PHP, and some creativity is all you need to get started with 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.
This book takes a projects-based approach, where every project incrementally builds on your programming skills required to create different kinds of WordPress themes. With the difficulty of the projects ranging from basic to complex, this book will help you get beyond the theory and put your understanding of WordPress theme development to practical use.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 256
BIRMINGHAM - MUMBAI
Copyright © 2017 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: December 2017
Production reference: 1271217
ISBN 978-1-78728-664-1
www.packtpub.com
Author
Eduonix Learning Solutions
Copy Editor
Tom Jacob
Project Editor
Suzanne Coutinho
Proofreader
Safis Editing
Acquisition Editor
Dominic Shakeshaft
Indexer
Tejal Daruwale Soni
Content Development Editor
Deepti Thore
Graphics
Tom Scaria
Technical Editors
Gaurav Gavas
Bhagyashree Rai
Production Coordinator
Melwyn Dsa
Eduonix Learning Solutions creates and distributes high-quality technology training content. Our team of industry professionals have been training manpower for more than a decade.
We aim to teach technology the way it is used in the industrial and professional world. We have a professional team of trainers for technologies ranging from mobility and web, to enterprise, database, and server administration.
For support files and downloads related to your book, please visit www.PacktPub.com.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www.packtpub.com/mapt
Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.
Fully searchable across every book published by Packt
Copy and paste, print, and bookmark content
On demand and accessible via a web browser
Thanks for purchasing this Packt book. At Packt, quality is at the heart of our editorial process. To help us improve, please leave us an honest review on this book's Amazon page at http://www.amazon.com/dp/1787286649.
If you'd like to join our team of regular reviewers, you can email us at [email protected]. We award our regular reviewers with free eBooks and videos in exchange for their valuable feedback. Help us be relentless in improving our products!
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Downloading the color images of this book
Errata
Piracy
Questions
Creating a Simple Theme with WordPress
Installing and setting up WordPress
Creating and enabling themes
Creating an HTML structure
Working with the style sheet
Adding a function in the head tag
Building the HTML body
Base styling
Single posts and thumbnails
Adding an image to the post
Pages and menus
Widget locations and comments
Working with widgets
Adding the comment functionality
Summary
Building a WordPress Theme
Post formats
Creating a design using HTML and CSS
Building the HTML body
Adding 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
Building a WordPress Theme for Photo Gallery
Creating the layout of the home page in HTML and CSS
Creating the HTML layout
Creating the header
Adding the title and search box
Shifting the search box
Adding the sidebar and main area
Adding the sidebar
Changing the color of the background and text of the sidebar
Adding the main area
Adding images to the column
Adding a footer in the main area
Implementing the animation and single.html page
Implementing the Fade In animation
Creating animation on the single page
Adding a single image for animation
Adding the theme header and footer
Creating a theme inside the wpthemes folder
Adding a theme
Activating the theme
Converting static markup to WordPress
Adding the wp_head function
Adding the body_class function
Adding the footer
Splitting the header and footer
Changing the site name
The post loop
Adding the theme support function
Passing the function into action
Working on index.php for the content post
Adding the while loop for the post
Adding an else statement
Displaying the post content
Adding a regular post content
Adding a title to the regular post content
Adding metadata
Checking the thumbnail in content post
Adding a gallery post
Checking the thumbnail in the gallery post
Creating an array of attributes
Adding a new post
Adding proper proportions to the image
Adding the category widget and search option
Adding a function to use the category widget
Specifying the widget locations
Registering the widgets
Styling our category widgets
Adding the widget to the code
Removing the title
Adding the class
Adding a link at the top of the widgets
Changing the top margin of the page
Making the search bar functional
Working on the single post theme
Creating a single HTML page
Making metadata dynamic
Changing the static image
Changing the back button, title, and content
Summary
Building a Twitter Bootstrap WordPress Theme
Building a Bootstrap theme
Adding the sidebar
Adding the footer
Header and footer
The post loop
The Featured Image area
Creating categories
Formatting the post
Wrapping the post in an article tag
Adding content to the post
Adding a Read More button
Dealing with post without an image
Adding a bit of style
Implementing Navbar
Displaying menu
Setting the sidebar
Adding a search bar and single post page
Dealing with the search box
Dealing with the single post page
The comment functionality
Summary
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
Adding multiple images
Summary
Conclusion
Throughout this book, we will build 5 different WordPress themes from start to finish. We will look at all the fundamental concepts that are needed to start building great themes.
To get through the book, you should have some experience in HTML/CSS and PHP. You will also need to have a general idea of what WordPress is—it's installation and WordPress website management—and a basic understanding of some programming fundamentals, for example, arrays, variables, loops, statements, and so on. The projects are mainly based around HTML5, CSS3, and PHP.
Apart from these, there are some other technologies and concepts that we will be looking at throughout the book. These include WordPress post loops, which is the main loop that grabs database to WordPress, hooks/actions, the functions.php file where we put our dynamic code for our WordPress theme, widgets, WP_queries, and theme customizer. Also, we'll be using a range of frameworks such as Bootstrap, Foundation, and W3 CSS, which is a fairly new framework.
So, let's dive in and start building the cool themes.
Chapter 1, Creating a Simple Theme with WordPress, is an introductory project chapter. We'll discuss about the files which we need to create for our theme, the syntax, and the dynamic snippets.
Chapter 2, Building a WordPress Theme, is a project chapter that goes in depth and uses advanced concepts to build a WordPress theme, including custom template and home pages, archived pages, and post formats.
Chapter 3, Building a WordPress Theme for Photo Gallery, is about a project to build a WordPress theme for a photo gallery. We're going to use the w3.CSS framework and also some simple animations to build the theme.
Chapter 4, Building a Twitter Bootstrap WordPress Theme, is a project chapter that explains integration of Bootstrap with WordPress. This is going to be our chapter to use Wordstrap for our Twitter Bootstrap to implement our WordPress theme. We are also going to use WP nav walker, which is a class we can have for drop-down menus.
Chapter 5, The Foundation E-Commerce Theme, is about building an e-commerce theme using the foundation framework, which is similar to the Bootstrap framework.
You will need the following to work through the projects in this book:
HTML5/CSS3
PHP
WordPress
W3.CSS framework
If you are a blogger or a WordPress user who wants to learn how to create attractive, eye-catching WordPress themes, this book is for you. A basic understanding of HTML5, CSS3, PHP, and some creativity is all you need to get started with this book.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, path names, dummy URLs, user input, and Twitter handles are shown as follows: Code words in text are shown as follows: "Thesingle.htmlfile is going to represent the single image."
A block of code is set as follows:
<!DOCTYPE html><html><head> <title></title></head><body></body></html>
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
<!DOCTYPE html><html><head>
<title>PhotoGenik</title>
</head><body></body></html>
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "To upload a file, we'll click on the Select Files button."
Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to [email protected], and mention the book title via the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files emailed directly to you. You can download the code files by following these steps:
Log in or register to our website using your email address and password.
Hover the mouse pointer on the
SUPPORT
tab at the top.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box.
Select the book for which you're looking to download the code files.
Choose from the drop-down menu where you purchased this book from.
Click on
Code Download
.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR / 7-Zip for Windows
Zipeg / iZip / UnRarX for Mac
7-Zip / PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Learn-to-Create-WordPress-Themes-by-Building-5-Projects. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from https://www.packtpub.com/sites/default/files/downloads/LearntoCreateWordPressThemesByBuilding5Projects_ColorImages.pdf.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visitinghttp://www.packtpub.com/submit-errata, selecting your book, clicking on theErrata Submission Formlink, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title. To view the previously submitted errata, go tohttps://www.packtpub.com/books/content/supportand enter the name of the book in the search field. The required information will appear under theErratasection.
Piracy of copyrighted material on the internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the internet, please provide us with the location address or website name immediately so that we can pursue a remedy. Please contact us [email protected] a link to the suspected pirated material. We appreciate your help in protecting our authors and our ability to bring you valuable content.
If you have a problem with any aspect of this book, you can contact us [email protected], and we will do our best to address the problem.
Welcome to the WordPress Themes Project book! In this book, we will build 10 WordPress themes from scratch. We will look at all of the fundamental knowledge that is needed to build great themes.
In this first chapter, we will create a very simple project. We will not really focus on creating an awesome design; the chapter is more about explaining the files that we need to create for our theme, the syntax, the dynamic snippets, and related topics.
This project will be a little different from the rest because it's going to be sort of an introductory project. We will see how to install and set up WordPress, so that you can have a fresh installation to work with. We will create a theme, but we'll be focusing more on the code and the overall look and style. We'll create files and folders, add PHP code, and related things. First, I want to get you familiarized with PHP code, and then we can add some simple style.
With respect to an environment, there are a lot of different ways you can run WordPress. You may have your own server set up; if you don't, you can use something like AMPPS, which is what I'll be using. It gives you an Apache server, PHP, and MySQL all on your local machine. You could also use XAMPP, which is very similar, or WAMP; there's also MAMP for Mac. There are lot of different choices, but if you want to use AMPPS, you can go to https://ampps.com/ and download it. It's available for Windows, Mac, and Linux, and it is pretty easy to get set up.
Now, let's see how to install WordPress. Most of you probably already know how to do this:
Go to the link
https://wordpress.org/download/
and click on the
Download WordPress
button:
Download the package and go to your server root folder, as shown here:
If you're using AMPPS, the package should be in yourC:\ drive or in your route drive. In theAmppsfolder, you'll find awwwfolder; this is the hosting root, as shown in the preceding image. In most cases, the default folder will be Program Files in the C:\drive.
Create a folder called
wpthemes
; this is where we will install WordPress.
Go to the
Downloads
folder and open the WordPress package. Next, extract all the files into the project folder,
wpthemes
. Before we proceed, we need a database, a MySQL database, and if you installed AMPPS or if you're using XAMPP or something similar, then you most likely have
phpMyAdmin
, as shown as follows; this is what we'll be using.
Now, go to
http://localhost/phpmyadmin
:
Next, go to the
Databases
tab to create a new database called
wpthemes
and click on
Create
. We will see an empty database.
We'll go back to the files we created or brought over from the WordPress package. You will see the
wp-config-sample.php
file. We'll rename this to just
wp-config
, and get rid of the
-sample
.
Open the
wp-config
file using Sublime Text as the editor. You can use whichever editor you feel comfortable with.
Now, in this editor, we will change or add some information:
/** The name of the database for WordPress */ define('DB_NAME', '
wpthemes
'); /** MySQL database username */ define('DB_USER', '
root
'); /** MySQL database password */ define('DB_PASSWORD', '
123456'
);
We will add DB_NAME, as shown here, which in this case is wpthemes, then DB_USER, which in this case is root, and then DB_PASSWORD—you need to enter whatever the password is for your database. The rest can stay the same.
We'll go ahead and save the entered information, and then we should be able to go to
localhost/wpthemes
:
We can now go ahead and run the installation. As shown in the following screenshot, we will enter
Site Title
as
WordpressDEV
and
Username
as
admin
. Next, you need to enter the password; I'm using a very weak password here. After you enter the email address, click on
Install WordPress
:
You can see thatWordPress has been installed.
Now, click on
Log In
, and this will take us to the admin login. Go ahead and put your username and password in, and it'll take you to your backend:
Now we can click on
Visit Site
, as shown in the preceding image. Open this in a new tab, and you'll see that we have a brand new WordPress site:
This is what we'll be working with.
I'm sure a lot of you have experience with WordPress.
On the localhost/wpthemes/wp-admin/WordPress page, we have ourPostsarea, where we can create and manage posts:
We can have Categories, as shown in the following screenshot:
We can also see Pages:
Website pages such as About Us, or Services, would go on Pages. If we go to Appearance, and click on Themes, it will show us the installed themes, as shown in the following screenshot:
By default, we have Twenty Seventeen, Twenty Fifteen, and Twenty Sixteen, but we will be creating a new theme in the next section.
In this section, we'll see how to create our theme files and enable a theme. We'll use Sublime Text and add the project folder, so that we can access the files easily:
Go to
C:\Ampps\www\wpthemes
.
The folder in which you want to create your theme is going to be
themes
, which is within the
wp-content
folder:
You can see here that we have the three themes that come with WordPress already installed, namely twentyfifteen, twentyseventeen, and twentysixteen.
We'll create a new folder and call it
simple
. This is going to be the name of our theme:
There are two files that you absolutely need in order to enable your theme: one will be style.css, and the other will be index.php. Now, the reason we need style.css is because that's where all of our declarations, such as theme name and the descriptions, go.
We'll open up a comment block and enter the fields, shown as follows:
We will enter the
Theme Name
as
Simple
. We also need to have an
Author
; you can put your own name there if you'd like. We'll also have
Author URI
. If you are creating themes for clients, you'd probably want to put your company's website there. We can have a
Description
. We'll enter
Very Simple Wordpress Theme
, and then enter
Version: 1.0
. Let's save this. Now, just having this information will allow WordPress to see your theme.
Now let's go back into our
localhost/wpthemes/wp-admin/themes.php
backend, and go to
Appearance
and then
Themes
; you can see the
Simple
theme, and we can actually activate it:
Now, in order for a screenshot to show in the
Simple
theme, we need to put an image in the root of the theme folder and call it
screenshot.png
:
Let's create a sample screenshot using Photoshop, which just says
SimpleTheme
, and place that in our
theme
folder, as shown in the preceding screenshot. Go to the server root,
www\wpthemes\wp-content\themes
, and then
simple
. We'll just paste that screenshot in there. Now if we go back to the backend and reload, you can see that we have a screenshot, as shown here:
Well, it's not really a screenshot but it's an image.
Now if we go ahead and activate our theme for this, and go to our frontend and reload—we get absolutely nothing because we haven't added any code yet:
Our theme just contains nothing, it's completely blank.
Now let's open the
index.php
file and enter
TEST
, then save and reload; we can see that we get
TEST
on our frontend too:
Basically, it's reading ourindex.phpfile by default.
Now let's create our HTML structure. We will put in some core HTML tags, as shown here:
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <title><?php bloginfo('name'); ?></title>
As you can see, we have DOCTYPE, an html, head, body, and title tags. Now, if you consider starting at the top, we have our <html> tags; sometimes, you want to include a language here, and WordPress has a function that we can actually include in this file to make it dynamic. We can add php language_attributes, which is a function that will determine the language we want the theme to display. You probably want to make your titledynamic, or you want to add your site name; to do that, we can sayphpand use a function calledbloginfo, as shown in the preceding code block. This is really useful because it has a bunch of things that you can get, such as the site name, the description, the character set, URLs, and the list goes on. You can actually look at the documentation to see exactly what it includes. However, what we'll use is name.
Once you save this, you can go back and reload the page. You can see that the title says
WordpressDEV
, as shown here:
If you remember, this is what we named the site.
Let's go back to our
head
tag and continue. We'll need a character set, so we'll enter
meta charset
. Then, we can use
bloginfo
here as well, and just pass in
charset
:
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php bloginfo('name'); ?></title>
Let's save this, and take a look at our source code. Using
Ctrl
+
U
, you can look at both the language attributes; it says that we're using English US and the character set is
UTF-8
, as shown here:
These things can now be controlled from within WordPress.
The next thing we will do is include our style sheet:
Open the
style.css
file and enter the following code:
body{ background:#000; }
Save this and reload; we'll not get a black background as the style sheet is not being read:
In order for that style sheet to be seen, we'll enter the following code:
<!DOCTYPE html> <html <? php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <title><?php bloginfo('name'); ?></title>
<link rel="stylesheet"
href="<?php bloginfo('stylesheet_url'); ?>">
The preceding code will get the style sheet from the correct location.
Save this code and reload. We can now see a black background:
So whatever we put in our style sheet will now be registered.
We will next see how to enter a function called wp_head() in the <head> tag. This puts any additional information that is needed into the head tag. For example, when you install a plugin and, let's say, it needs to include a style sheet, or it needs to do something in the head, to do this we need to enter the following code. So when you create plugins, you can have stuff pop out right in the head:
<!DOCTYPE html><html <? php language_attributes(); ?>><head> <meta charset="<?php bloginfo('charset'); ?>"> <title><?php bloginfo('name'); ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
In the following source code, we have a bunch of other stuff now, and this is all coming from that wp_head() function:
If I go ahead and take the wp_head() function out, and then go back and reload, it just gives us what we have in the index.php file. So we're going to need the wp_head() function:
In the next section, we'll start to build out the body. We will see how to grab posts, create menus, and so on.
We will now see how to add basic HTML tags in the body:
We'll create a
<header>
tag, which is an HTML5 tag. We will enter an
<h1>
tag, and in this tag we will add the website name:
<header> <h1><?php bloginfo('name'); ?></h1> </header>
We can actually take the dynamic code from the
<title>
tag, which we saw earlier, and put that in
<h1>
as well. Now if we save that and look at our frontend, we get
WordpressDEV
:
Now, if we wanted to change the frontend output, we could go to
Settings
, and change
Site Title
to
My Website
:
Save the settings. Now, we can see the change.
In addition to the name, we can also include a
Tagline
. To do this, we will enter the
<small>
tags, but instead of using
name
, we will use
description
, as shown in the following code block:
<header> <h1><?php bloginfo('name'); ?></h1>
<small><?php bloginfo('description'); ?></small>
</header>
When you reload it, you can see that we get
Just another WordPress site
:
We can make the changes in the settings. We'll enter
The Best Website Ever
in the
Tagline
textbox:
Save the changes and put
description
in the
span
tag, as shown in the following code block:
<h1><?php bloginfo('name'); ?></h1>
<span><?php bloginfo('description'); ?></span>
When we reload, we get this:
Now let's add more HTML tags, as shown in the following code block:
<header> <h1><?php bloginfo('name'); ?></h1> <span><?php bloginfo('description'); ?></span> </header>
<div class="main">
<?php if(have_posts()) : ?>
post found
<?php else : ?>
<?php echo wpautop('Sorry, No posts were found'); ?>
<?php endif; ?>
</div>
</body> </html>
Here, we go under the <header> tag and enter the div class as main. We'll fetch our blog posts; WordPress uses something called the loop, or the main loop, which will fetch every blog post that you have, regardless of the category or whatever it may be. Without specifying any restrictions, it's going to get every post. So, the first thing we'll do is check to see whether there are any posts. We'll use an if statement for that, and then use the shorthand. We will use the syntax that will help us go quickly in and out of php. We'll then use if(have_posts) to see whether there are any posts in WordPress. We'll also put an else statement here, so that if there are no posts, then we just want to let the user know that. Now, instead of just spitting out text, we'll use a function. We'll say echo wpautop; what this does is that it takes double line breaks and automatically makes them into paragraphs. It's a good function to use when you just want to output text. We'll say,