Your first endeavour in creating a WordPress theme from scratch can be a painstaking one, especially when you have little or no experience in the necessary skills which you may require. But let me tell you that you may not require to sweat it out so much, as there are easier ways of doing it and perhaps much easier than you could contemplate. So let me tell you about a shortcut for doing it.
- Create the basic layout of your theme by downloading the CSS file of a readymade theme which you may like. Plenty of options are available once you Google it. Instead of focussing on other elements like colour, fonts, images etc. it is better to concentrate on the layout first.
- Be sure to download at least 2 to 3 options and make a test site to see how the layout looks and if the theme does not turn up to your expectations, replace it with another. Try placing the same text on different themes to see who it looks. One you have selected the best layout it’s time to get going.
- Save your selected theme in a new folder within the wp-content/themes Now you need a good text editor to start editing the theme code. I would recommend notepad++ for this. Now open the css file in the text editor and rename the header section to something of your choice like “Ground Zero” or maybe anything, it hardly matters as long as it is different.
- Keep in mind the copyright of the theme, as you sure don’t want a legal mess. If you are making drastic changes to the theme then you can overwrite your own name or else leave the designer’s name intact.
- Now you can upload your new theme folder on your website. You can find your new theme in the presentation under the administration panel. Select and activate your theme and bingo. Your test page is ready.
- Now it’s time to start with the editing of the code for which you have to understand the layout and structure of your site by examining the source code and style sheets. It is always advisable to take a backup after any change to avoid starting all over again if you lose your way in-between.
Firefox which is a popular browser has opened another window of opportunity for people who want to edit a website by providing the Firefox Web Developer Extension tool which provides live editing of style sheets plus a whole lot of features.
Now let’s proceed further.
- Now generate a test post in your browser.
- Now what you have to do is to copy HTML tags, ID and class selectors from the top to the bottom of the site within the text editor page. These are the features which form the basic architecture of your site which you can change and are collectively called the style sheet.
- If required, you can add the selectors to sections which lack them like the template tags that generate various lists within the sidebar or footer. Now you need to add these to various modular template files inside your test theme folder.
- Varied tags can appear on different views in your test theme. You have to check properly the pages which have been generated by the front page, archives, single, category, search and page views to look for more selectors and tags.
- After you finish the list, you can save the changes under the filename css and then replace the original style sheet of the theme.
- Now when done, you can start to apply styles to various structural HTML tags, class and ID selectors inside the css.
Now after all this effort you can be proud of your new theme. I hope that I have been able to provide sufficient help in addressing to all possible aspects of creating a WordPress theme from ground zero. I am open to suggestions and feedbacks from readers.
Author Bio.:- Priya is a Technical SEO at Hopinfirst, a leading mobile app development company which provide best ios app development and Android app development Services.