Have you been planning to start your own WordPress site or blog? Then, most likely your next step will be to search one perfect theme for your site. However, browsing through thousands of WordPress themes out there and picking one that suits your website can be a difficult task.
Well, it takes time to search through all the themes and then trying figuring out how to customize the theme to make it fit to your website. Won’t it be better if you’ll create your own site? It certainly is, if you know even a little bit of HTML/CSS you can definitely create your own WP site or blog.
Think yourself wouldn’t you like to have complete control over the appearance of your theme. Besides, WordPress comes with plenty of built-in capabilities that you can use as it will enable you to handle standard blog functions automatically. Here’s a rundown of the steps that will help you know how to create your own WP theme from the very beginning:
Moving Your Design Idea to HTML
Ok, so you’ve got some design idea for your theme. Then, you can perhaps think of designing a custom WP theme using that particular idea. You can begin with sketching your design roughly, and then later make use of the photo-editing software – Photoshop to prepare a design mockup. Once you’re done with the designing part convert your design to HTML/CSS code.
Now, you might be thinking as to why you can’t directly convert your Photoshop designs to WordPress theme. Well, the answer to this is very simple. You may build a highly captivating design but bringing it directly to WP platform might create some issues at a later stage. By converting your Photoshop to HTML, it will become for you to incorporate an effective CMS into the website as and when you desire.
Converting HTML/CSS into a WordPress theme
So, now as you’ve tested your web page on browsers and have created your CSS stylesheet and laid out HTML file in accordance to the WP DIVS, it’s time to opt for HTML to WordPress Conversion Service. Let’s have a detailed look as how we need to perform this conversion:
Step 1 – Laying the Foundation
The first step requires to grab all the files from the WordPress default theme. Create a theme folder “\wp-content\themes\default”, and name it with same name as your theme. For example, let’s say you created a theme named “MyfirstWPtheme”, then copy all the files to wp-content\themes\MyfirstWPtheme.
Next, create two files in the folder that you’ve just created, and name the files as style.css and index.php. While style.css is your primary CSS file, index.php is the equivalent of index.html used in HTML pages.
Index.php file will contain all the code for the main content of your blog page.
Furthermore, to ensure WordPress identify your theme make sure to include information such as theme name, description, url, version etc. within a comment block inside the style.css file.
Step 2 – CSS Files
Open your WP admin panel and the first screen will open a WP dashboard window. Make sure that your blog theme is set as an active theme. Subsequent to it, click on Appearance >> Editor from your WP dashboard and open the default style.css file. Copy the content of this file to your own CSS file you’ve just created in the theme folder.
Step 3 – Setting up PHP Files
Once you’ll open the WP theme editor, you’ll see that WordPress theme is divided into separate elements such as header.php, footer.php, index.php and so on. Now, we will also follow this same basic structure for our theme.
- Divide your HTML code into different sections namely header, footer, sidebar, and content. You can use <div> tags to divide these sections.
- Create three additional files named header.php, sidebar.php and footer.php, in your theme folder. Next, copy the entire content of your HTML sections to their respective files. For example, the content of header section will go to header.php and so on.
- Next, copy the PHP code and paste it into the newly built header.php file.
Similarly, past the php code into newly created index.php, sidebar.php and footer.php files, in your theme directory. However, certify that you paste the PHP code before the HTML.
This is just the basic structure of the WordPress theme. In order to create a complete web page we will need to fetch individual elements in our index.php file.
Step 4 – Retrieve Page Elements
Open the index.php file and add the following code to the top of the file, just after following the <body> tag:
<?php get_header(); ?>
The above code will call a built-in WordPress function to get all the code from the header.php file and and display it. Make use of the same code to fetch content for your sidebar and footer sections.
To do so put the code as shown below to the bottom of index.php page, prior to the </body> tag:
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Ok, so now you have your WordPress theme is almost ready! But wait your theme is empty and doesn’t contain any content. And to add content you will need to use the WordPress – loop function.
Step 5 – Final Step
You’ve come up with a fully-functional WP theme that can retrieve and display content from the database. Now, you only need to activate the theme.
For this purpose, open up a FTP client and access your site directory, by getting logged in to the directory.
http://www.markupcloud.com/
Click on wp-content >> themes folder. Upload your newly built theme folder (i.e. MyfirstWPtheme) to this folder (i.e. themes). Once you’ve uploaded the complete folder, sign in to your WP admin panel and navigate to Appearance >> Themes tab. You’ll be able to see your theme.
Just click on ‘Activate’ and that’s it you’ve your first custom WordPress theme ready!
Following the above mentioned steps will surely help you know as how to build your own WordPress theme from scratch, customized as per your needs.
[author][author_info]Author Bio: Jennifer Pinto is a web design expert in Markupcloud Ltd. And had years of experience in writing informative write-ups on different Markup conversion processes. Jennifer possess best possible understanding of web design technologies and aims at sharing her knowledge in Facebook and Google+ with interested readers.[/author_info] [/author]