To build your own WordPress themes and plugins, its a good idea to build and test them on your local WordPress development environment before releasing it to your clients or to the public.
Setting up your Local WordPress Development Environment
To get started you need an AMP stack on your machine. AMP stands for Apache, MySql and PHP. If you’re using Linux, you need Linux Apache, MySql and PHP, similarly MAMP for Mac, and WAMP for Windows users.
You can also use these recommended stacks
XAMPP by Apache friends – XAMPP contains whole lot of useful packages like phpmyadmin and filezilla.
DesktopServer by ServerPress – You can get preconfigured WordPress but the free version allows upto 3 websites on a local machine.
There are dozens of free and paid stacks on the web. You can use whatever you fancy. For serious development you can use the Vagrant testing environment.
After setting up your AMP stack, you need to download a copy of WordPress software.
Download and install WordPress on your localhost.
Login to your WordPress dashboard and go to Appearance->Themes.
You will see a couple of themes and one of them is activated. As of this tutorial, the current WordPress version is 4.4.2, so you will have the default TwentySixteen theme activated.
Don’t change anything yet. You have no posts, pages or any data available in your installation.
Extract the wptest-master and you will see a file called wptest.xml.
Go back to your WordPress dashboard and navigate to Tools->Import. In this page there are lots of import options. Select WordPress at the bottom.
Download the WordPress Importer plugin.
Select the the wptest.xml and click on Upload file and import.
No need to change anything here. Just click on Download and import file attachments and click Submit. It will take several minutes to import all the data.
Once completed, visit your frontend. You ought to see something like this.
You will have dozens of posts and pages filled with content of every category like links, lists, headings, paragraphs, images and galleries. This will help you tailor your theme as we will see in coming tutorials.
Setting up our theme
Like I said before, I will be using the Bootstrap framework in this course. Frameworks are very useful, but to understand the meat and guts of WordPress, we will understand some WordPress loop functions, template tags before incorporating Bootstrap into our project.
Now that our WordPress development environment is set, navigate to
/your-website/wp-content/themes. This folder contains all the themes including the one that is active on your site.
Create a folder here and rename it your theme name. In my case I named it mynewtheme
Now go back to you WordPress dashboard, go to Appearance->Themes.
You will see your theme name under Broken Themes. That is because your theme folder is empty and WordPress requires at least two files in a theme; index.php and style.css. Without these files, WordPress will report this error.
Create two files under your-theme; index.php & style.css.
Now, check your Themes panel, you will see your theme has been list though devoid of any information.
Activate your theme and visit your front end.
WordPress does an excellent job of separating the data layer from the presentation layer i.e your theme. Your theme uses WordPress APIs to extract, manipulate and display content from the database. Thus every theme has its own unique ways of displaying content.
Lets jump to our index.php and type this PHP code
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); the_title('<h2>', '</h2>'); the_excerpt(); print '<hr />'; endwhile; else : print 'No posts are available'; endif; ?>
Save it and reload your front end.
This is the famous WordPress Loop. The code looped through the database extracting every post available.
So, we have created our base theme. On our next tutorial we will explore these functions we have used.
Today we understood
- Setting up a local WordPress development environment.
- Setting up our custom theme
- Setting up our dummy content
- Wrote basic PHP code to display post titles and their excerpts.