Custom WordPress Theme Design Service can help your Business to shine
10 Tips for Basic Custom WordPress Theme Designing
1. The Frontend
Prior to you begin, allow’s have a look at the WordPress default style and also view exactly how it is structured. Keep in mind of the aspects (header, post title, search kind, navigation, footer, and so on).
2. Photoshop Mockups
Based upon the info compiled from the default style, layout a Photoshop mockup of your blog site. Below I’m utilizing GlossyBlue, among my complimentary WordPress styles, as an instance. Download and install the demo.zip to view the Photoshop data.
3. HTML + CSS
After the PSD style is done, implement a fixed HTML+CSS design template of each web page. You could utilize my GlossyBlue HTML submits in the demo.zip to follow this tutorial. Essence the zip and also have a look at the index.html, single.html, as well as page.html. Later on in the tutorial, I will certainly utilize these HTML data and also transform them right into a style.
Why Create a Static HTML File First?
Primarily considering that it will certainly make the advancement procedure a great deal simpler. I often develop a HTML declare every design template that I require, check it throughout all web browsers, confirm both HTML and also CSS markups, after that all I need to do is reduce & paste the WordPress code. By doing this, I do not need to fret about HTML or CSS pests throughout my style making procedure.
4. How WordPress Theme Works
If you go the default theme folder (wp-content/themes/default), you should see many PHP files (called template file) and one style.css file. When you are viewing the front page, WordPress actually uses several template files to generate the page (index.php << header.php, sidebar.php, and footer.php).
5. Duplicate The Template Files
Copy the GlossyBlue HTML folder into the wp-content/themes folder. Then, go to the default theme folder, copy the comments.php and searchform.php file to the glossyblue folder.
Go to the WordPress default theme folder, open the style.css file. Copy the commented code at the top and paste it to the GlossyBlue style.css file. Change the theme name and the author information as you desire.
7. Splitting The Files
Now you need to understand where to split the file into several files: header.php, sidebar.php, and footer.php. The image below shows a simplified version of my index file and how the markups should split.
Open the index.html file. Cut from the top to where the
<!--/header --> ends, paste it in a new PHP file, and save the file as header.php.
Go to the default theme folder, open the header.php. Copy and replace the tags where it requires PHP code (Template Tag):
Navigation Menu (wp_list_pages)
<li> tags in the
<ul id=nav> with
Back to the index.html file, cut from where the
<form id=searchform> start to the closing tag of
<div id=sidebar> and paste it in a new PHP file, save it as sidebar.php.
<form id=searchform>wrap with
<?php include (TEMPLATEPATH . '/searchform.php'); ?>.
- Replace the category
<?php wp_list_categories('show_count=1&title_li='); ?>
Replace the archive
<?php wp_get_archives('type=monthly'); ?>
Back to the index.html file, cut from the
<div id=footer> tag to the end of
</html> and paste it in a new PHP file, save it as footer.php.