How To Create Your Own WordPress Theme

To create your own wordpress theme, you will need the following:

(i) A theme which serves as an inspiration. Choose your favourite site, which gets 1 million page views a day.

The advantage of selecting a well known site is that their coding is usually upto date. Also, because several people work on these sites, their work is well commented. Also, the placements of elements is done after a lot of thought and experience. Even the google adsense code is placed in ‘heat areas’ where there will be maximum clicks.

Be sure that we are not copying the site’s design. We are only using its framework such as the structure of the header, sidebar and body and to decide the placement of the data. Your site should not resemble your inspiration in any way.

(ii) Macromedia dreamweaver. You can download a trial version if you can’t afford the paid version.

(iii) EasyPhp. This is a great free programme which converts your windows desktop into a webserver with Apache, PHP & MySql. You can do everything on this that you can do on your web server and so it is ideal for testing purposes.

(iv) Firefox and an extension called “web developer”. Web developer lets to view the css information of the web page. This is invaluable when you are trying to see the elements of the page that you want to change.

Steps:

(i) Install Dreamweaver & Easy Php. In Dreamweaver, create a site called “test” using the www folder of EasyPHP folder.

(ii) Using firefox, save the page of the website you want to emulate on your site’s root folder i.e. the folder called “test”. All the relevant files such as the html/php pages, the css files, the images etc will get saved.

(iii) Open the page in dreamweaver. You will see that there is a lot of javascript & flash code. Delete all of that. Familiarize yourself with the structure of the page such as the header, sidebar, footer etc.

(iv) There will be several css files. Open all of them and copy the coding into one file called “mysitecss.css”. There will also be css elements within the page that you have saved. Copy them as well and paste them into the same css file.

(v) Now, change the div and class elements on the page to suit your requirements. Refresh the page with every change to see what it looks like. You can remove the logo and substitute your own. You can increase or reduce the width or height of the page. You can install or remove the search box. The idea is to use the web page as a base and see what happens when you make changes thereto.

(vi) Once you have removed all the unnecessary elements, you will find that there are at least three elements that make up the webpage – the header, the sidebar and the footer – hopefully these will be nicely commented. Copy each of the three elements and paste it into their respective header.php, sidebar.php and footer.php files.

(vi) Make a copy the default theme (I chose twentyten theme because I like its simple and clean design) and name it with description and date to aid identification (e.g. name the copy as mysitetheme_020612). Open the style.css file and change the theme name to reflect the new theme name. Also change the theme uri and author name. Open the screenshot.png file in Paint (or other image editor) and change it in some way to make your mark. The theme name & screenshot will now appear distinct in wordpress dashboard.

(vii) In your new theme, rename the header.php, sidebar.php and footer.php with the suffix _bu (e.g. header_bu.php). Then, take the header.php, sidebar.php and footer.php that you salvaged from the website page and paste it into your new theme. Link the css files to the new theme.

(viii) Now, its a simple case of making changes by tweaking the css and the html elements in the page to suit your requirements. You access your pages on your localhost through easyphp and even preview in dreamweaver. However, this can be a time consuming exercise and you will need a lot of patience. Typically, some troublesome css elements will test your patience.

(ix) Use the “view style information” in the firefox extension “web developer” to see what the css elements are change them to suit your requirements. The web developer extension for firefox proves invaluable for trouble-shooting.

(x) Test your output in different browsers such as firefox, chrome, internet explorer, safari etc to ensure that there are no glitches. Also access the theme on the mobile phone to ensure that it renders well.

(xi) At the end you must ensure that your site does not resemble the original site in a misleading way because that can cause embarrassment and trouble.