Creating a WordPress Theme

We already did a piece on how to build a dynamic web app from scratch using the MEAN stack, so let's take a look at a more user-friendly option- WordPress. The popular blogging platform has been around for over 20 years and is still the standard for a lot of websites you have visited that are article-orientated due to its user-friendly back end. Let's take a dive into what makes up a WordPress theme.

WordPress themes live inside your wp-content directory in your hosting in a folder called themes (shocking, I know). The only other directory in your hosting you might want to edit when developing a theme is the mu-plugins folder (if it's there) which can also be found inside your wp-content directory. This mu-plugins folder will contain any file that tells WordPress one specific thing: No matter what theme is being used always load information from this folder. Let's start breaking down what we need to have a functioning theme.

1. Functions.php
2. Index.php
3. Front-page.php
4. Style.css
5. Screenshot file

Functions.php

Your functions.php contains all the information that will tie your theme together. Unlike in the previous tutorial where we put our styling in the header partial, you actually load scripts and styles with a function called wp_enqueue_style() or wp_enqueue_script(). You can also write functions to do whatever your site specificly needs.

Index.php

This is the default page that would show for your website if there is no front-page.php in your theme. This page can be styled how you want it to look and often this is the first time people see the WordPress loop in action. I generally use this as a fallback since I will always use the option to make front-page.php

Front-page.php

To make the front-page.php file active you have to take a few steps. First, you have to create a page and name it (I usually am boring and use "home" as my name). Then you have to go to Settings > Reading and change the option on “your homepage displays” to a static page. Select the page you want as your front page and this file immediately becomes active. You can use the WordPress loop here to get information from anywhere on your site to deliver it to your readers.

Style.css

Want to make your site look pretty? This is where the magic happens! All of your custom CSS styling goes here so you can change the colors, fonts, and sizing or the components of your site. Anything that you write here would override the basics from any UI system that you might have imported in your functions.php file. Be creative here and make your site unique!

Screenshot

This is an image file (usually they like .png/.jpg/jpeg files) that will be displayed on the theme page in your admin area. I usually try and make this as specific as possible to the theme I am creating, so if I have multiple themes on the same site I know exactly what I am looking for. This is required

Not Mandatory, but suggested!

There are a few other files I would suggest that you add to your theme that will make your life extremely easier. Since I am a big advocate of DRY (Don’t Repeat Yourself) code, these will make it easy for you to create the work one and just place include statements. I highly recommend creating a header.php and footer.php file. You can call both on any page of your site by simply calling php_get_header(); or php_get_footer(); to place them in your theme files.

Bonus

The last page you might want to customize is archive.php. This controls the landing page of all the post types that you have on your site. Customizing this page gives you a little more professionalism and allows you to have some creativity in the styling of the page. Again, it's not required, but you can make your visitors much happier with some additional features.

Thats it! You now have the minimum requirements to start making your own WordPress themes. Happy coding and don’t hesitate to ask for help if you need it!