WordPress Developer With Noupe: Everything About Theme Creation

No Picture

Developing WordPress themes on your own is a great thing to do. I remember well how I worked on my first theme, and how much fun it was. Though afterwards, I was in a cold sweat, doing much reworking and bugfixing in order to make it through WordPress´s theme testing procedures. After all, I was very keen to present it to the whole world. Being kind of clueless about WordPress in general back then, all the little helpers out there were unbeknownst to me – helpers that make the work of developers so much easier. To spare you this kind of hardship, I have come up with a list covering the most important plugins and ressources for WordPress theme development known to me.

wordpress-developer-with-noupe-theme-creation

A Good HTML and PHP Editor

atom html editor

A good HTML editor (which is also able to handle PHP, of course) is the be-all and end-all when developing WordPress themes. There are a myriad of different concepts and solutions out there, making it pretty impossible to recommend a single editor. Furthermore, this part of the development process is determined by strong individual preferences. However, we have compiled a list containing the best editors for Mac OS X and Windows recently. So you should be able to pick your favorite there.

Local Web Server Solutions for Your Computer

To be able to develop a WordPress theme on your own, you need a web server structure on your computer, including PHP interpreter, MySQL etc. etc. There are two solutions out there working likewise with Mac and Windows.

Mamp

Mamp - Entwicklungsumgebung

This is a very good, fast, and reliable solution. Mamp comes with Python and Perl built-in, making it possible to run Python and Perl scripts outside the cgi-bin. The configuration works as with conventional web space providers. So you are able to develop your Python and Perl projects offline and upload them to your webspace later on. Mamp is free, and available for Windows and Mac. In most cases you will not feel the need for the pro version.

Xampp

xampp dev environment for wordpress

XAMPP is a free Apache distribution containing MySQL, PHP, and Perl. The XAMPP open source package has been set up to be very easy to install and use. It is available for Windows, MacOS, and Linux.

There is no proper documentation, but a FAQ section for each operating system.

The Basic Foundation of a WordPress Theme

Today, a WordPress theme should be developed using a well-structured, error-free, completely responsive HTML and CSS base. Having a closer look at the WordPress theme directory reveals that recent themes predominantly apply the open source HTML and CSS framework Bootstrap.

Bootstrap HTML and CSS Framework

Bootstrap comes loaded with all modern elements and ressources needed for a modern theme. Furthermore, it provides you with plenty of shortcodes that can be used in the final theme when switching from the visual to the text editor in WordPress.

Bootstrap - overview

Originally developed by Twitter, this framework contains not only most recent technologies like Sass and {less} but also all necessary elements for really cool themes. It can even be modified before downloading.

WordPress Theme Development: Important Links and Resources

There is no such thing as too many helpful links regarding WordPress development – be it understanding the Template Hierarchy or how to test a theme after finishing development. Equally important are all kind of resources and shortcuts that make your life as a developer much easier.

The WordPress Template Hierarchy

[Clicking the image opens a better res version]

Die WordPress Template Hirarchie

Important Links

Dummy Content for Theme Testing

Before finishing your work, it is essential to test the theme for any display errors using dummy content especially developed for theme testing. This way you make sure the theme is able to always display any kind of content. You can choose between two solutions, each test content is proficient.

Generate WP – 21 Tools for Correct Code

GenerateWP Tool for developing WordPress Themes

GenerateWP is one of the most important tools for developing WordPress themes, period. You get 21 tools, all of them producing excellent code. You just choose the necessary tool, go through the navigation, fill out the forms, and finally click „Update Code“. Afterwards you copy the code. Done. GenerateWP provides the following tools and generators:

  • Taxonomy Generator
  • Post Type Generator
  • Post Status Generator
  • Theme Support Generator
  • Sidebar Generator
  • Menu Generator
  • Shortcodes Generator
  • Quick Tags generator
  • Toolbar Generator
  • WP_Query Generator
  • WP_User_Query Generator
  • WP_Comment_Query Generator
  • wp-config.php Generator
  • Plugin Readme Generator
  • Schedule Cron Job Event Generator
  • Register WordPress Scripts Generator
  • Register WordPress Styles Generator
  • Register oEmbed Providers Generator
  • Theme Default Headers Generator
  • User Contact Methods Generator
  • Custom Snippets

how to generate a wp-config.php file with GenerateWP

GenerateWP.com

Browser and Add-Ons

Google Chrome Canary

Basically, you can develop using any browser you like. In light of past experience, though, only Firefox and Google are to be recommended. There is a sufficient variety of add-ons for developing themes available for both of them and each browser displays the websites the way they are developed. Here are the most important add-ons and ressources:

Mozilla Firefox

Google Chrome

FTP Software

FTP programs are very important, you need them to transfer your data to the webserver or the web hosting package. For sure, there are many applications doing this, some well-known, some less so. I have worked with only two solutions, and I can absolutely recommend both of them: FileZilla is free, Transmit for Mac is fee-based.

FileZilla Client

filezilla ftp solution

 

FileZilla is a free software and available for Windows, Mac, and Linux. The look is getting on a bit, but it still does a very good job. It supports FTP, FTP over SSL/TLS (FTPS), and the SSH File Transfer Protocol (SFTP).

Transmit by Panic

Transmit is a charged for FTP software for Mac OS X. It supports FTP, SFTP, Amazon S3, and WebDAV. Transmit 4 sets you back 34 USD, as an upgrade from Transmit 3 it is 19 USD. It is possible to test it for a couple of days free of charge. Besides standard features, the software offers quite a few very useful functionalities, like synchronization between folders on your computer and server, a very high transmission speed, and much more.

transmit-useful-features

Useful Settings for Theme Development

For testing a WordPress theme and getting rid of any PHP errors and notifications, there are some terrific plugins available I highly recommend here. That said, one important setting sits right in the wp-config.php and you should definitely activate it. The ultimate theme test happens live on a web server, it comes in handy to have an unused domain for doing this. However, a prerequisite here is to check the settings of the web server or web hosting package and have the setting “display_errors” set at “On” in order to have the PHP error messages or the infamous PHP Notices displayed. When offline, these settings should be set at „On“ automatically when you work with Xampp or Mamp.

server settings of a webhosting package

For testing purposes the setting should be „On“. When live it should be „Off“.

Activate wp-config.php – WP_DEBUG

wp-config-settings

At about line 91 you will find the setting WP_DEBUG. Usually, it is set to „false“, but it should be „true“ while developing a theme. This way, all error messages will get displayed. If the final theme is to be included in the WordPress theme directory any errors or notices have to be eliminated, meaning „false“ must be activated.

WordPress Theme Tutorials

This is a list with some useful tutorials for those who would like to develop their very own WordPress theme but need some help with it.

Useful WordPress Plugins and Wwidgets

The Developer WordPress Plugin

developer-wordpress-plugin

This plugin is indispensable. It makes sure that all plugins necessary for development are installed, taking into consideration whether we deal with developing a theme or just a plugin.

developer-settings

  • Developer: Automattic
  • Is being continually developed: according to need
  • Latest version: 18.10.2013
  • Works with WP 4.1: Yes, completely
  • Cost: free via WordPress.org
  • License: GNU GENERAL PUBLIC LICENSE
  • Interaction with other plugins: not known
  • Developer homepage: not known
  • Download at WordPress.org

Theme Check

theme-check-plugin

Using the Theme Check plugin you can test your theme according to the standards of the official WordPress Theme Reviews. Of course, that´s especially important if you want your theme to be part of the official WordPress.org Theme Directory, because all submitted themes undergo thorough testing using those guidelines.

  • Developer: Samuel Wood
  • Is being continually developed: Yes
  • Latest version: 22.12.2014
  • Works with WP 4.1: Yes, completely
  • Cost: free via WordPress.org
  • License: GNU GENERAL PUBLIC LICENSE
  • Interaction with other plugins: not known
  • Developer homepage: not known
  • Download at WordPress.org

Log Deprecated Notices

log-deprecated-notices

This plugin looks for outdated (deprecated) files, features, and function arguments. It will log any found „errors“ and suggest alternatives.

  • Developer: Andrew Nacin
  • Is being continually developed: Yes
  • Latest version: 02.09.2014
  • Works with WP 4.1: Yes, completely
  • Cost: free via WordPress.org
  • License: GNU GENERAL PUBLIC LICENSE
  • Interaction with other plugins: not known
  • Developer homepage: not known
  • Download at WordPress.org

Debug Bar

This one puts an add-on to the upper admin bar, displaying queries and cache usage. If WP_Debug is in the On position, this plugin additionally tracks PHP warnings and notices, making them easier to spot.

  • Developer: wordpressdotorg
  • Is being continually developed: Yes
  • Latest version: 02.09.2014
  • Works with WP 4.1: Yes, completely
  • Cost: free via WordPress.org
  • License: GNU GENERAL PUBLIC LICENSE
  • Interaction with other plugins: not known
  • Developer homepage: not known
  • Download at WordPress.org

Monster Widget

monster-widget

A very useful plugin that virtually ensures you will not forget to bring any WordPress Core Widget to life with some design. It integrates all 13 widgets into one widget at the side bar helping designers to perfectly design their widgets and to not forget any. It is not meant to be used in a productive environment, though, as it relentlessly brings up all the widgets possible.

  • Developer: Automattic
  • Is being continually developed: Yes
  • Latest version: 16.12.2014
  • Works with WP 4.1: Yes, completely
  • Cost: free via WordPress.org
  • License: GNU GENERAL PUBLIC LICENSE
  • Interaction with other plugins: not known
  • Developer homepage: not known
  • Download at WordPress.org

Plugins Without Recent Updates: Test for Yourself

Two crucial plugins for the development process did not get any updates for some time. That does not imply they will not work with more recent versions of WordPress. I just recommend installing these plugins and test for yourself whether they run error-free with your installations.

Codestyling Localization

codestyling-localization-plugin

This plugin is without doubt one of the best ones regarding translations. If you want your theme to be part of the official directory, it should be developed in English. Afterwards, you still can translate it to any language you want depending on your target market. Here are some detailed instructions for this plugin.

  • Developer: codestyling
  • Is being continually developed: No
  • Latest version: 06.02.2013
  • Cost: free via WordPress.org
  • License: GNU GENERAL PUBLIC LICENSE
  • Interaction with other plugins: not known
  • Developer homepage: Codestyling Localization
  • Download at WordPress.org

Debogger

Debogger Plugin for WordPress

A very simple but useful tool for debugging (finding bugs and fixing them) WordPress themes. It gathers all bugs and displays them at the footer of the WordPress admin front end. Additionally, it provides a W3C validation for the theme.

  • Developer: Simon Prosser
  • Is being continually developed: No
  • Latest version: 15.11.2010
  • Cost: free via WordPress.org
  • License: GNU GENERAL PUBLIC LICENSE
  • Interaction with other plugins: not known
  • Developer homepage: nonexistent
  • Download at WordPress.org

Conclusion

Hopefully, by reviewing the featured software, plugins, and resources, I was able to give you enough background to develop your first WordPress theme from scratch. You can go ahead and check out the download and knowledge sources I provided here. Naturally, it is possible that I forgot something important. If that´s the case, please post links and a short description in the comments section below.

Related links

Tutorials on Developing WordPress Themes

(dpe)

Andreas Hecht

Andreas Hecht is a journalist and specialist for WordPress and WordPress Security. He roams the web since its inception. He has published an ebook on WordPress Security, which you might want to take a look at.

Sort by:   newest | oldest | most voted
Teelah
Guest

Thanks for the share, very useful & helpful!

Billal Ahmad
Guest

Incredible! thumbs up for this.

Victor
Guest

Very useful and complete tutorial, nice work, thanks you.

wpDiscuz