[Tutorial #9] WordPress Custom Theme Basics: The Procedure

[Tutorial #9] WordPress Custom Theme Basics: The Procedure

Procedure Summary

  1. Install wordpress plugins related to customization.
  2. Modify header.php and footer.php
  3. Create home page.
  4. Setup menu in header.
  5. Create category page.
  6. Modify single post template.
  7. Modify search.
  8. Modify 404 page.
  9. Install other plugins.
  10. Mailchimp subscription popup.

Introduction

In previous tutorial we look at the files in our blank theme and learned how wordpress uses them. Here we list out the procedures of creating our multiple-topic wordpress theme.

Plugin for Customization

Before we modify the theme files we introduce one plugin that is very useful for wordpress customization.

Advanced Custom Fields

The Advanced Custom Fields plugin (ACF) enables wordpress users to change template content directly from the admin panel, rather than having to do it from template php files. It also enables multiple pages using the same template to have different template content.

wp plugin advanced custom field

We will detail how to use ACF when we create our custom home page.

Custom Webpage Creation Process

The general process of creating a custom wordpress page is as follows:

  1. Find/create the page’s template file.
  2. Decide what template content is likely to change or is different for different pages that use the same template.
  3. Create “Field Group” in ACF panel page. The fields in the field group should cover the content in step #2.
  4. Code the template file.
  5. (Optional) If the resulting page template file has too many codes, create partial templates for different sections in the page template.
  6. Add respective styling in style.css .
  7. Add needed images/videos into assets folder.
  8. (Optional) Add Javascripts into assets folder if special page interaction is needed.
  9. Create and publish pages in the admin panel.
  10. (Optional) Add pages into wordpress menu.

The above process is not strictly linear, but iteration is expected. For example I often have to jump between step #2 and #5 when I want new features on my site. You will also expect to repeatedly do step #6,#7,#8 to fine-tune your site’s appearance and behaviors.

We will apply the above procedure later on when we create/modify wordpress pages.

Sidenote: Website Planning

In this tutorial we don’t talk about website planning, as we are creating a specific website structure: multiple-topic wordpress site.

In the future when you expand your site beyond a multiple-topic wordpress site, you should first do website planning. The process is as follows:

  1. Think about the goal you want to achieve with your website.
  2. Based on the goal, determine what pages should be on your site, how they link to each other, and what they do.
  3. Figure out the details of each site (look and functionality).
  4. Determine what tools besides wordpress you need for your site.

Creating a website planning helps you stay focused when you dive into coding. It will also be a great communication tool if you hire someone to construct your site.