Peter Keating

Developer from the New Forest in the South of England.

Creating My Own WordPress Theme


So after delaying it for a while here is my own WordPress theme! It is very basic but that's all it needs to be for my blog. Hopefully i'll add some more bells and whistles later on but for now I have all I need to put some blog posts out on the world wide web and also some useful links to various social websites in case you want more of me. Creating a WordPress theme wasn't all that difficult with so many helpful resources available, it makes getting something simple up & running a doddle.

On reflection, I decided to jot down a list of all the resources, tools and frameworks that come together to create my WordPress theme. Not all of them are necessities, in fact none of them are, but when developing at work I find these weapons offer immense benefit when developing for the web.

ThemeShaper

There are hundreds of articles & blog posts on creating WordPress themes available on the web, but the best I came across was the blog series provided by ThemeShaper titled How To Create A WordPress Theme: The Ultimate WordPress Theme Tutorial. ThemeShaper the theme team for Automattic, who are the creators of WordPress, so they know what their talking about when it comes to WordPress themes. The tutorial has 12 parts and goes through everything from the tools you require, to the files needed to get the bare bones running then onto the different templates required for showing everything that would typically be found in a WordPress website. The posts provide excellent resources and code examples so you really can't go wrong, a must read for creating your first WordPress theme or feeling a bit rusty.

Theme Unit Test

If like me, you take testing seriously then WordPress provides a useful file that contains sample theme data that you can import into your development WordPress theme to validate your theme. The sample data covers everything that a WordPress blog could throw at you, so it really puts your theme through its paces to ensure that you are catered for every scenario. I would definitely recommend doing this at the beginning of your theme development as the sample data really does prevent wasting time entering data to cover everything that WordPress has to offer.

Git

This one definitely isn't required, but I am sure if you have fallen in love with Git as much as I have then you can understand why I choose to use it. Git is a version control tool, and in my opinion the best there is. At work we started out using SVN, however we adopted the change to use Git throughout all our projects and we are reaping the benefits. Git takes a more command line approach, and although daunting at first I find it rather satisfying and get a lot of enjoyment out of using it. If you are currently using SVN, then I couldn't recommend Git anymore to you, once you have given it a go I promise you won't look back. If you aren't using any version control tool then definitely give Git a try, but if it is a bit too daunting then SVN might be the answer as it does provide an easier learning curve. If you are going to give Git a go, then well done you! I recommend checking out this online book that will take you through everything you need to know about Git.

Github

All the code for my theme is available to see, and there is no better place on the web to do that than Github. Github is the place to host your open source projects that are using Git. Github does provide the ability to have private repository, if you are shy and don't want people to see your code, but that does come at a price, I would recommend using Bitbucket for any private remotes.

LESS

CSS is great, and I feel comfortable with it, however as a programmer it is glaringly obvious that the language breaks the Dont Repeat Yourself (DRY) principle, which really can be a pain sometimes. There are now frameworks available that help cater for this, the two main ones are Lesscss and Sass. Both are extensions of CSS that can be compiled client-side or server-side into your traditional CSS file. These frameworks provide a wealth of features to speed up the development process. I will admit, Sass is on my to-do list, but I am a fully fledged supporter of lesscss. So how does it speed up development? It provides the ability to define functions, variables, mixins & nested rules to give the developer more power when creating stylesheets. So instead of writing the same properties to add rounded corners to a div, catering for all the different browsers with vendor prefixes, you can define a mixin (basically a method) that will apply all the properties specified, this mixin can even take parameters. That is just one of the many handy features which I couldn't recommend highly enough, I really suggest you take a look, especially if your someone who spends along time copying and pasting while doing CSS.

Lesselements

I just gave you an example of a useful mixin that I always use, lesselements is a collection of handy mixins created by Dmitry Fadeyev. The file is open source hosted on Github and can easily be imported into any less file to provide an excellent selection of mixins, such as gradient, rounded corners, rotation, drop shadows & many more. I have actually made my own fork which I hope to add some more handy mixins too, so check that out if you please.

Lessc

Lessc is an open source project that can compile .less files into .css files on Windows. Created by Duncan Smart and available on Github it provides a simple way of getting from .less to .css on Windows.

Ant

Every project I do nowadays relies on a build script, mainly because most of the projects are hooked up with a continuous integration process that requires a build script for automation. However, since changing development from RIAs using Flex & AIR to building websites geared towards HTML5, I find myself using a build script all the time for tasks like compiling the .less files into .css files, minification of the CSS & JavaScript & also concatenating all CSS & JavaScript files into a single file for improved loading times. Obviously you wouldn't do these tasks manually, it would take you ages! Automating it with a build script is a good way to achieve organisation of assets to improve performance of your project. Ant is a great tool for automation, it is well documented and can do most things required for automation in projects.

H5BP

When starting any project it can sometimes take a while to get a skeleton in place for developing on. HTML5 Boilerplate (H5BP) gives everything needed to create a custom skeleton packed full of goodies. I am a big fan of this project, it is open source, hosted on Github and is a great resources for information regarding developing performant cross browser websites with the latest technologies. Another thing I love about the project is all the documentation and discussion from lots of great developers going in depth about the decisions made for the project with healthy debate throughout.

normalize.css

Created by Nicolas Gallagher and integrated in H5BP, normalize.css is an open source project that forces elements in your HTML to render consistently across all the major browsers.

JQuery

My theme doesn't feature too much JavaScript at the moment, but when developing with JavaScript I always use the well known JQuery. JQuery is a powerful JavaScript framework with excellent documentation that simplifies interaction with the DOM, with AJAX requests and a whole lot more.

Font Squirrel

Font Squirrel is a service that provides free fonts for commercial use. However, other than providing a great collection of free fonts it also provides a superb web font generator. The web font generator takes a font that you upload and returns a downloadable zip containing your font in various formats for different browsers including .ttf, .eof, .woff & .svg. Also included is css that can be placed into a stylesheet to make the fonts appear on a website.

Google Web Fonts

The header of my theme currently uses a crazy font called Boogaloo, which I have retrieved using Google Web Fonts. Google web fonts is an excellent service providing free to use fonts for any purpose. Getting as many fonts as needed onto your website is so easy with a well documented API instructing to include a style sheet at the top of a web page. What I really like about the service is that it shows a useful speedometer showing how quickly the chosen fonts will take to load on a page request.

YUICompressor

YUICompressor is part of the build script and helps to compress all the JavaScript & CSS files for improved performance. There are examples of how to integrate it with a build script on the H5BP build script or my own build script for this theme.

Modernizr

Saving one of the best till last is definitely the case with this tool, Modernizr is an open source project hosted on Github that aids in providing a consistent user experience across all browsers, new and old, with the cutting edge HTML5 and CSS3 features. Constantly updated, this tool is a JavaScript file that is included at the top of your web page and will tell you which features are available with the browser the user is viewing your website in. There is so many more features baked into this wonderful framework that are covered by the well written documentation, so head over there to find out more about this exciting tool.

So this is it! I am hoping to add more features and improve the blog over time, and also start writing some more blog posts to show y'all what I am working on and hopefully imprint some wisdom. All the code written for my theme is available for viewing on Github, and feel free to use any of it for your own theme or web related project.
So after delaying it for a while here is my own WordPress theme! It is very basic but that's all it needs to be for my blog. Hopefully i'll add some more bells and whistles later on but for now I have all I need to put some blog posts out on the world wide web and also some useful links to various social websites in case you want more of me. Creating a WordPress theme wasn't all that difficult with so many helpful resources available, it makes getting something simple up & running a doddle.

On reflection, I decided to jot down a list of all the resources, tools and frameworks that come together to create my WordPress theme. Not all of them are necessities, in fact none of them are, but when developing at work I find these weapons offer immense benefit when developing for the web.

ThemeShaper

There are hundreds of articles & blog posts on creating WordPress themes available on the web, but the best I came across was the blog series provided by ThemeShaper titled How To Create A WordPress Theme: The Ultimate WordPress Theme Tutorial. ThemeShaper the theme team for Automattic, who are the creators of WordPress, so they know what their talking about when it comes to WordPress themes. The tutorial has 12 parts and goes through everything from the tools you require, to the files needed to get the bare bones running then onto the different templates required for showing everything that would typically be found in a WordPress website. The posts provide excellent resources and code examples so you really can't go wrong, a must read for creating your first WordPress theme or feeling a bit rusty.

Theme Unit Test

If like me, you take testing seriously then WordPress provides a useful file that contains sample theme data that you can import into your development WordPress theme to validate your theme. The sample data covers everything that a WordPress blog could throw at you, so it really puts your theme through its paces to ensure that you are catered for every scenario. I would definitely recommend doing this at the beginning of your theme development as the sample data really does prevent wasting time entering data to cover everything that WordPress has to offer.

Git

This one definitely isn't required, but I am sure if you have fallen in love with Git as much as I have then you can understand why I choose to use it. Git is a version control tool, and in my opinion the best there is. At work we started out using SVN, however we adopted the change to use Git throughout all our projects and we are reaping the benefits. Git takes a more command line approach, and although daunting at first I find it rather satisfying and get a lot of enjoyment out of using it. If you are currently using SVN, then I couldn't recommend Git anymore to you, once you have given it a go I promise you won't look back. If you aren't using any version control tool then definitely give Git a try, but if it is a bit too daunting then SVN might be the answer as it does provide an easier learning curve. If you are going to give Git a go, then well done you! I recommend checking out this online book that will take you through everything you need to know about Git.

Github

All the code for my theme is available to see, and there is no better place on the web to do that than Github. Github is the place to host your open source projects that are using Git. Github does provide the ability to have private repository, if you are shy and don't want people to see your code, but that does come at a price, I would recommend using Bitbucket for any private remotes.

LESS

CSS is great, and I feel comfortable with it, however as a programmer it is glaringly obvious that the language breaks the Dont Repeat Yourself (DRY) principle, which really can be a pain sometimes. There are now frameworks available that help cater for this, the two main ones are Lesscss and Sass. Both are extensions of CSS that can be compiled client-side or server-side into your traditional CSS file. These frameworks provide a wealth of features to speed up the development process. I will admit, Sass is on my to-do list, but I am a fully fledged supporter of lesscss. So how does it speed up development? It provides the ability to define functions, variables, mixins & nested rules to give the developer more power when creating stylesheets. So instead of writing the same properties to add rounded corners to a div, catering for all the different browsers with vendor prefixes, you can define a mixin (basically a method) that will apply all the properties specified, this mixin can even take parameters. That is just one of the many handy features which I couldn't recommend highly enough, I really suggest you take a look, especially if your someone who spends along time copying and pasting while doing CSS.

Lesselements

I just gave you an example of a useful mixin that I always use, lesselements is a collection of handy mixins created by Dmitry Fadeyev. The file is open source hosted on Github and can easily be imported into any less file to provide an excellent selection of mixins, such as gradient, rounded corners, rotation, drop shadows & many more. I have actually made my own fork which I hope to add some more handy mixins too, so check that out if you please.

Lessc

Lessc is an open source project that can compile .less files into .css files on Windows. Created by Duncan Smart and available on Github it provides a simple way of getting from .less to .css on Windows.

Ant

Every project I do nowadays relies on a build script, mainly because most of the projects are hooked up with a continuous integration process that requires a build script for automation. However, since changing development from RIAs using Flex & AIR to building websites geared towards HTML5, I find myself using a build script all the time for tasks like compiling the .less files into .css files, minification of the CSS & JavaScript & also concatenating all CSS & JavaScript files into a single file for improved loading times. Obviously you wouldn't do these tasks manually, it would take you ages! Automating it with a build script is a good way to achieve organisation of assets to improve performance of your project. Ant is a great tool for automation, it is well documented and can do most things required for automation in projects.

H5BP

When starting any project it can sometimes take a while to get a skeleton in place for developing on. HTML5 Boilerplate (H5BP) gives everything needed to create a custom skeleton packed full of goodies. I am a big fan of this project, it is open source, hosted on Github and is a great resources for information regarding developing performant cross browser websites with the latest technologies. Another thing I love about the project is all the documentation and discussion from lots of great developers going in depth about the decisions made for the project with healthy debate throughout.

normalize.css

Created by Nicolas Gallagher and integrated in H5BP, normalize.css is an open source project that forces elements in your HTML to render consistently across all the major browsers.

JQuery

My theme doesn't feature too much JavaScript at the moment, but when developing with JavaScript I always use the well known JQuery. JQuery is a powerful JavaScript framework with excellent documentation that simplifies interaction with the DOM, with AJAX requests and a whole lot more.

Font Squirrel

Font Squirrel is a service that provides free fonts for commercial use. However, other than providing a great collection of free fonts it also provides a superb web font generator. The web font generator takes a font that you upload and returns a downloadable zip containing your font in various formats for different browsers including .ttf, .eof, .woff & .svg. Also included is css that can be placed into a stylesheet to make the fonts appear on a website.

Google Web Fonts

The header of my theme currently uses a crazy font called Boogaloo, which I have retrieved using Google Web Fonts. Google web fonts is an excellent service providing free to use fonts for any purpose. Getting as many fonts as needed onto your website is so easy with a well documented API instructing to include a style sheet at the top of a web page. What I really like about the service is that it shows a useful speedometer showing how quickly the chosen fonts will take to load on a page request.

YUICompressor

YUICompressor is part of the build script and helps to compress all the JavaScript & CSS files for improved performance. There are examples of how to integrate it with a build script on the H5BP build script or my own build script for this theme.

Modernizr

Saving one of the best till last is definitely the case with this tool, Modernizr is an open source project hosted on Github that aids in providing a consistent user experience across all browsers, new and old, with the cutting edge HTML5 and CSS3 features. Constantly updated, this tool is a JavaScript file that is included at the top of your web page and will tell you which features are available with the browser the user is viewing your website in. There is so many more features baked into this wonderful framework that are covered by the well written documentation, so head over there to find out more about this exciting tool.

So this is it! I am hoping to add more features and improve the blog over time, and also start writing some more blog posts to show y'all what I am working on and hopefully imprint some wisdom. All the code written for my theme is available for viewing on Github, and feel free to use any of it for your own theme or web related project.

Back to Posts

-->