How to Install a WordPress Theme

In the Code category of Envato Tuts+, we cover a lot of content. This ranges from anything such as how to write code using some of the latest JavaScript frameworks to how to achieve certain things with content management systems such as WordPress and OpenCart.

Because we tend to focus much of our content on those who already have some level of familiarity with computing, we often assume that certain things are already in place before starting our tutorials.

For example, sometimes we assume that you have a working knowledge of JavaScript before jumping into the actual framework. Or maybe we assume that you have a level of familiarity with PHP or Ruby before starting a tutorial on how to build a web application using a new library.

In the How To articles that we’re publishing, we’re working to provide tutorials that give readers the steps that are absolutely necessary to get up and running with a particular piece of software, especially those that play well with many of the items that are available in the Market.

If you’re interested in building a website with WordPress, then it stands to reason that you should have a working definition of what a WordPress theme should be as well as a working knowledge of how to install a WordPress theme.

Understanding WordPress Themes

Before taking a look at how to install WordPress themes, let’s define what a WordPress theme should be. I distinguish this from what a WordPress theme is because you’re often going to find themes that do more than they should. These themes make it hard to try out a different theme should you choose to change your theme’s design.

I’ll talk more about this momentarily.

What a Theme Should Be

For now, let’s work with the definition provided in the WordPress Codex:

Fundamentally, the WordPress Theme system is a way to “skin” your weblog. Yet, it is more than just a “skin.” Skinning your site implies that only the design is changed. WordPress Themes can provide much more control over the look and presentation of the material on your website.

The key takeaway from this definition is that a WordPress theme provides the presentation of your site. That is, it’s responsible for giving your website or your blog a specific look. 

It affects anything that you can see, that styles your content, and that affects your fonts, color scheme, and so on. 

What About Theme Lock-In?

When installing a WordPress theme, it’s important to pay attention to the features that it offers. Modern themes often include much more than just presentation. That is, they introduce functionality. 

Functionality can be defined as anything that changes the behavior of your theme. For example, let’s say that your theme offers some type of search engine optimization option on the post editor screen. 

And because that is outside the realm of presentation, that is considered functionality. And if a theme offers something like this, then you’re in danger of suffering from what’s called “theme lock-in”.

Here’s how it works: You install a theme that offers more than just presentation (such as the SEO functionality outlined above). Should you choose to update your site to a new theme that does not offer the exact same implementation of the SEO functionality, you lose it. All of it. 

You may end up with a great design, but you’ve lost the work that you did supplying all of the SEO information to your theme. Thus, you’re either locked into using the same theme that you started with, or you’re faced with using a new theme and losing all of that work.

Ultimately, themes should not be including this type of functionality. Functionality is reserved for plugins. This is something that we’ll talk about in another post.

For now, remember that themes should be all about presentation. If you’re okay with theme lock-in, then selecting a theme that provides a lot of functionality might be okay for you; however, if you’re looking to eventually change out your design from time to time, then try to stick with themes that strictly adhere to modifying the presentation of your site.

Installing a WordPress Theme

With that said, now we can talk about the process that is required to install a WordPress theme. There are actually two ways to go about doing this:

  1. You can install a theme from within WordPress.
  2. You can install a theme via S/FTP and then activate it within WordPress.

Though the first option is arguably the easiest, we’ll be covering both options in this guide to make sure that we’ve provided you with the most comprehensive information possible.

Note this guide assumes you already have WordPress installed on your computer or your web host. We’re going to walk through the process of obtaining a theme and installing it via WordPress or via FTP.

With that said, let’s get started.

Downloading a WordPress Theme

There are a lot of places on the web to download WordPress themes; however, it’s not always safe to download a theme from just anywhere. It’s important to vet the reputation of the provider of the theme.

That’s outside the scope of this post; however, you can’t go wrong with selecting a theme from the WordPress Theme Repository or from the Envato Marketplace.

For the purposes of this tutorial, we’re going to be using the freely available Twenty Sixteen theme. First, we’re going to install it from within WordPress, and then we’ll see how to install it via S/FTP.

For the following steps, I’m assuming that you’re starting from within the dashboard of WordPress:

The WordPress Dashboard

Regardless of the method that you opt to use to install a theme, this is where we’ll begin the steps of our tutorial.

Installing a Theme From Within WordPress

To install a theme from within WordPress itself, click on the Appearance menu and then select the Themes option.

The Themes Menu Item

From there, you’ll be presented with all of the themes that have been installed.

Installed WordPress Themes

Next, click on the Add New button at the top of the screen. From here, you’ll be taken to a screen that looks like this:

Add WordPress Theme

Notice the Search Themes field at the top of the page. In this field, type Twenty Sixteen without quotes, and it should return the following screen:

Twenty Sixteen

After that, click on the option to Install the theme. After that, WordPress will give you the option to preview the theme or to activate the theme. The same options will be presented for those who have uploaded a theme via S/FTP, as well.

So, for the moment, we’re going to take a look at the steps necessary to install a theme by uploading the files. If you’re not interested in the following, alternative steps, then you may skip down to the Activating a Theme section below.

Installing a Theme via S/FTP

This version of installing a theme assumes that you’re comfortable with the terms server, port, username, and password. It also assumes that you’re familiar with the wp-content and theme directories. If not, then the best course of action may be to stick with the method above.

If, however, none of the above sounds like jargon, then let’s proceed. For the purposes of this demo, I’m going to be using Transmit as my S/FTP client; however, feel free to use whatever client you prefer.

First, we need to download Twenty Sixteen from the WordPress Theme Repository

The WordPress Theme Repository

Once you click on Download, this will place a zip file of the theme in the directory that you chose.

Twenty Sixteen Archive

Next, you’ll want to extract the archive. This will create a subdirectory containing all of the theme files in the directory in which the zip file exists.

The Theme Directory

After that, connect to your web server and navigate to your WordPress installation’s wp-content/themes directory.

Uploading Twenty Sixteen

Upload the directory that was created when you extracted the theme files. From there, hop into the WordPress dashboard and navigate to the Themes page. You should see a copy of Twenty Sixteen appear in the theme listing.

At this point, we’re ready to proceed with activating the theme regardless of how we’ve installed it. That is, if you’ve opted to use S/FTP or you’ve chosen to install the theme from within WordPress, you’ll be presented with the same set of options.

So let’s do it.

Activating a Theme

Once the theme has been downloaded via WordPress or uploaded via S/FTP, then you have everything you need in order to activate the theme and update the look and feel of your website.

After you’ve acquired the theme, you should be presented with an option to activate the theme:

Activate WordPress Theme

From here, you can select Live Preview to see how it’s going to alter your current content, or you can click on Activate to go ahead and set it up. I’m choosing to go with the latter.

Once done, you should see the following screen:

Activated WordPress Theme

From there, you should be able to continue working in WordPress as you were prior to installing this theme. This means you can continue adding posts, pages, categories, and so on.

Depending on the theme, you may also have the opportunity to update the header image, the background image, and so on. Note that this is dependent on the theme that was installed.

To know exactly what your theme offers, it’s important to consult the documentation.


As you can see, installing a WordPress theme is a relatively simple process, especially if you do it from within the WordPress application. Even if you’re a little intimidated by the process using an FTP client, it’s still relatively easy to activate the theme once you’ve uploaded the files.

Secondly, note that it’s important to make a distinction between the type of theme you want. Do you want a single theme with a lot of functionality that you’ll likely never change, or do you want a theme that plays nicely with a set of plugins, allowing you to change the look and feel of your website independent of the functionality?

Whatever the case, you should have everything you need in order to select a theme, install it, and activate it in whatever way is most comfortable to you.

And finally, if you’re looking for a solid selection of themes to fit nearly any situation then be sure to check out what we have available in the Envato Market.

Remember, you can catch all of my courses and tutorials on my profile page, and you can follow me on my blog and/or Twitter at @tommcfarlin where I talk about software development in the context of WordPress.

As usual, please don’t hesitate to leave any questions or comments in the feed below, and I’ll aim to respond to each of them.

from Envato Tuts+ Code – WordPress

A Beginners Guide to Titan Framework: How Titan Works

This is the third article of the series and so far, I have discussed the importance and features of Titan Framework along with the basic setup. In the very first article, I discussed the three-step setup of Titan Framework which goes like this: 

  1. Set up your project.
  2. Create options.
  3. Get values.

I explained the first step in the previous article, in which we learned that Titan Framework is a plug and play framework, i.e. it comes as a plugin, although it can also be integrated by embedding it within your web development project. So, let’s continue from where I left off and get on with the next two steps.

Here, I’ll explain how and in what capacity Titan Framework works in your web development project. Then I’ll jump to the concept of creating Instances and Options from which I will get the saved Values at the front-end. So, let’s begin! 

1. Set Up Your Project

First of all, let’s find out what you’ll need to implement today’s tutorial. We are going to create a simple WordPress theme with which we will use Titan Framework to explore the different set of options it can create. You’ll need:

  1. Local WordPress setup, e.g. I use DesktopServer (believe me, it’s amazing!).
  2. A base WordPress theme—I am going to use Neat for that purpose. I have created a new branch called Neat: TitanFramework for this tutorial.

My Setup

As I am going to use Neat WordPress theme, it’s important that I explain its structure first. Open the theme folder in your text editor where inside the assets directory I’ve created a new folder named admin. Its purpose is to handle all the relevant code for admin options. Within it is another directory, titanframework, and a PHP file, admin-init.php.

My setup

admin-init.php File

This PHP file will handle all the admin-related activity. If you scroll through its code you’ll find out that I’ve used the get_template_directory() function to include four files from the titanframework directory. The following code is pretty self-explanatory, but I will explain the purpose of each of these files in a short while.

Here is the code for admin-init.php:

Directory Called titanframework

Directory called titanframework

I have discussed previously that Titan Framework helps you to create Admin Panels and Tabs, Metaboxes and Theme Customizer sections and panels. So I have created separate files for each one of them. Obviously they can be created with separate lines of code. I’ll be discussing each of these in my upcoming articles, but for now all you need to understand is what are these files for.

  • titan-framework-checker.php: is responsible for including Titan Framework in your theme.
  • adminpanel-options-init.php: contains the code for creating admin panel and tabs with a set of options.
  • metabox-options-init.php: contains the code for creating metaboxes for post types with a set of options in them.
  • customizer-options-init.php: contains the code for creating theme customizer panels and sections with a set of options.

Including the admin-init.php File

Up to now you must be wondering why I’ve created so many new files. Why didn’t I just add all the code in the functions.php file? Well, I don’t consider it to be a good architecture design approach. To build a maintainable product, you need to define a good design pattern. 

What’s the point of messing up your functions.php file with so many lines of code? I have experienced this myself: towards the end of any development project, the code becomes so massive that it gets difficult to handle all of it in a single file, especially when it comes to debugging and fixing any errors. It’s always better to create separate files, so think of these files as modules.

Let’s include admin-init.php in our functions.php file.

Here I have added the admin-init.php file via the same get_template_directory() and require_once() functions.

At this point, we’ve taken a look at the basic setup of a theme which I am going to use to explain how Titan Framework works. We’ve completed the setup and embedded Titan Framework in our WordPress theme. Let’s create an admin panel with options and get the values for the front end.

Working with Titan Framework

To work with Titan Framework you need to follow a certain workflow which is:

  1. Create a Titan Framework Instance per file.
  2. Create Admin Panel/Tabs, Metaboxes or Theme Customizer Sections/Panels.
  3. Create Options in them.
  4. Get the Values.

Let me first write the piece of code which I am going to use for this very purpose. This is the code for the adminpanels-options-init.php file which is present inside the assets/admin/titanframwork/ directory.

At the very beginning I have added a few helping links from the documentation of Titan Framework. Now I am going to explain this code line by line.

Line 17

Here we have a hook called tf_create_options, which is used to create options via Titan Framework using the aa_options_creating_function() function. 

Lines 19

We have created a function called aa_options_creating_function(), which will be responsible for creating these options.

Line 22

At line 22, I have created an instance for Titan Framework. Creating an instance is an integral part of this framework, and it must be created in each file wherever we need to interact with Titan Framework. To make your instance unique, you can add your product’s name in it. For example, I have added ‘neat’ as a parameter. 

Get an Instance of Titan Framework

Creating an instance of Titan Framework is pretty simple. We get a unique instance to avoid any confusion just in case another plugin is using Titan Framework to create options. The author states that: 

The getInstance function creates/gets a unique instance of Titan Framework specific to “mytheme”. This is the namespace we’re going to use to ensure that our settings won’t conflict with other plugins that use Titan Framework. Be sure to change it to your theme or plugin name.

Here is a code example of getting an instance with Titan. 

In the case of my Neat theme I will use the parameter of neat instead of my-theme to make my code unique, i.e. 

Creating an Admin Panel; Lines 33–35

These lines will create an admin panel which I have named as “$aa_panel”. Titan Framework helps to create sections like admin panel, admin tabs, metaboxes and theme customizer panels within your project. But for now I will only create an admin panel as an example to explain things. 

These lines of code are calling our createAdminPanel() function in Titan Framework which forms an array. This function will add a new section in your WordPress dashboard named Neat Options.

WordPress Dashboard

The above image is a screenshot of the WordPress dashboard where you can find a new section being added in the Admin Panel.

Just to summarize what I have done so far: I have set up my web developmental project, and then I added an instance to it, after which I created an Admin Panel. 

Neat Options

Right at this point, if I click the Neat Options button, then this section is empty. So, now I will create options within this newly created Admin Panel. 

Creating Options in Titan Framework

Customizable WordPress themes are preferred because the end users mostly want to configure themes without writing a single line of code. This is made possible by adding flexible options during theme development. 

We can add such options in a separate admin panel, or in form of metaboxes or else options panels inside theme customizer. Options serve the purpose of storing the values which are later retrieved at the front-end.

Lines 42–47

Now take a look at these lines of code. These will be used to create options within an admin panel or tab. Line 42 defines the createOption() function for the $aa_panel. This function is once again an array which bears certain parameters like id, type, name, description, etc. According to these lines I have created an option which is a text field and is named My Text Option


This is the screenshot which displays the option created within the Neat Options panel.  

Lines 56–58

The last two lines of the code create another option within this panel. But its purpose is to save the settings. For example, in the My Text Option field, the user fills it with John Doe. This means that the user wants to change the default setting, which is only possible if the user saves the custom settings.

So, I again used the createOption() function and assigned the value of parameter “type = save“. 

Text Option

This is the final screenshot of the development which I have done so far. 

At this point, you have Titan Framework all set up, you have created a few options to get dynamic results, and now all that’s left to do is get the values from the options you set up in the first place. Out of the three-step tagline, I’ve discussed the first two in the previous two articles. So, let’s now get to the last and indeed the most important part of how Titan Framework works.

Getting Values

Creating options is done at the back-end, and now we need to retrieve the values against those options, set by an end user, to use them at the front-end. We can retrieve values set against the options via a simple function, i.e. getOption().

The following is the basic structure of code to retrieve the saved values:

So, I created a function called myFunction where I first registered an instance of Titan. Registering an instance is an important step, because it gets the object created by Titan Framework for your settings registered in a variable, i.e. $titan. You can see that our instance is specific to our theme, i.e. my-theme, which is supposed to be our theme name or anything unique. 

Retrieving Values at the Front-End

Let’s use the values set against the options at the front-end. I have created a blank custom page template. If you refer to the Neat theme folder, you will find a file called aa_titanframework.php in the root. You can do the same with your theme as well.

Retrieving Values at the Front-End

Create a new file in your text editor and copy and paste the following lines of code.

Before I explain the above-mentioned code, do refer to the code of my previous article where I created an Admin Panel and its options, because I am using the same names, IDs, etc., here as well.

The first four lines of the code are for WordPress to register this custom page template, which is pretty standard—no rocket science there.

Getting Option Values

I will get the values of the options which I created in the adminpanel-options-init.php file (refer for its code to my previous article) here. Two steps are needed to achieve this:

  1. Get a unique Titan Framework instance and save it to a variable.
  2. Get the value via ID using the getOption() function.

Line 12

Following the first step, I initialized a unique instance against the variable $titan, only once for every file in which I use it. My instance is unique since I have named it neat, i.e. the package name for my theme—you can name it anything unique. It is necessary so that if a plugin is using Titan and your theme is also using it, then there should be a way to differentiate between options set by that plugin and your theme.

Line 14

The second step is to make use of the ID and get the saved value for that option. The code for this line is:

I retrieved the value for aa_txt which is saved against the variable $aa_txt_val. The aa_txt parameter refers to the ID of the option which I created within my first Admin Panel (refer to my previous article).

So, far I’ve set up the basic structure to get the saved values. Now let’s use the saved values at the front-end.

Lines 22–35

These lines of code are used to display the saved values on the front-end. Take a look at line 29 where I used the echo command to get the output. The same is done on line 35, but this time I’m displaying the output for $aa_txt_val in an H3 (heading 3) format. So now whatever value the end user sets for this option, it will be displayed at the front-end.


In order to display the results for the code which I have explained above, follow these steps:

  • Go to your WordPress dashboard
  • Create a New Page via Pages > Add New.
  • Name the page Titan Framework (optional, you’d know that)
Creating a New Page

The above screenshot shows the page which I have created. At the same time, you can also find the new Admin Panel Menu, i.e. Neat Options, where we created the options.

Next choose the Page Template, i.e. Titan Framework, for this page before you publish it.

Selecting a page template

The aa_titanframework.php file adds a new page Template called the “Titan Framework” which appears in the drop-down list. Choose that template.

  • Publish the page.
  • Next go to the Neat Options menu and add some value against the option named My Text Option.
Selecting a text option

The image shows that I have filled this field with AA-Text-Option and then I clicked Save Changes.

  • Go back to the Titan Framework page and view the page.
The view page

The above image displays the final result. This is the Titan Framework page. The saved option value (i.e. AA-Text-Option) for aa_txt is being displayed in two different forms. The first one is in paragraph format while the second is in h3 format.


By now you must have some understanding of Titan Framework and its working. This is the basic setup which is to be followed each time you develop something with Titan Framework. 

Now that you know how to set it up, create a few options and get the saved values; try it out and let me know in case of any queries via comments or reach out to me at Twitter

Next in this series we will explore the set of options we can create with Titan Framework and how to use them. 

from Envato Tuts+ Code – WordPress

Weekly News for Designers (N.311)

This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter for some more amazing design articles, resources and freebies.

Foundation 6 Has Baeen Released

Foundation 6 Is Here!

Foundation 6: Prototype to Production.

Everything Designers Need to Know About Foundation 6.

New Tools & Resources

mo · js – The Motion Graphics Toolbelt for the Web.

plotly.js, a High-Level, Declarative, Open-Source Charting Library

5 Fantastic Sketch Tools Every Designer Should Use.

Instantsearch.js, a Library of Widgets Designed for High-Performance Instant Search.

Sketch Keyboard Shortcuts and Tricks.

30 of the Top WordPress Freebies of 2015.

Learning Resources, Tutorials & Tips

Designing with Constraint: Twitter's Approach to Email by Joe Tutterow.

Using Flexbox to Create a Responsive Comment Section by Danny Markov.

Stretchy Navigation in CSS and jQuery by CodyHouse.

Blueprint: Multi-Level Menu by Codrops.

I Turned Off JavaScript for a Whole Week and It Was Glorious by Klint Finley.

Classy CSS: a Programmatic Approach to Sass Stylesheets by Una Kravets.

Free Icons, Fonts & Templates

15 Free Gesture Icon Sets for Mobile Developers.

Freebie: 100 Google Material Icons for Sketch.

Freebie: Animaticons – Beautiful, Customizable Animated GIF Icons.

Freebie: Wireframe Asset (EPS).

Freebie: Break Font.

Freebie: Branding Identity Mockup (PSD).

Browse the Weekly News Archives →

The post Weekly News for Designers (N.311) appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine

Developing a Membership Site With WordPress: Part 1

Final product image
What You’ll Be Creating

WordPress already ships with loads of good stuff to make a membership site. Unfortunately most of the process is handled through the back end of the site, and ideally we want to keep users away from the admin area. So over this three-part series we will be moving this process to the front of the site, throwing in some customization, and styling it up along the way.

At the end of the series you should have a site where people can sign up, log in and edit their very own account details. As it’s such a wide topic we won’t be able to cover everything, but I’ll do my best to give you a solid foundation for a membership site.

In a nutshell, this is what to expect over the series:

  • Part One: Registration and login forms
  • Part Two: Adding custom fields to the registration form
  • Part Three: Developing a “user profile” section

Now, before we start, there is a good argument for this code being made as a plugin—after all, it’s quite functional. But because of the amount of “theming” we will be doing, it’s completely reasonable for the code to be housed in our theme.  

Let’s Dig In

As a WordPress developer I use Sage as my starter theme, so I’ll be developing using that. If you haven’t used Sage (previously known as Roots) before, there is a slight learning curve as it uses Bower and Gulp, so you’ll need to have some experience using those. Having said all that, you could easily apply the principles here to any theme. There is a lot more to be said about starter themes, but let’s save that for another time.

So without further delay let’s get into the registration section of your site. There are basically two approaches, and I have tried both. The first is to develop a custom form and process the registration yourself, and the second involves extending the native registration and sign-in forms. I prefer the latter, and here’s why: native is always better, it’s easier to maintain, and there are a lot less moving parts.

One downside about using the native forms for login and registration is that you get the native URLs: and

Not to worry, because there are ways to rewrite those, so it’s not going to be obvious it’s a WordPress site.

Getting Our House in Order  

I like to keep a clean house, so in my functions.php I’m going to include a file called admin.php that will contain all of our admin-related functions. The code below (line 12) is how you would include the file if you are using the Sage WP Starter Theme.  

If you are not using Sage you can just use something like: 

require_once locate_template( '/lib/admin.php' );

Side note: This isn’t related to this topic, but I’d recommend having multiple includes in your functions.php and then coding in the respective files. It keeps the files cleaner and readable. 

We will be keeping our admin assets (CSS and images) in a separate admin directory. This is optional, but remember to change your path when referencing these files if you use a different structure.  

Let’s Start With the CSS

We want to override the styles WordPress has applied to the login and register pages.

So to do this we need to include a stylesheet into our theme. The way to do this in WordPress is to use the wp_enqueue_style function.

So the plan is to load a different stylesheet for each form. To do this we will check the GET parameter passed and load the respective style. If you’re thinking, “What the hell is a GET parameter?” then don’t worry. It’s basically the URL. That’s all you really need to know for the sake of what we are doing. 

So the logic is: if the URL is x, load x style-sheet, and if the URL is y, load y style-sheet. So create an admin.php file and copy this code into it, and then save it in the lib folder.  

We are using the login_head action here to load our styles on the login page. This action is particularly designed for this purpose. If you are not familiar with actions and filters in WordPress I’d recommend spending some time learning about them. They are pillars of WordPress development.  

Now for the CSS itself. For the sake of keeping within the scope of this tutorial, we will just be writing vanilla CSS. No LESS or Sass. The DOM doesn’t really give us much to hinge off on these pages, so we need to be a bit crafty. 

To add header and footer type styles, let’s use the pseudo elements before and after. I’ve grabbed an image from for the background of our login page. It’s a great resource but lacks search capability. Luckily Arthur Weill has made a tool to search the images.

You can grab or view the CSS files below:

This CSS only serves as a guide. The main points are:

  • To achieve a header/footer, use before and after pseudo elements.
  • Use media queries to make sure the forms can scale down nicely. You might want them to be used in a modal/iframe or to log in from a tablet or phone.
Example signup page

Some Finishing Touches

The logo on our pages links to, which is not ideal. Luckily WordPress has a handy filter we can use to change that, login_headerurl. So let’s include this snippet in our admin.php.

Another thing is that on our registration page there is a bit of introduction text. It’s not very informative: “Register For This Site”. Let’s tweak that too. Again there is an action (login_message) to hook in and change it. It’s not as straightforward as the previous filter, but using the PHP function strpos we can check for certain copy (“Register”) and then return our amended copy instead.

And last but not least, let’s change those URLs. There are a bunch of ways to do this. You could use .htaccess, but I like to use iThemes Security Plugin. Within the settings you can change the URLs to your admin area. I’ve changed mine to /log‑in. There are a lot of other great things you can do with the plugin, so I recommend checking it out.

Enable the hide backend feature checkbox

What’s Next?

We are off to a great start for our membership site. In part two we will cover how to add custom meta fields to our registration form and very briefly touch on how to customize the emails that get sent from our site. I hope this tutorial was easy to follow. Any feedback, questions and comments are welcome.

Things to Note

Please note: if you are downloading the code from the GitHub repository it includes all the files to get your theme up and running. The idea is that you can grab the repo and just run the necessary Gulp and Bower commands and you’ll be away!  If you just want the files that contain code specific to this series the files are listed below. 

from Envato Tuts+ Code – WordPress