Getting Started

by Olav Barros

17/05/2020

Ready to start developing WordPress themes? You’re in the right place.

In this opening chapter, we’ll take a look at what WordPress themes are and how they work. Then, we’ll discuss the GPL, the software license used for WordPress and all of the themes in the WordPress theme directory.

Next, we’ll look at some of the tools you’ll need in your WordPress theme development toolkit and teach you how to setup a local development environment.

We’ll finish up this chapter by looking at a few solid WordPress theme examples.

Read more »

Theme Functionality

by Olav Barros

17/05/2020

Now that you’re familiar with the basics of theme development, it’s time to start digging deeper into the world of themes. This section covers all of the basic theme functionality that you’ll need to consider while creating your theme:

  • Custom headers – learn how to give your users the flexibility of adding their own header image
  • Sidebars – add widgetized areas to your theme where users can add widgets
  • Widgets – create re-usable PHP objects that can be added to a sidebar
  • Navigation menus – register and display menus within your theme
  • Taxonomy Templates – create templates for your taxonomy archive pages
  • Pagination – work with WordPress’ built-in pagination
  • Comments – customize the comments template
  • Media – work with WordPress core’s media capabilities
  • Featured Images & Post Thumbnails – work with and customize post thumbnails
  • Post Formats – create different formats for displaying users’ posts
  • Internationalization – learn how to prepare your theme for translation into different languages
  • Localization – learn how to translate a WordPress theme
  • Accessibility – learn about accessibility best practices to ensure everyone can use your theme
  • Administration Menus – add menu items to the WordPress administration
  • 404 Pages – create a custom 404 page

If you’re new to themes it’s worth working your way through each section, but you can also jump into a section if you’re looking for something specific.

Read more »

Taxonomy Templates

by Olav Barros

17/05/2020

When a visitor clicks on a hyperlink to category, tag or custom taxonomy, WordPress displays a page of posts in reverse chronological order filtered by that taxonomy.

By default, this page is generated using the index.php template file. You can create optional template files to override and refine the index.php template files. This section explains how to use and create such templates.

WordPress display posts in the order determined by the Template Hierarchy.

The category.phptag.php, and taxonomy.php templates allow posts filtered by taxonomy to be treated differently from unfiltered posts or posts filtered by a different taxonomy. (Note: post refers to any post type – posts, pages, custom post types, etc.). These files let you target specific taxonomies or specific taxonomy terms. For example:

  • taxonomy-{taxonomy}-{term}.php
  • taxonomy-{taxonomy}.php
  • tag-{slug}.php
  • tag-{id}.php
  • category-{slug}.php
  • category-{ID}.php

So you could format all posts in an animal taxonomy named news on a page that looks different from posts filtered in other categories.

The archive.php template provides the most general form of control, providing a layout for all archives; that is, a page that displays a list of posts.

Category #Category

For categories, WordPress looks for the category-{slug}.php file. If it doesn’t exist, WordPress then looks for a file for the next hierarchical level, category-{ID}.php, and so on. If WordPress fails to find any specialized templates or an archive.php template file, it reverts to the default behavior, using index.php.

The category hierarchy is listed below:

  1. category-{slug}.php: For example, if the category’s slug is named “news,” WordPress would look for a file named category-news.php.
  2. category-{ID}.php: For example, if the category’s ID is “6”, WordPress would look for a file named category-6.php.
  3. category.php
  4. archive.php
  5. index.php

Read more »

Partial and Miscellaneous Template Files

by Olav Barros

17/05/2020

The header.php file does exactly what you would expect.  It contains all the code that the browser will render for the header. This is a partial template file because unless a different template file calls the template tagget_header(), the browser will not render the contents of this file.

Often sites have the same header regardless of the page or post you’re on.  However, some sites have slight variations such as a secondary navigation or different banner image depending on the page. Your header.php file can handle all these variations if you use conditional tags.

Almost all themes have a header.php file as the functionality and maintainability of this file pretty much demands its creation.

Below is an example of a header.php found in the twenty fifteen theme.

Expand full source code

Some of the code may look a little daunting at first, but if we break it down, it becomes simple enough. After the opening commment, the head is created. The template tag wp_head() pulls in all of our styles and any scripts that would appear in the head rather than the footer that we enqueued in our functions.php file.

Next, the body is opened and a mix of HTML and PHP are present. You can see some conditional tags in the site branding div that tweak a little bit of what is shown based on the page the user is on. Then the site navigation is pulled in. Lastly, the main site-content div is opened which will be closed most likely in the footer.php file.

One important template tag to note is body_class() found in the opening body tag. This is a super handy tag that makes styling your theme a lot easier by giving your body classes depending on the template file and other settings being used.

Read more »

Custom Post Type – Template Hierarchy

by Olav Barros

17/05/2020

WordPress will work through the template hierarchy and use the template file it comes across first. So if you want to create a custom template for your acme_product custom post type, a good place to start is by copying the single.php file, saving it as single-acme_product.php and editing that.

However if you don’t want to create custom template files, WordPress will use the files already present in your theme, which would be archive.php and single.php and index.php files.

Single posts and their archives can be displayed using the single.php and archive.php template files respectively,

  • single posts of a custom post type will use single-{post_type}.php
  • and their archives will use archive-{post_type}.php
  • and if you don’t have this post type archive page you can pass BLOG_URL?post_type={post_type}

where {post_type} is the $post_type argument of the register_post_type() function.

So for the above example, you could create single-acme_product.php and archive-acme_product.php template files for single product posts and their archives.

Alternatively, you can use the is_post_type_archive() function in any template file to check if the query shows an archive page of a given post types(s), and the post_type_archive_title() to display the post type title.

Read more »

Welcome to WordPress!

by Olav Barros

17/12/2019

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

Sometimes it is useful to separate your pages URL from blog posts,specially if you are using Google Analytics and want to group your content using the URL extraction method.

To add /blog/ to your URL is very easy, but if you have not done it from the beginning, all the URL’s will break and you will have to set up Redirect 301 on all of them. This can be a lot of work depending on how much content you have created.

Read more »