Introductory Course: Learning Wordpress Development

Author: Merrill

Wordpress is the most utilized blogging platform on the planet. But did you know that Wordpress also powers some of the largest online stores, publications, and communities online? Wordpress powers millions of sites, and for individuals wanting to work with Wordpress, there’s never a lack of potential projects. 

In this guide we’ll start by assuming you know you want to learn some web development. But don’t have much experience. Many Wordpress developers are self taught, and there are more resources online to help you get your initial chops. We’ve worked with Wordpress themes for many years and will step you through some of our favorite resources on the matter. 

In this guide we’ll take a look at the following specific topics: 

First things first, wordpress.com vs wordpress.org

If you’ve spent any time tinkering with your own web presence and trying to get a wordpress blog started, you’ve likely encountered the fact that there’s a difference between Wordpress.com and Wordpress.org. 

In case you haven’t, or would just like to learn more, we’ll outline the crucial differences between these two entities below. 

The key difference between Wordpress.com and Wordpress.org is who hosts your site. 

In the case of Wordpress.com, Wordpress.com installs an instance of Wordpress and provides hosting. In the case of Wordpress.org, you host your own site. While this may not seem like difference — after all, someone has to host the site, right? — what it does mean is that Wordpress.com has a great deal of control over the functionality you’re offered. 

Wordpress.com can be a great way to get a free site online that is somewhat customizable. But this service is typically meant for complete web development novices. Sites aren’t really that customizable at all. And a great deal of the functionality increasing features that Wordpress is known for aren’t available through Wordpress.com. 

In short, with Wordpress.com you can’t utilize plugins, you can’t edit backend code, and you can’t customize your themes (the visual look and feel of your site). While there are many use cases for Wordpress.com, third-party Wordpress development isn’t possible on this platform. 

For these reasons, just note that in our guide on Wordpress we’ll be talking about the open source software that users can augment the functionality and design of through themes and plugins: available at Wordpress.org. 

The Front-End Triad, HTML, CSS, JS

Front end web development is primarily concerned with the visual structure and interactivity of websites. While Wordpress development does involve some querying of the database (particularly for complex sites), a knowledge of HTML, CSS, and JS can be used to substantially alter your Wordpress site and perform many customizations you may require. 

While PHP (in the next section) has historically been what Wordpress themes and plugins are built on, Javascript is what Wordpress itself is built on, and recent developments including Gutenberg Blocks have made knowledge of Javascript more important than ever for advanced Wordpress development. 

So what are HTML, CSS, and JS?

HTML stands for hyper text mark up language. HTML actually isn’t a programming language, but rather a mark up language. A series of tags are placed around content to tell browsers how to interpret what is on the page. Additionally, page metadata including tags for what language the content is in, what search engines should think of your page, and more and included in HTML. 

CSS stands for cascading style sheets. CSS — and more modern preprocessing libraries like SCSS and SASS — are what provide the primary visual design for your site. The use of “selectors” that refer to html elements tell browsers how they should display elements. For example, CSS can specify all instances of paragraph HTML elements should be red. Or that all links should be purple. This is oversimplified for the sake of illustration, but CSS essentially works in this way. 

Why “cascading?” CSS provides the ability to override itself based on the specificity of your selector. For example, you could have a style for your whole site that acts as a default. But you may have an individual page where you want a different style. Specifying a more specific element on that one page with style instructions would take precedence over the default styles. 

JS stands for javascript. Javascript is an incredibly powerful language with many modern web development frameworks built on top of it. Netflix, Amazon, and Facebook’s public facing sites are largely built on JS frameworks. Javascript can run as a front end or backend language. Meaning it can affect the visual design of the site as well as make calls to the database and manipulate objects that are returned. In the context of Wordpress development, Javascript is important if you want to edit your editing experience, or if you want to provide interactivity on your site. By interactivity we mean events triggered when a user performs an action. 

Together, HTML, CSS, and JS are probably the most commonly covered topics through online resources regarding web development. There are scores of free and paid ways to learn, practice, and find examples of working code from these three languages. 

You can pursue a knowledge of HTML, CSS, and JS through many types of resources online. Depending on how much support you feel you will need, you can learn these items entirely on your own, through a book, through tutorials, through paid not-for-credit online courses, through bootcamps, or through degree programs.

  • Beginners: Treehouse, Lynda.com, CodeAcademy.com, W3Schools
  • Intermediate: Coursera, Udemy, Udacity

Just Enough PHP

To meaningfully work with Wordpress themes and plugins, you’ll need to grasp the fundamentals of one more programming language: PHP. With that said, you can customize Wordpress sites with tweaks to existing themes to some extent without any PHP knowledge. But to truly change the functionality of sites through theme and plugin development, you’ll need some knowledge of PHP. 

The good news is that if you’ve worked your way through some Javascript, the basics of PHP should be very familiar. PHP is another object-oriented programming language. And in the case of Wordpress it’s primarily used to communicate with your Wordpress site’s database to determine which content should be output where and which supporting files should be loaded.

PHP comes with a range of built in functions, which are coupled with Wordpress’ core functionality (also largely dealt with in PHP). Together these functions can be tailored to provide a vast majority of functionality one expects from a Wordpress theme or plugin. As you move forward with your Wordpress development skills, there’s likely no single location that will provide as many answers to built in Wordpress functions as the Wordpress codex. 

If you’re a true Wordpress beginner the range of functions available in the codex may be overwhelming. 

To get started, there are three clusters of functionality you should definitely acquaint yourself with. These include:

  1. The Wordpress “Loop”
  2. The Wordpress Template Hierarchy
  3. Post Types

Many beginners at Wordpress describe the Wordpress loop as “magical.” It’s the core mechanism for “looping” through different types of content and returning content data to be arranged in a systematic way. 

As you may have noticed, Wordpress has a range of built in page types with default behaviors that include returning a certain type of content. A category page may return all posts within a certain category. An author page may return all posts by a specific author. An archive page may return all posts from a specific time period, and so forth.

Within each of these page types, the loop by default returns a post object that represents all of the posts meant to be shown on this type of page. Individuals then have a range of built-in functions to pull information from the post object. 

Functions like “the_excerpt,” “the_permalink,” “the_title,” and “get_the_post_thumbnail” each return components of the given post from inside the loop (namely, an excerpt for the post, the link to the post, the title, and the image meant to be a thumbnail). This is just a small sampling of the built-in functions related to posts from within Wordpress. By returning values from the current post in the loop to specific positions on the page and applying html and css, one can dramatically change the look, feel, and organization of the default pages within Wordpress.

One can also call a custom query to pull in posts that meet certain parameters. Perhaps you want to display the three most recent posts from a given category, or by a given author. Or perhaps you want to show related posts in the sidebar. These actions can be accomplished by calling a second query to your Wordpress database. As you may be able to imagine, many page types are accomplished with a range of custom queries. 

The second element that allows individuals to start really making impactful edits to site functionality and design through theme design is that of the Wordpress template hierarchy. 

As I mentioned a moment ago, Wordpress comes with a set of page types that perform a default functionality built around serving up content of certain types. These pages are designed to catch any logical location that a site viewer could reach within a Wordpress site and provide details on what content should be shown on the screen. 

Wordpress defaults to the most specific template that applies to the location an individual is on a site. For example, if your theme provides both a products category and a general category template, then viewers looking at your products category will see the products category template. If you did not include any other specific category pages, then viewers would likely see the general category page for all other categories. 

The Wordpress template hierarchy provides a common language and organizational structure for Wordpress theme developers. Template hierarchy allows you to build on the code of another more easily, as well as revisit a theme you worked on in the past by providing information on where specific design and layout choices may have been implemented. 

While we’ve already referred you to the Wordpress codex, a beloved graphic that lives on the Wordpress template hierarchy page provides the definitive reference for many developers throughout their career. Check out the template hierarchy diagram in interactive format here.   

The third cluster of functionality a beginning developer should acquaint themselves with are Wordpress post types. As with all things Wordpress, the codex provides one of the definitive sources of knowledge on post types. 

In short, post types are types of content that live within Wordpress. Each post type has a different purpose in a given theme. Different post types have different fields of metadata and can be used in different ways. 

The five default post types within Wordpress include:

  • Posts – what you likely think of as a blog post or individual piece of content
  • Pages – a second post type that can provide a tiered url structure and (example: yoursite.com/parent_page/child_page) and are meant for less changeable or static pieces of content
  • Attachments – a type of post used to display media files and uploads. Includes metadata related to images or other multimedia content
  • Revisions – a type of post that is utilized to save a “working copy” of a post being edited every 60 seconds (by default). This post type is primarily involved with the editing process inside of the Wordpress dashboard
  • Navigational Menus – a type of post that details the structure, layout and location of menus that will be used throughout your theme

For many beginner Wordpress developers the usage of the word post can be confusing as it can refer to an individual post (one of five default post types), or it can be used generally to refer to the type of content being referenced. In the case of this second usage one may read examples such as “one can pass the post type desired into the wp_query.” 

It’s also of note that many Wordpress themes and plugins utilize custom post types. Custom post types can include products, universities, individual people, organizations, or any type of “entity” that can be represented by a series of distinct fields in a piece of content. 

While this is a lot to digest before actually playing around with your own themes, below are some of our favorite resources on the three clusters of functionality we covered in this section for your to revisit over time: 

Setting Up Your Local Environment

While there are cases in which you may deploy code immediately to a host, in most cases you’ll want to work on your site locally. This means that you’ll want to set up a locally run server capable of handling a Wordpress install. This also means that you can open up the themes or plugins folder of your Wordpress install and make changes to files that you can see the results of in real time. 

There are many ways to set up a local host, and many local hosting set ups that specialize in Wordpress in particular. The best options allow for you to easily pull the existing state of a live site from the web, make changes, and push that site back into production.

The specifics of how to choose a local hosting solution and how each is set up are beyond the scope of this guide. But we’ll list a few favorites below:

Making Your First Child Theme

If you already know your way around the Wordpress dashboard as a user, you may know there’s a view where individuals can edit the themes installed within a Wordpress instance. In a pinch, you can use the “edit themes” section of the Wordpress dashboard. But it’s not the best practice method of editing themes by any means. 

When beginning to make your own or edit existing Wordpress themes, you’re likely to hear the notion that you should be using “child themes” for development. What exactly does this mean? 

A child theme takes all of the existing code from an established parent theme and defaults to this code, except for where the child theme explicitly differs. The point of child themes is two-fold: 

  1. Child themes allow you to continue receiving updates to your parent theme (for security, new features, and so forth) without wiping away your changes to the site. 
  2. Child themes allow you to build off of the layout and design of parent themes giving you a framework from which to start

Simply setting up a child theme is a great starter project for getting acquainted with Wordpress development. 

There are many guides that step you through the steps to creating a child theme. In short the steps include:

  1. Creating a folder in your Wordpress install’s theme directory
  2. Inside of the folder adding a styles.css file with a range of commented fields at the top including the name of the child theme, the name of the parent theme, the author of the theme, and other optional fields
  3. Creating a functions.php file that enqueues parent theme styles and scripts
  4. Activating your child theme within your Wordpress dashboard
  5. Adding new files to your child theme to overwrite the layout, styles, and functionality of the parent theme

Many guides on this topic provide step-by-step instructions as well as code snippets you can simply paste into the proper files. Some of our favorite guides on creating child themes include:

Themes Vs. Plugins

Both plugins and themes can provide your Wordpress install with instructions on which files and content to load. Both plugins and themes can interact with your site’s database. And both plugins and themes can draw from Wordpress’ core functionality and functions to turn a Wordpress site into something “more” than it was before. 

With this in mind, should you focus on themes or plugins for Wordpress development? We’ve tackled the topic of how to set up a child theme. And there are similar guides that include boilerplate templates for creating the basic frameworks for plugins. 

To truly become an experienced Wordpress developer, you’ll likely need to know how to work with and create both themes and plugins. For the sake of this walkthrough, we will primarily talk about themes as they’re typically an easier entry point to Wordpress development. While plugins can in theory achieve pretty much anything a theme can, plugins typically also provide files and instructions altering the functionality of the Wordpress dashboard as well as the front end of the site. 

So when should one use a theme versus a plugin? 

Modern Wordpress conventions dictate that themes should be used to primarily change the design of a Wordpress site. This includes elements such as what the site looks like, which posts are loaded on which pages, and what sort of interactivity is possible. 

Plugins, on the other hand, are primarily used to alter or enhance the underlying functionality of a Wordpress site. 

One of the reasons for this divide is due to Wordpress sites’ ability to continue running as expected with no plugins. As you’re altering the functionality of a Wordpress site with the use of plugins, you may find yourself needing to deactivate plugins that interact with each other in unexpected ways. And you’ll undoubtedly “break” your site at some point. When this happens you can simply deactivate the plugin you’re working on, leaving much of the overall experience of the site intact (in many cases). 

Segmenting the functionality and design of the site into different locations also means that when one of these aspects break, it won’t necessarily break both. Plugins are primarily used to achieve specific functionality enhancements which in practice don’t entirely “make or break” a site. This segmentation of function and design allows you to incrementally improve a site and make your site more resilient. 

Next Steps

Once you’re up and running to some extent as a Wordpress developer, there are many ways to enhance your skills, gain expertise, and make a name for yourself. Many open source projects related to Wordpress are very supportive of beginners willing to lend a hand in helping to build a project. Many facebook, linkedin, and other networking groups are happy to answer questions about Wordpress development or the business of being in Wordpress development. 

As you progress, you’re also likely to encounter more modern build and automation tools. Many theme and plugin development frameworks require basic command line knowledge of automated task managers such as gulp or node. Build tools can — with basic command line knowledge — help to minify files, remove unnecessary files from your final distribution version of a theme, check for security flaws, and make sure your code is up to standards. 

While many guides can provide some basic overview of how to get started with Wordpress development, it isn’t until you really start jumping into projects that you know specific questions that you may need to seek out answers to. It’s at this point where you may find yourself becoming more involved on stack overflow or other technical forum sites, and learning (or teaching) a lot along the way.