Codeable info

Understanding the Basic Infrastructure of WordPress

Posted on by in WordPress Tutorials

This post was updated on October 3, 2014.

Learning to customize a WordPress blog can be intimidating at first. The first thing you need to understand in order to be able to effectively customize any WordPress blog is the file structure of a WordPress installation and the PHP functions on the server side that make up the HTML content visitors see when visiting your blog. This tutorial is a precursor to customizing inherent WordPress PHP functions and adding your own functionality to WordPress themes and the WordPress core.

In general, this tutorial will give you a basic understanding of a WordPress installation’s infrastructure for the purpose of learning how to make changes and/or build onto an existing WordPress theme, plugin or even the core.

What You Need to Know to be Able to Customize WordPress

Here is a basic list of the prerequisites necessary to understand how to develop custom WordPress blogs including building custom themes, plugins and even customizing the WordPress core. If you do not possess all of the following right now, don’t worry, read on because this tutorial is meant to help you understand how to learn to manipulate the WordPress core, themes and plugins. The following prerequisites are for making changes to the WordPress core, themes and plugins, not prerequisites for this tutorial:

  • PHP – the main language used in WordPress alongside HTML. PHP is the server-side language. Knowledge of PHP is necessary for making more customized changes to the WordPress core and individual WordPress themes and plug-ins.
  • HTML – the basic markup language used. Knowledge of HTML is necessary to make even minor changes to the WordPress, including adding custom content using the admin area’s WYSIWYG editor.
  • JavaScript – Not as important as PHP and HTML, but there is some JavaScript used in most WordPress themes and is mostly found in the header.php file called by the get_header function explained below in “Common WordPress Components”.
  • WordPress Loop – know what it is and what it does. Basically it is server side PHP code used to dynamically display posts and/or pages in a web browser. The WordPress loop is the backbone of the WordPress core and is called from within a theme to extract data from the WordPress database and present it to the end user.
  • WordPress core – For the purpose of this tutorial, we are going to define the WordPress core as all files within a WordPress installation minus themes and plug-ins, but basically the core is the engine that drives a WordPress blog and making changes to the core can cause undesirable effects if you are not careful and/or you don’t know what you are doing. Making changes to the core is for advanced users only. This tutorial is a starting point for intermediate users seeking to become more advanced WordPress developers. Therefore we strongly recommend using a test WordPress installation to learn how to make changes to core files before doing it on a live blog.

Making Note of a Few Standards & Best Practices

In a perfect world you would only make changes to the theme you are using while leaving the WordPress core intact, but in reality, it is sometimes necessary to make changes to the WordPress core as well. You will find that when you trace an inherent WordPress function to its source, it will almost always begin its path in a theme file where it is called and many times will end in the core where many functions are defined.

As an example, if you need to make changes to the WordPress loop, you will find your first reference to the loop in a template file such as single.php, but when you trace the function trail backwards, almost all of the functions contained in the loop will lead you outside of the template and outside of the wp-content directory into the core. It is often necessary to edit these functions in the core to get a desired custom effect you are after.

It is also worth mentioning here that you should never really make changes to an inherent WordPress function, instead, you should copy and paste the function you want to change and give it a new function name so you are effectively adding onto the core instead of changing it. This is because if you change the function, you may not be aware of what areas of the site you will be altering unless you are sure of every occurrence of that function being called throughout the WordPress installation–which could be several. You may not want to change every occurrence of a function and you may want to change back sometime as well, so it is always best to create an additional function rather than altering an existing core function.

Many such functions exist in the file named functions.php which can be found in every theme’s main directory as far as I have seen. The functions.php is the normal place for adding functions within the scope of an active theme. Of course, if you wish the changes to persist even after changing themes, you wouldn’t want to put the function inside the theme. You would put it inside the main WordPress folder instead, outside of the themes directory all together.

For a full list of WordPress development standards and best practices, please visit the WordPress Codex.

Common WordPress Components

In one of our previous tutorials, How to Install WordPress in Just a Few Minutes, we learned two ways to quickly and easily install WordPress. The first is the one-click install often offered by web hosts. The second method, using FTP where you would get a much better idea of the files/components that comprise WordPress, its themes and its plugins

A WordPress theme consists of several standard components, each of which has several sub-components. In the image below, we have a screenshot of the directory tree for a typical WordPress installation. Below that we have built a document/function tree to demonstrate how each component helps to make up a WordPress theme’s structure. In the following examples, we used a fresh WordPress installation using the default WordPress theme, Twenty Eleven. Most themes follow a very similar pattern:

understanding wordpress

As you can see above, the directory tree for WordPress is too long to fit on one page, so we cut it in four and put it in four columns to save space. Normally it would go straight down. The above image only shows directories. Just imagine how long it would be if we showed files too! This is one reason we explain the structure of WordPress using a function tree instead, as you will soon see below.

Follow Along With the Tutorial

To follow along with this tutorial, open your WordPress directory and navigate to: /your-blog-name/wp-content/themes/twentyfourteen. The components of any WordPress installation are made up of a combination of PHP functions, HTML and a little JavaScript as needed, but the main focus of this tutorial is going to be on the WordPress PHP functions. The PHP functions make up the basic building blocks of any WordPress installation. The same could be said for any WordPress theme or plug-in as well. Below we demonstrate the structure of a typical WordPress installation using the default Twenty Fourteen theme. We will start with the index.php page by explaining the functions called from it and giving hints as to where to find each function so you can customize them as needed for your next custom WordPress project. Then we go on to mention the single.php script and the supporting functions and pages in it:

index.php – this is the page, in the twentyfourteen folder, a visitor to your blog would see first when visiting. It is the default home page. While you can change the page visitors see first when going to your blog, this is the one they will see if you keep the default settings. If you open the index.php file in a text editor, you will notice the first line of PHP code makes a call to the get_header() function. That function leads us to our next page in the theme’s tree:

get_header – The header.php file is included in index.php and any other file that uses the get_header function. The header.php file, as its name indicates, provides a standard page header dynamically created with PHP and HTML.

WordPress Loop – after the header file is included in the index.php file, you will notice a couple lines of HTML(divs) followed by the PHP code that says if have_posts… which basically is telling the browser to display posts if there are any and then to show a message if there are not any posts to show. The code that is processed, if there are any posts, is called the WordPress Loop and is the basic building block for many WordPress pages and posts. The loop can contain many functions. In the basic twentyfourteen theme, in the index.php script, it calls the have_posts function first followed by a theme-specific function. Here are the functions called within the loop(or immediately before) for the Twenty Fourteen theme:

  • have_posts() – Usually the first WordPress function before the loop that returns either true or false, to indicate whether or not there are any results to loop over.
  • the_post() – the first function in the loop directly after a second call to the have_posts() function(this one in a while statement). This function iterates the loop’s post index and sets up the next post. This function is part of the WordPress core and not the theme, it is found in the /your-blog/wp-includes/ directory in a file named query.php.
  • get_template_part() – function found after the_post() function in the Twenty Fourteen theme that is responsible for including a part of the template other than the header, footer or sidebar which have their own files and functions. The purpose of the get_template_part() function is to be able to easily reuse a section of code the displays a part of the template. The function knows what to display according to the slug and name parameters passed to it. This function also is part of the WordPress core and is found in the file: wp-includes/general-template.php.
  • twentyfourteen_paging_nav() – a theme specific function to the Twenty Fourteen theme, meaning that it isn’t found in other themes. If you need to edit the function, it is found in /wp-content/themes/twentyfourteen/functions.php. The function’s basic function is to display “next/previous” navigation links when they exist to take user to the next content page.

➢ get_sidebar() – a core function located in wp-includes/general-template.php. This function is used to include the sidebar.php file which displays the template’s sidebar.

➢ get_footer() – the final function of the index.php page and of many pages in WordPress. It includes the footer.php file which contains a common footer for most page in your blog. The actual function lies in wp-includes/general-template.php. It is a core function that leads to a template-specific file because footer.php is in the template’s directory.

Note: above are all the major parts of the index.php page explained in some detail. The next relevant page, loosely in order of importance, is the single.php script. Since many scripts will contain functions that have already been explained, subsequent function and script mentions will include only a brief description, so to get the full description, locate the first mention of that function or script above.

single.php – this is the script that houses the individual posts, each of which is normally listed in the index.php page described in detail above. Below we will demonstrate how the function tree of single.php works to display each page or post of your WordPress blog:

➢ get_header() – as described above.

➢ Start the Loop – the loop in single.php is similar to the way the loop works in index.php and is surrounded by the same functions as we see below:

  • have_posts()
  • the_post()
  • get_template_part – this function has the same functionality as in index.php(see above) except for the fact that it has different parameters and therefore displays different content.
  • twentyfourteen_post_nav()
  • comments_template() – is a function for showing user comments and the comments form on the page for users to leave their comments on the topic at hand. It takes in a filename as the first parameter that indicates which file to use as a template for the comments display and form. comments.php, the default file is used in single.php for the twentyeleven theme.

➢ get_sidebar() is the function providing the page sidebar for single.php and other pages. Same as above in index.php.
➢ get_footer() – is the function providing the page footer for single.php and other pages. Same as above in index.php.

Now you have an insight into the two most important pages in most WordPress themes, the index.php script and the single.php script which control the display of the two most often viewed pages in most common WordPress blogs. By editing these two scripts, you can change most of the look and feel of almost any WordPress theme.

By subsequently editing the files described above that contain the active functions used, you may also be editing the WordPress core, so be careful what edits you make and make sure you understand that editing any of the files described as being part of the core, will make changes outside of the theme to the WordPress installation as a whole. If you do that, changing the theme will not get rid of the changes you made to the core.

As I mentioned above, while it may be necessary to make changes to the WordPress core in some situations, it is advised that it be done cautiously and only as necessary. It is further recommended that you make use of Child Themes as opposed to editing the main theme’s files. Child themes involve a simple concept of making a copy of one of a theme’s file and renaming it before making changes so your default theme stays intact.

Further Learning

To really be able to effectively make changes to the way WordPress is supposed to behave, you need to eventually get into making changes to the WordPress core. Before you do this, you need to get a good grasp on the inherent WordPress functions, often referred to as tags or template tags in the documentation. Once you understand the functions, you can modify them as needed.

One advantage to knowing the inherent functions in WordPress is that you may find that you can often simply replace one inherent function with another instead of writing a new function. WordPress includes a wide array of inherent functions for just about anything they could think of making one for, so see what’s already available to you before you go off writing or rewriting core functions to produce a desired effect.

While there are times you will need to write a new function to complete a task, often times, there is one already in place if you know where to find it. The online WordPress codex Is a valuable source for information pertaining to WordPress functions, read it to find out if the functionality you are seeking already exists before creating it from scratch.

It is always best to use WordPress’ built in functions whenever possible. If you are a professional developer, you will find your WordPress clients insisting upon it. If you are just a developer working on your own blog, it is still the best practice. The more you leave the default WordPress installation intact, the easier it will be to maintain in the future.

Using What You Know

From this tutorial you should now be able to determine how to find the files and functions that you would edit to make major and some minor changes to the way WordPress works and looks. For example you should know that if you want to make changes to the sidebar displayed on multiple post pages(index.php), that you will be dealing with the get_sidebar() function and the sidebar.php script. Knowing this is crucial to making changes to a blog’s sidebar. After all, you have to have a starting point to do anything, right?

The possibilities are nearly endless once you know your way around a WordPress blog! Have fun learning how to customize your own WordPress Blog and happy coding!

Summary

In this tutorial you should have grasped just enough information to begin learning the infrastructure of a WordPress installation. This is merely a starting point and not a complete guide. If you follow this tutorial closely, you should be able to continue studying the files and functions within WordPress using the path we started you on. By looking closely at the index.php and single.php scripts and all of the scripts linked to from within those two, you should be able to learn how to continue on down the directory try learning what each and every file and function within each file does. Good luck learning how to customize your own WordPress blog and have fun doing it! For those of you interested in learning WordPress customization for earning an income, let me assure you from experience, there is a lot of work out there for customizing WordPress!

)
Codeable info

Comments (2)

Comment by Jackie says:

As a beginner/intermediate increasingly interested in a career in website development, I thank you so much for this neat summary.
P.S. I think you should write the book on WordPress :)

Comment by marc says:

thanks for sharing a summary of the most important files in wordpress core, well done.

Codeable info