Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Learn to Create WordPress Themes by Building 5 Projects
Learn to Create WordPress Themes by Building 5 Projects

Learn to Create WordPress Themes by Building 5 Projects: Master the fundamentals of WordPress theme development and create attractive WordPress themes from scratch

Arrow left icon
Profile Icon Eduonix Learning Solutions
Arrow right icon
Free Trial
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.8 (5 Ratings)
Paperback Dec 2017 458 pages 1st Edition
eBook
₱579.99 ₱1591.99
Paperback
₱1989.99
Subscription
Free Trial
Arrow left icon
Profile Icon Eduonix Learning Solutions
Arrow right icon
Free Trial
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.8 (5 Ratings)
Paperback Dec 2017 458 pages 1st Edition
eBook
₱579.99 ₱1591.99
Paperback
₱1989.99
Subscription
Free Trial
eBook
₱579.99 ₱1591.99
Paperback
₱1989.99
Subscription
Free Trial

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

Learn to Create WordPress Themes by Building 5 Projects

Creating a Simple Theme with WordPress

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.

Installing and setting up WordPress

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:

  1. Go to the link https://wordpress.org/download/ and click on the Download WordPress button:
  1. Download the package and go to your server root folder, as shown here:

If you're using AMPPS, the package should be in your C:\ drive or in your route drive. In the Ampps folder, you'll find a www folder; 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.

  1. Create a folder called wpthemes; this is where we will install WordPress.
  1. 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.
  1. Now, go to http://localhost/phpmyadmin:
  1. Next, go to the Databases tab to create a new database called wpthemes and click on Create. We will see an empty database.
  2. 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.
  3. Open the wp-config file using Sublime Text as the editor. You can use whichever editor you feel comfortable with.
  4. 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.

  1. We'll go ahead and save the entered information, and then we should be able to go to localhost/wpthemes:
  1. 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 that WordPress has been installed.

  1. 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:
  1. 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 our Posts area, 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.

Creating and enabling themes

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:

  1. Go to C:\Ampps\www\wpthemes.
  2. 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.

  1. 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.

  1. We'll open up a comment block and enter the fields, shown as follows:
You can refer to the documentation at https://codex.wordpress.org/Theme_Development, which shows all the different fields that you can use. We'll not use all of them as they're not required. Theme Name is all that's required, but it's good to have some other information as well.
  1. 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.
  2. 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:
  1. 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:
  1. 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.

  1. 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.

  1. 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 our index.php file by default.

Creating an HTML structure

  1. 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 title dynamic, or you want to add your site name; to do that, we can say php and use a function called bloginfo, 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.

  1. 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.

  1. 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>
  1. 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.

Working with the style sheet

The next thing we will do is include our style sheet:

  1. Open the style.css file and enter the following code:
      body{
background:#000;
}
  1. Save this and reload; we'll not get a black background as the style sheet is not being read:
  1. 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.

  1. Save this code and reload. We can now see a black background:

So whatever we put in our style sheet will now be registered.

Adding a function in the head tag

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.

Building the HTML body

We will now see how to add basic HTML tags in the body:

  1. 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>
  1. 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:
  1. Now, if we wanted to change the frontend output, we could go to Settings, and change Site Title to My Website:
  1. Save the settings. Now, we can see the change.
  2. 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>
  1. When you reload it, you can see that we get Just another WordPress site:
  1. We can make the changes in the settings. We'll enter The Best Website Ever in the Tagline textbox:
  1. 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>
  1. When we reload, we get this:
  1. 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, Sorry, No posts were found. Then, inside if(have_posts), we'll use post found. Let's go and reload, and you can see that we get post found:

  1. Let's go back to our backend and go to Posts; you can see that we have Hello world. We will move that to Trash, and if we now go back and reload, we get Sorry, No posts were found, as shown in the following screenshot:
  1. Now let's go to Trash and restore it. We will see that the post can be seen again. We will now see how to display these posts. We'll delete post found within the if statement and we'll use a while loop for this with a php tag. We'll use while(have_posts). Now, with WordPress, we have to use this thing called the_post(), so we'll use the_post(), which is a little weird as far as a syntax is concerned. I've never really seen this anywhere else apart from WordPress, but just know that you need to have this as well. Then, we'll use endwhile; again, this is just using shorthand syntax, so you could just use the curly braces. But what we'll do here is when it finds a post, we want to get the title. So, in an <h3> tag, we'll use <?php the_title(); ?>, which is a function:
      <div class="main">
<?php if(have_posts()) : ?>
<?php while(have_posts()): the_post(); ?>
<h3><?php the_title(); ?></h3>
<?php endwhile; ?>
<?php else : ?>
<?php echo wpautop('Sorry, No posts were found.'); ?>
<?php endif; ?>
  1. Let's go and reload, and now you can see that it's getting the Hello world! title:
  1. Now, let's go ahead and create a post as an example. We will name it My Blog Post, and let's just get some sample text. I have taken some text from the www.lipsum.com website:

We will add a couple of paragraphs and publish it.

  1. Now let's reload; you can see that it gives us My Blog Post:
  1. Now, to get the actual content, we'll go right to the <h3> tag and enter <?php the_content(); ?>. As you can see, WordPress makes it really easy in terms of the names of the functions:
      <div class="main">
<?php if(have_posts()) : ?>
<?php while(have_posts()): the_post(); ?>
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php echo wpautop('Sorry, No posts were found'); ?>
<?php endif; ?>
</div>

So now, this gets us the content from each blog post and displays it:

  1. There are different things that we can display with the posts: the date, author, categories, and so on. Let's go right under the title and add the following code block:
         <h3><?php the_title(); ?></h3>
<div class="meta">
Created By <?php the_author(); ?>
</div>
<?php the_content(); ?>
<?php endwhile; ?>

Here, we added Created By along with the author's name.

  1. When we reload, we can see the following output:

In this case, admin is the username of the person who created the post.

  1. Now, if you want the date, you can add this code:
      Created By <?php the_author(); ?> on <?php the_date(); ?>
  1. When we reload, we get Created By admin on December 12, 2017; basically, it gives us the date:
  1. We will now see how to format the date. You can format the date in a lot of different ways; if you know PHP and you've worked with the date function, you know that there's a lot of different formatting options.
    We will take a look at one such example from php.net/manual/en/function.date.php:
      Created By <?php the_author(); ?> on <?php the_date('l jS \of F
Y h:i:s A'); ?>
  1. Let's see what that gives us. You can see the format, shown in the following screenshot, with the day, date, time, and PM or AM:

One thing that I like to do is to use the time instead of the date:

Created By <?php the_author(); ?> on <?php the_time(); ?>

This will give you just the time; it doesn't give you the date, but you can actually format it to give you the date:

Created By <?php the_author(); ?> on <?php the_time('F j, Y g:i a'); ?>

If we take a look at this, it gives us the date and the time:

So it's all up to you, it all depends on your preferences.

Now, let's do a little bit of styling. We will see how to add a <footer> tag at the bottom, and a paragraph to make it dynamic. We can put a copyright symbol, and then for the year, instead of just typing in the year, we can use the_date(), and then just pass in as a parameter, Y, as shown in the following code:

<footer>
<p>&copy; <?php the_date('Y'); ?></p>
</footer>

So we get © 2017:

Then, if we want the site name, we can just say bloginfo and pass in name:

<footer>
<p>&copy; <?php the_date('Y'); ?> - <?php bloginfo('name'); ?></p>
</footer>

So now we have a dynamic footer.

Base styling

Now let's add some base styling. To do this, we will work with the style sheet. Now, the idea of this whole project actually is not to create some great-looking theme, I just want you to get familiar with the PHP code and how themes are set up.

  1. Let's enter the following code:
      body{
font-family: Arial;
font-size:15px;
color:#333;
background:#f4f4f4;
margin:0;
padding:0;
line-height: 1.7em;
}

header{
background: #393939;
color:#fff;
padding:20px 10px;
}

header h1{
color:#fff;
margin:0;
}
  1. Save the code and reload. You will get the following result:

You can see the empty space at the top; this is because we're logged in as an admin, so even on the frontend it knows that, and it's trying to display the admin bar. Now, it's not displaying the admin bar because we don't have the special function to display it.

  1. Let's go to index.php, and before the ending body, we'll add <?php wp_footer(); ?>:
        <footer>
<p>&copy; <?php the_date('Y'); ?> - <?php bloginfo('name'); ?>
</p>
</footer>

<?php wp_footer(); ?>
</body>
</html>
  1. Save this and reload. You can see that we have the admin bar:
  1. We will add a little padding to h1 at the bottom:
      header h1{
color:#fff;
margin:0;
padding:0;
padding-bottom: 10px;
}
  1. We will also add a container div to the code, as shown here:
      .container{
width:1020px;
margin:0 auto;
overflow: auto;
}

We have set width to 1020 px, margin to 0 auto, and overflow to auto.

  1. We will now go to index.php, to the <header> tag, and enter this code:
      <header>
<div class ="container">
<h1><?php bloginfo('name'); ?></h1>
<span><?php bloginfo('description'); ?></span>
</div>
</header>
  1. We'll add the same code to main:
      <div class="main">
<div class="container">
<?php if(have_posts()) : ?>
  1. Also, for footer, it would be the same:
      <footer>
<div class="container">
<p>&copy; <?php the_date('Y'); ?> - <?php bloginfo('name'); ?>
</p>
</div>
</footer>
  1. When you reload, you can see that everything's moved to the middle.
  2. Let's add a little bit of styling to footer. Just copy what we have in the header. We'll also align the text to the center:
      footer{
background: #393939;
color:#fff;
padding:10px 10px;
text-align: center;
}
  1. Next, we will add margin to the main div:
      .main{
margin:15px 0;
}
  1. Let's reload and this is what we get:

You can see that we have our header and main area, where we're looping through the posts and displaying them, and we have our footer area.
Now, common practice in WordPress is to break the header and footer into their own files and then include them in the index.

  1. To do this, we will now create a new file, call it header.php, and then create a new file called footer.php.
  2. Let's go to the index.php file and cut the portion of code, as shown in the following code block:
      <!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(); ?>
</head>
<body>
<header>
<div class="container">
<h1><?php bloginfo('name'); ?></h1>
<span><?php bloginfo('description'); ?></span>
</div>
</header>
  1. We'll replace the highlighted portion with php get_header:
      <?php get_header(); ?>
  1. Go into header.php and paste the previous code which was cut, and save it.
  2. We will now do the same thing with footer:
        <footer>
<div class="container">
<p>&copy; <?php the_date('Y'); ?> - <?php bloginfo('name');
?>
</p>
</div>
</footer>

<?php wp_footer(); ?>
</body>
</html>
  1. We will cut the code shown in the preceding code block and replace it with php get_footer(), as shown in the following code block:
      <?php get_footer(); ?>
  1. Paste the footer code that was cut in step 18 and place that in the footer file. The output will look the exact same.

Next, we will see how just a click on these posts will take us to the actual individual post page.

Single posts and thumbnails

Now we'll take a look at the single post page. Right now, we have this roll of posts from our site, but that's it; we can't click on it and go to the individual post, where we would have our comments and things like that. So let's go ahead and work on that:

  1. Let's go to the index.php file and make the title clickable. We'll add a link to the title. To do this, let's go to the <h3> tag, as shown in the following code; add the <a> tag, and wrap that around the <title> tag:
      <?php get_header(); ?>
<div class="main">
<div class="container">
<?php if(have_posts()) : ?>
<?php while(have_posts()): the_post; ?>
<h3>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<div class="meta">
Created By <?php the_author(); ?> on <?php the_time('F
j, Y g:i a'); ?>
</div>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php echo wpautop('Sorry, No posts were found.'); ?>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>
  1. Let's save it and reload:

Now you'll see we have a link on the titles. For example, when we click on My Blog Post, it takes us to the post.

  1. Let's add a little bit of style to the links. I don't like the color of the links; I also want to make the description bold so that it stands out. It is good to wrap each post in its own div. Where we have while, we'll put it in <article>, as shown in the following code:
      <?php get_header(); ?>
<div class="main">
<div class="container">
<?php if(have_posts()) : ?>
<?php while(have_posts()): the_post(); ?>
<article class="post">
<h3>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<div class="meta">
Created By <?php the_author(); ?> on
<?php the_time('F j, Y g:i a'); ?>
</div>
<?php the_content(); ?>
</article>
<?php endwhile; ?>
<?php else : ?>
<?php echo wpautop('Sorry, No posts were found'); ?>
<?php endif; ?>
</div>
</div>
  1. Then, in our style sheet, let's add the color:
      a{
color:#333;
}

The color will be just the same as the text.

  1. Now we will just add a border at the bottom using this code:
      article.post{
border-bottom:1px #ccc solid;
}
  1. When you reload you can see the border at the bottom:
  1. Now we have the title. The title has a link, but we'll usually see some kind of Read More button as well, so let's go ahead and add that. All we have to do is just add the code, shown in the following code block. We'll say Read More and give it the class of a button:
      Created By <?php the_author(); ?> on <?php the_time(
'F j, Y g:i a'); ?>
</div>
<?php the_content(); ?>
</article>
<br>
<a class="button" href="<?php the_permalink(); ?>">
Read More
</a>
  1. Now, we should have a link for Read More. To do that, we will add the following code block:
      article.post{
border-bottom:1px #ccc solid;
overflow:hidden;
}

article.post a.button{
display:inline-block;
background:#333;
color:#fff;
padding:10px 5px;
margin-bottom: 10px;
text-decoration: none;
}
  1. We can now go to the single page, as shown in the following screenshot:
  1. Now, in the single page, we don't want My Blog Post to be a link; that's kind of silly, so we want to change that. Also, there's going to be other things we want. We'll want a comment form as well, so we need to have a special page for single posts.
  2. So we'll create a new file in our theme, and we'll just call it single.php, and let's just say TEST.
  1. If we go back to the single page and reload, we get TEST. If we go back to our main website, which is our main post roll, it is the same as before, but if we go to a single page we get TEST only, because it's automatically looking at the single.php file. So what we can do is copy the code from index.php, and we can use this code as a starting point. If we paste that in single.php and save, it'll show us the same result. Now we can change whatever we want in the single.php file, and it will only take effect on the single page.
  2. We can get rid of the link and Read More in the code; we're obviously not going to want that. So now we have a single page:
  1. Let's add a little bit of style to our single page. To do that, we will make meta, as shown here:
      .meta{
background:#333;
color:#fff;
padding:5px;
}

As you can see here, I have also added some padding at the bottom of the post.

I'm not trying to go nuts with the styling, because like I said, I just want you to kind of learn the code rather than learn how to create a great design; we'll be getting into that later.

Adding an image to the post

Now, if we go to the form shown here to add a post, and you look on the right-hand side, you don't see a Featured Image box, which you may have seen in other WordPress themes or on other WordPress websites. The reason for that is we didn't include that functionality:

  1. Let's go into our themes folder, and we'll create a file and save it as functions.php. Now, this is where we can put a custom function; this is where we can hook into certain parts of the code, register widgets, and do all that—basically, anything dynamic.
  2. Here, we'll create a setup function. To do this, we will add the following code block:
      <?php
function simple_theme_setup(){
// Featured Image Support
add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'simple_theme_setup');

Here, we have added a comment, Featured Image Support, followed by a function called add_theme_support. Now this function isn't going to run if we leave it just like this. So, we have used add_action and certain hooks that we can hook into and run this function. The one that we want is called after_setup_theme. Then, the second parameter will be the name of the function. We will save it and then run it.

  1. Let's go back and reload this page:

Now you'll see down at the bottom that we have the Featured Image box. If we click on that, we can go ahead and upload files, as shown here:

  1. Now, I'll choose an image and save it so that you can see it's inserted, and we can then click on Update:

Now, if we go to the frontend and reload, we'll not see it yet, because we didn't add it to our index.php file.

  1. Let's go to the index.php file. You don't have to show the image in the index. You can just show it in single page if you want, but usually you want it to be shown on both pages. So, in index.php, let's just add the image right below meta, as shown here:
      <div class="meta">
Created By <?php the_author(); ?> on <?php the_time(
'F j, Y g:i a'); ?>
</div>
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>

At first, it's not going to look too great, but we'll fix that later on. In the preceding code, we have first checked to see if there's an image using an if statement. If there's a thumbnail, then we'll create a <div> tag. We'll give it a class of post-thumbnail and then add php the_post_thumbnail, as shown in the preceding code block.

  1. Let's save it, go back, and reload. You will get the following result:

Now, it looks a little out of the way because it's not reaching 100% across the page, but we're actually going to put a sidebar in a little bit, when we get to the widgets, so that it looks a lot better. However, I am going to add a width of 100% in the CSS, where we have this post, this class="post-thumbnail".

  1. Let's go into our style sheet and add the following code block:
      .post-thumbnail img{
width:100%;
height:auto;
}

For the image, we want the width to be 100% and we can keep height:auto.

  1. When we reload, we can see that it reaches across the whole page:

I know that's really big, but like I said, we'll get a sidebar in there, and it'll shrink that a little bit.

  1. Now we also want the image on the single post page. So we'll copy the code from index.php and paste it in the single.php file, right under meta:
      <div class="meta">
Created By <?php the_author(); ?> on <?php the_time(
'F j, Y g:i a'); ?>
</div>
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>

Now we'll get the same image on the single page as well.

As you can see, in the posts on the index page, it shows the whole content, but we want just a piece of the content to show.

  1. To do that, let's go to the index.php file, and instead of saying the_content, we can actually say the_excerpt, as shown in the following code:
      <?php the_excerpt(); ?>

What this will do is, it will cut the content to around 55 words. You can actually customize that and make it as long or as short as you want, and that's actually really easy.

  1. Go to the functions.php file and create a custom function, as shown here:
      <?php
function simple_theme_setup()>{
// Featured Image Support
add_theme_support('post-thumbnails');
}

add_action('after_setup_theme', 'simple_theme_setup');

// Excerpt Length
function set_excerpt_length(){
return 25;
}

add_filter('excerpt_length', 'set_excerpt_length');

We'll just say set_excerpt_length, and all we need to do here is just return a number, so let's say we wanted it to be 25. Then, what we can do is, instead of add_action, we'll say add_filter, because add_action is usually used to add something or create something; add_filter is usually used to change something. The filter we want to hook into here is called excerpt_length. Then, we just want to put in the name of our function, which is set_excerpt_length.

  1. If we go back and reload, we can see that it's only 25 words long. If you want it a little longer, let's say return 60. I just wanted to show you that it's possible.

So we have our index page set up, and we have our single post page set up, apart from the comments, which we'll do a little later. However, in the next section, we will see how we can create a menu and start dealing with pages as well as posts.

Pages and menus

In this section, we'll start looking at pages and menus. In addition to creating posts in WordPress, we can also create pages:

  1. If we go to the backend and click on Pages, you'll see we have a Sample Page:
  1. Let's create a new one, and we'll just call it About page. Then we'll just grab some content, say two paragraphs. Let's just click on Publish:
  1. So we have an About page, and we have a Sample Page. Let's create one more and call it Services. Now we need some kind of navigation. Let's go ahead and do that.
  2. In order to use the menu system, we need to edit the functions.php file, because right now, if we go to Appearance, there's no Menus option. So let's open up functions.php and enter the following code:
      <?php
function simple_theme_setup(){
//Featured Image Support
add_theme_support('post-thumbnails');

//Menus
register_nav_menus(array(
'primary' => __('Primary Menu')
));
}

add_action('after_setup_theme', 'simple_theme_setup');

In this simple_theme_setup function that we created, we will add register_nav_menus. Then we will pass in an array, and to do that, we will set the primary and then the readable version. We'll use the double underscore function; we don't need quotes here, though. It is a localization function, and it has to do with using multiple languages in your theme. So we'll enter Primary Menu and then save it.

  1. Now, if we go to the backend, reload, and go to Appearance, you'll see we have this Menus option:
  1. If we click on Create Menu, now you can see that by default it has all the pages on the site and you can remove some if you want:

If you want to add pages, you can easily do it; click on Add to Menu. We'll just keep what we have here, and then we need to make sure to choose Primary Menu, where it says Theme locations. We'll save this.

  1. Now, if we go to the frontend and reload, we'll not see anything yet because we haven't included it in our header file; this is where we want to add the menu, because we want it on every page.
  1. Let's go right underneath the <header> tag and create a <nav> tag, as shown here:
      <!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(); ?>
</head>
<body>
<header>
<div class="container">
<h1><?php bloginfo('name'); ?></h1>
<span><?php bloginfo('description'); ?></span>
</div>
</header>
<nav class="main-nav">
<div class="container">
<?php
$args = array(
'theme_location' => 'primary'
);
?>
<?php wp_nav_menu($args); ?>
</div>
</nav>

We'll add a class of main-nav, then we'll wrap it in a container. Then, all we have to do is open up some php tags and create a variable called args. This is just going to hold an array of arguments; we only need one for now, and that'll be theme_location. We're basically specifying what menu we want to put here, and that'll be primary, which is the only one we have. Then, what we can do is, we can call a function called wp_nav_menu and just pass in that args variable. Let's save this.

  1. Go to the frontend, reload, and there's our menu:

The menu has all the pages that we created.

  1. If we want to remove one, go to Menus, select Sample Page we want to remove, save, reload, and now that's gone:
  1. Just to style this a little bit, let's go to style.css and add this code:
     .main-nav{
background:#000;
color:#fff;
padding:5px;
}

.main-nav ul{
margin:0;
padding:0;
}

.main-nav li{
list-style:none;
float:left;
padding-right:15px;
}

.main-nav a{
color:#fff;
text-decoration:none;
}

We'll add main-nav and give it a background; we'll add a black background and white color for text. To style the list items, we will add main-nav li; first we want to remove the bullet, so we'll say list-style: none, and then we want to float these menu to the left. We will also add padding-right:15px, and then we will add the links; make sure that they are white, and remove the text decoration as well. Next we will add ul, and we will remove the default margin and padding. Then we'll add some padding to main-nav, say 5px.

  1. When we reload, we have a little navigation menu:
  1. If we click on About, it'll take us to the About page, and it's the same with Services. Now you will notice that when we go to About, it has been formatted the exact same way as the index.php page, as if it was a post—but it's not, it's a page:

We'll not need the metadata or the Read More link. So what we need to do is add another page to our theme.

  1. Let's create a new file and save it as page.php.
  2. Now if I go back and reload, it's blank because it's looking at the empty file. So what we can do is copy the code that's in index.php and use it in page.php.
  1. Here are few changes that we will do in the code:
      <?php get_header(); ?>
<div class="main">
<div class="container">
<?php if(have_posts()) : ?>
<?php while(have_posts()): the_post(); ?>
<article class="post">
<h3>
<?php the_title(); ?>
</h3>
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<?php the_content(); ?>
<br>
</article>
<?php endwhile; ?>
<?php else : ?>
<?php echo wpautop('Sorry, No posts were found.'); ?>
<?php endif; ?>
</div>
</div>

<?php get_footer(); ?>

The first thing we'll do is remove the link from the title, because we don't want to go anywhere else. Also, we can get rid of Read More completely. It also has an excerpt, and we don't want that; we want the whole thing, so we'll change that to the_content(). Then, in meta, we can get rid of the whole div and save it; let's take a look:

Now it looks more like a regular web page. We'll do the same thing with Services. This is how you can create pages and how you can target the markup for that page. You can also create custom pages and custom templates; you can kind of have different layouts for different pages, but we'll get into that in the next project. There's a lot more to building a theme. There's a lot more you can do that we're not going to get into in this project, but I just want to cover the basics in this project. We now have pages and a menu. In the next section, we'll get into widget locations, because now we want to be able to have a sidebar with widgets.

Widget locations and comments

Now I'll show you how to create a widget location in the theme. We'll have one widget location, and that'll be in the sidebar. Let's get started!

Working with widgets

  1. Let's take a look at index.php, where we have this <div> tag with the class of main. What we want to do is go right between main and the ending </div> tag. We'll create a <div> tag with the class of sidebar, as shown in the following code:
      <div class="sidebar">
TEST
</div>

We have also added TEST in the next line, which shows up as follows:

Now we want to float the main <div> and set a width, and then have the sidebar float to the right.

  1. Let's go to the style sheet, where we have main with margin:15px, both at the top and bottom. Let's go ahead and float this to the left, and let's set a width of 68%, as shown in the following code block:
      .main{
margin:15px 0;
float:left;
width:68%;
}

footer{
background:#393939;
color:#fff;
padding:10px 10px;
text-align:center;
}

Let's see what that gives us:

The reason that this looks really weird is because we didn't clear the float.

  1. So what we'll do is go under the sidebar div and enter <div class="clr">:
      <div class="sidebar">
TEST
</div>

<div class="clr"></div>
  1. Now, we'll go to our CSS, add a class called clr, and we'll just say clear:both;:
      .clr{
clear:both;
}
  1. Then let's add the sidebar class; that's going to float to the right, and we'll set a width of 28%, as shown in the following code:
      .sidebar{
float:right;
width:28%;
}
  1. Now, we'll want to put a container around both of the files—index.php and style.css, because right now, main has a container inside of it, but what we want is to remove that and put it above main, as shown in the following code:
      <?php get_header(); ?>

<div class="container">
<div class="main">

We will end it here:

         <div class="sidebar">
TEST
</div>

<div class="clr"></div>
</div>
<?php get_footer(); ?>

Now, let's run this:

  1. So now we have the main area and a sidebar.
  1. Next, we will see how to add widgets, and to do that, we'll go to functions.php. Here, we can actually use widgets and define what location we want the widgets to be allowed in. We'll go down to the very bottom of the file and create a function, as shown in the following code block. We'll call it init_widgets, and that'll take in id, and we'll call it register_sidebar. Now we will create a sidebar widget, but just know that no matter where you put it, register_sidebar is the function that we'll use, even if it's not a sidebar—if it's down below, or in the header, or wherever it may be, this is what's used to actually register widget locations. Now, that's going to take in an array, and it's going to take a name; let's set that to Sidebar, and then the ID, which is usually the same, just lowercase and no spaces. You can use hyphens if there's more than one word. Then, we can also use before_widget. We can also use <div class="side-widget">, and then we can add after_widget; that's going to be the ending </div> tag. Then, we can also add before_title and after_title for the widget, as shown in the following code block. We want an <h3> tag before the title. Now, this code isn't going to run yet. We need to perform add_action, and the hook we want is called widgets_init; we want to put in our function name, which is init_widgets:
      //Excerpt Length
function set_excerpt_length(){
return 60;
}

add_filter('excerpt_length', 'set_excerpt_length');

//Widget Locations
function init_widgets($id){
register_sidebar(array(
'name' => 'Sidebar',
'id' => 'sidebar',
'before_widget' => '<div class="side-widget">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
}

add_action('widgets_init', 'init_widgets');
  1. Now we'll save the code. If we go back and reload, we get this:

We have a Widgets item at the side and a Sidebar location.

  1. Let's drag the Categories widget and bring that over to the Sidebar. We will also bring Recent Posts:

Save and go to the frontend; if we reload now, we'll not see anything because we need to add it to our template.

  1. Let's go down to where we have the sidebar in the index.php file, and we'll first check for the widget using the following code:
      <div class="sidebar">
<?php if(is_active_sidebar('sidebar')) : ?>
<?php dynamic_sidebar('sidebar'); ?>
<?php endif; ?>
</div>

We'll check whether it'll be a function called is_active_sidebar(), and like I said before, even if it's not a sidebar, this is still going to work. We will also add our location, which happens to be sidebar. We will also add a dynamic_sidebar() function, and then the ID of the widget again is sidebar.

  1. Save it, reload, and take a look at it:

We get our two widgets: Categories and Recent Posts.

  1. Now, remember that we put the side-widget class in the function.php file so that we can style widgets using the style.css file, as shown in the following code block:
      .side-widget{
border:1px #ccc solid;
padding:10px 10px;
margin-bottom:20px;
margin-top:20px;
}

We have added side-widget with a border and padding of 10px 10px. We have added margin-bottom. Now if we reload, you can see that they have a border. Therefore, we will add margin-top too. We'll say margin-top:20px.

  1. To make this look a little better, we will use the following code:
      .Side-widget li{
list-style: none;
line-height:2.2em;
border-bottom:dotted 1px #ccc;
}

.Side-widget a{
text-decoration: none;
}

Here, we have taken away text-decoration.

  1. When you save and reload, you get this:

So this looks good.

  1. We can see that the pages will be messed up now:

This is because in page.php, we still have the container class inside of main.

  1. What we want to do is just copy what we did in index.php:
         <div class="sidebar">
<?php if(is_active_sidebar('sidebar')) : ?>
<?php dynamic_sidebar('sidebar'); ?>
<?php endif; ?>
</div>

<div class="clr"></div>
</div>
<?php get_footer(); ?>

We need to add the sidebar after main ends, and then we actually want to take the container out and put that above main. We'll need to make sure to take the ending </div> tag and put that on the outside down.

  1. Let's go ahead and check that out:

So this looks good.

  1. We will repeat the same thing with Single.php, and we will get the following result:

So all the different formats and all the different pages are all set; they have the sidebar implemented. And, of course, if you didn't want the sidebar on one of those, you don't have to have it. If we want to kind of minimize the code a little bit, we can put the following code inside the footer.php:

      <div class="sidebar">
<?php if(is_active_sidebar('sidebar')) : ?>
<?php dynamic_sidebar('sidebar'); ?>
<?php endif; ?>
</div>

<div class="clr"></div>
</div>
  1. We can cut and save, and then add that code in footer.php at the top, as shown here:
      <div class="sidebar">
<?php if(is_active_sidebar('sidebar')) : ?>
<?php dynamic_sidebar('sidebar'); ?>
<?php endif; ?>
</div>
<div class="clr"></div>
</div>

<footer>
<div class="container">
<p>&copy; <?php the_date('Y'); ?> - <?php bloginfo('name'); ?>
</p>
</div>
</footer>

<?php wp_footer(); ?>
</body>
</html>
  1. Save, and then get rid of the following code from page.php and index.php, because it's now in footer.php:
      <div class="sidebar">
<?php if(is_active_sidebar('sidebar')) : ?>
<?php dynamic_sidebar('sidebar'); ?>
<?php endif; ?>
</div>

<div class="clr"></div>
</div>

Our frontend should look the exact same way. So that's good, that's widgets.

Adding the comment functionality

  1. Now, the one thing that is left is comments—we want the comment functionality. This is actually really easy; all we have to do is go to our single.php file and see where we want the comment, which is right under the end </div> tag, as shown in the following code block:
         <?php endif; ?>

<?php comments_template(); ?>
</div>
  1. We can save the code and reload. Here is the output:
  1. We can now see the comment functionality. Let's add Great Post! and then click on Post Comment.

Here is what we get:

  1. We can see that it has an avatar, the username, date, and also a reply link. Now you'll realize that this doesn't look like the best comments section you've ever seen, but that's just because it's the default design.
  1. If we take a look at the markup, we can see that they separate everything so you can style:

Here, we have ol commentlist; each <li> has a class of comments, and we have classes around the author, around vcard, and around the reply. You can style this however you like.

Now you can actually replace this whole template by creating a comments.php file; we'll get into that later on. I don't want to do it in this chapter because this is just a very basic introductory theme.

Since the comments are working, we'll not go ahead and create a custom comment template or anything like that. I think that's pretty much it. Like I said, there's more we could do; we could create a separate template for archived posts.

Actually, what I want to do real quick is to make the author's name a link, so that you can click on it and see all of the author's posts.

  1. Let's go to index.php and go to where we have the author, and enter following highlighted code:
      Created By
<a href="<?php get_author_posts_url(
get_the_author_meta('ID')); ?>">
<?php the_author(); ?>
</a>
on <?php the_time('F j, Y g:i a'); ?>
</div>
<?php if(has_post_thumbnail()) : ?>

As shown here, we'll just add a link around that.

  1. Let's reload, and now admin is a link; I need to change its style because we can't see it. Open style.css. Go to meta and add the following code:
      .meta{
background:#333;
color:#fff;
padding:5px;
}

.meta a{
color:#fff;
}
  1. We can see the author in white now:
  1. If I click on admin now, it shows us all the posts by admin, but if there were multiple users—multiple authors—this would allow us to see all the posts from that particular author.
  2. We'll wrap this up here. You may realize that this isn't the greatest design you've ever seen, but the point of this project was to get you familiar with not just the code but also the structure of the theme and what files are included. As we saw, there are certain names that we need for the files such as page and single.php.

Summary

Hopefully, you enjoyed this chapter.

In this chapter, we started off by installing and setting up WordPress. We moved on to create and enable themes. We also created an HTML structure and body, and applied some base styling to it. We dealt with single posts, thumbnails, pages, and menus. Later, we saw how we could add images and links to the post. In the end, we saw how to create a widget location in the theme and how to add the comments functionality to the widgets.

We'll be using what you've learned in this project and applying it in the future projects. You'll also learn more as we go.

In the next chapter, we will see how to build a WordPress theme.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • • Learn the basics of WordPress theme development in a step by step manner
  • • Make your themes more dynamic by integrating components of Bootstrap and JQuery
  • • 5 carefully-selected projects to help you get beyond the theory and create highly marketable WordPress themes from scratch

Description

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.

Who is this book for?

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.

What you will learn

  • • Simple and advanced themes – covers basic syntax and files along with archives and search pages
  • • Photo Gallery – add simple animation and use the W3.CSS framework to design a photo gallery theme
  • • Wordstrap – incorporate Twitter Bootstrap into the theme and use the WP_NavWalker class
  • • E-commerce theme – build an e-commerce theme using the Foundation framework

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Dec 29, 2017
Length: 458 pages
Edition : 1st
Language : English
ISBN-13 : 9781787286641
Languages :
Concepts :
Tools :

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : Dec 29, 2017
Length: 458 pages
Edition : 1st
Language : English
ISBN-13 : 9781787286641
Languages :
Concepts :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just ₱260 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just ₱260 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 6,736.97
Learn to Create WordPress Themes by Building 5 Projects
₱1989.99
WordPress Plugin Development Cookbook
₱2245.99
WordPress Complete, Sixth Edition
₱2500.99
Total 6,736.97 Stars icon
Banner background image

Table of Contents

5 Chapters
Creating a Simple Theme with WordPress Chevron down icon Chevron up icon
Building a WordPress Theme Chevron down icon Chevron up icon
Building a WordPress Theme for Photo Gallery Chevron down icon Chevron up icon
Building a Twitter Bootstrap WordPress Theme Chevron down icon Chevron up icon
The Foundation E-Commerce Theme Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.8
(5 Ratings)
5 star 40%
4 star 0%
3 star 60%
2 star 0%
1 star 0%
Cory P Jun 09, 2021
Full star icon Full star icon Full star icon Full star icon Full star icon 5
The book was in like new condition as described. It was well written and easy to understand.
Amazon Verified review Amazon
Moses Gouveia Jun 04, 2018
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Excellent for the growing developer.
Amazon Verified review Amazon
A Real Customer May 17, 2018
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
Unfortunately after being written it should have had someone read through and follow the instructions.It has a lot of:"Here we added a link to the stylesheet" - but the code shows no link and it just appears in code several pages later"As you can see in the following screenshot" - then there is no screenshot"Here you should add 'the_date()'" - but then the screenshot must show the result using 'the_time()' because 'the_date()' will only show the date for one post. If the have two posts posted on the same day (which this project does) then using 'the_date()' will only show the date on the first one, the second will be blank and you'll be left thinking you must have done something wrong and spend 10 minutes googling for help.The screenshots in this book were taken between 12/12/2017 and 21/12/2017 and the book was published on 29/12/2017 - I think it's fair to say it was rushed in order to be put through on time and as such misses a few of the finishing touches which would make it much better.
Amazon Verified review Amazon
Doug Nov 16, 2018
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
Large portions of this book are unreadable. The kindle formatting has one letter per line.
Amazon Verified review Amazon
Amazon Customer Aug 02, 2019
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
I am only 50 pages into the book, still in Chapter 1. The text needs polish. It would benefit from an editor and a test reader. If you already code PHP, HTML, CSS and WordPress and just want to know how to create WordPress themes, then you will probably adore this book. However, I am a little rusty/weak in some areas, so I struggle.I get the feeling the author didn't intend the book to require quite so much expertise, but certain details are lacking. For instance, On page 29 we are directed to add a header tag in the HTML file. It shows what to add, but not where to add it. OK, I figured it out, but a single line of pre-existing text in the example to show *where* would have been easy to add and very helpful. I guess nobody else is typing, but just looking at the finished code downloaded from the website.If you try to follow along in the text, you MUST use a really good syntax-aware editor for typing the examples. The author says on page 10: "Open the wp-config file using Sublime Text as the editor. You can use whichever editor you feel comfortable with."This reads like "I like to use Sublime Text." What it really means is: USE SUBLIME TEXT (or something equally powerful designed for editing these types of files) because it auto-formats, does syntax highlighting, auto-inserts block closing tags and other things omitted from the example text. But... you know... whatever you are comfortable with. :-)Given all the little errors, I found it odd that there are no errata on the PacktPub website. Perhaps everyone else simply uses the downloaded code rather than going step-by-step as described in the text.I will keep plowing forward. but the book could be much better with just a bit of effort.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.