18 June 2015

Creating a responsive wordpress theme from scratch

Project code on GitHub

To create a WordPress theme, two basic files are needed: index.php and style.css. The stylesheet has to contain some basic information about the theme:

To make the theme suitable for viewing on different screen sizes , e.g. responsive, the theme uses media queries to modify the layout depending on the screen width:

When the screen width is < 768px the sidebar will become a top bar to save space.

The index.php  is the themes main file which lists all the blog posts:

The get_header() function returns the content from header.php. This files contains the header and navigation information and can be accessed from any file. This is used so code do not have to be duplicated.

The footer.php file simply closes the tags opened in header.php.

Wordpress also has a file called functions.php which is a central place to store functions used in the theme:

Complete stylesheet code: