How To Design Your Own Template And Convert It Into A WordPress Theme

WordPress as one of the most popular content management systems is extremely user-friendly and offers limitless features to enhance the functionality of a website. If this isn’t enough, WordPress also lets developers design their own web templates and convert the same into a WordPress theme. Converting a web template into a WordPress theme isn’t very difficult if a step-by-step procedure is followed. To create a web template, a developer needs to have ample knowledge of CSS. Knowing Cascading Style Sheet is the first step for designing a template. Of course ability to use image processing software such as Photoshop helps in making attractive website designs.

WordPress is based on PHP and thus to convert a web template into a WordPress theme, it is important to know the scripting language properly. Knowledge of PHP also helps to retrieve or call WordPress data elements and it makes editing easier too. However, it is advisable to download WordPress into your local computer before starting with the conversion process.

Steps To Follow for Converting a Web Template into WordPress Theme

• First you will have to create an empty folder to save all your template-related files which will include .CSS files as well as .PHP files. Basically in the WordPress theme folder you will have three kinds of files: an XHTML template file, one CSS file and one images folder. Save the XHTML template file as ‘index.php’ and the CSS file as “style.css’ file. Stick to these files names as WordPress identifies these names and detects the template accordingly.

• Before progressing further with the conversion process, add the WordPress theme information into your style sheet. You will have to give necessary information such as name of the template, description of the theme, URL of your homepage, etc.

• Once the basic details are fulfilled, copy all the content from the original CSS file to the newly created style.css file.

• Since we are using PHP, it becomes necessary to slice the HTML file into at least four different sections. The four different sections are header, content, sidebar and footer; each of them has to be a different file that will be recalled using PHP. The four files will have to be named as ‘index.php’, ‘header.php’, ‘sidebar.php’ and ‘footer.php’. These will be saved in the theme directory.

• After creating individual files, you need to copy the content from the original ‘index.html’ file into the four files. Remember to copy only the necessary content from the original ‘index.html’ file into individual files. For example, take the ‘sidebar’ content from the index file and save it into the ‘sidebar.php’ file.

• Now we have four separate files, these need to be integrated with the original ‘index.php’ file. For this you will need to use PHP once again and give the command <?php get_header(); ?>; ?>, <?php get_sidebar(); ?>; ?>, <?php get_footer(); ?>; ?> etc. to help the index file fetch the relevant file from the directory. If you want to make changes in the footer or header of the template, you can do so in the designated file without touching the ‘index.php’ file.

• The next step is to add the Loop function for recalling and displaying posts from the database. For this, WordPress uses the Loop PHP function. You will need to copy and paste all the code in the <div> tag inside ‘index.php’ so that all the content appears when recalled. To enable this feature you will have to add the current post’s title and other information such as date, periods, lengths, etc., write a tag to display the content and suitably place an ‘end tag’ to end the Loop.

Converting a web template into a WordPress theme is a highly technical job and requires ample knowledge of the scripting language PHP and the markup language HTML. If you want to make your template different from the rest, knowledge of PSD would also help. The entire process is also time-taking. It is advisable to take the help of an experienced person for doing this niche job. Experienced WordPress developers have the know-how on the step-by-step process and can easily convert the web template without any coding errors.