Site Navigator

Getting Started with Theme Development in WordPress

On the pretext of sounding like broken record, we say it again – WordPress is huge! Over 74,652,825 and counting user base is a reigning proof of WordPress popularity. So what makes WordPress so popular? Among other reasons, themes are one of the major reasons of its popularity. And if you are looking into ways … Continue reading Getting Started with Theme Development in WordPress

Tag Archives: Tips

Getting Started with Theme Development in WordPress

On the pretext of sounding like broken record, we say it again – WordPress is huge! Over 74,652,825 and counting user base is a reigning proof of WordPress popularity. So what makes WordPress so popular? Among other reasons, themes are one of the major reasons of its popularity. And if you are looking into ways to get a complete and functioning WordPress theme, this post is right up your alley.
Check out below to understand how you can get started with theme development in WordPress.
Themes in WordPress
You can get all the front end styling for your website from WordPress themes.
These themes provide:
1. Style of the site
2. Colours
3. Font Styling
4. Widget locations
5. Page layouts
6. Styles for blog posts and blog archives
Naming a WordPress theme
You should be aware of WordPress’s directory structure to build a theme in WP. You have to create a sub folder in the wp-content/themes directory in WordPress folder. The name of the sub folder created should match with the name of the theme you need to create and that name should be unique in the theme folder.
Keep a HTML document ready with you to develop a theme in WordPress and place the HTML file with its assets (CSS and JS) in the theme directory.
Breaking up the HTML template into PHP files.
This step involves creating four PHP files. We have to create index.php, header.php, sidebar.php and footer.php by breaking the HTML file into four parts using the HTML file and save them in the same theme folder. Create another file in the same directory style.css for styling purposes.
How these files work is shown below :
header.php : It contains the code for the header section of the theme.
Index.php : It is the main file and it contains the code for the “Main Area” and it will specify where the other files will be included.
Sidebar.php : It contains the information about the sidebar.
Footer.php : It handles your footer.
Style.css : It will handle the styling of new theme.

header.php

<html>
<head>
<title>My Theme</title>
<link href=”<?php echo get_template_directory_uri(); ?>/css/header .css” rel+”stylesheet” type=”text/css”/>
<script language=”javascript” type=”text/javascript”src=”<?php echo get_template_directory_uri(); ?>/jquery-1.8.3.js”></script>
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<h1>HEADER</h1>
</div>

index.php

<?php get_header(); ?>
<div id =”main”>
<div id=”content”>
<h1>Main Area</h1>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

sidebar.php

<div id=”sidebar”>
<h2 >Sidebar Area</h2>
</div>

footer.php

<div id=”footer”>
<h1>FOOTER</h1>
</div>
</body>
</html>

Now let us see what each of these files contains.
By calling a few below functions, you can fetch HTML template into index.php
1. To call header.php, use get_header()
2. To call footer.php, use get_footer()
3. To call sidebar.php, use get_sidebar()
4. To provide the full path of the theme directory to access the style sheet and scripts use function : get_template_directory_uri()
5. To show the title of the post use function : the_title()
Below WordPress predefined function is used to fetch the post in HTML theme.
This function is used to fetch all the contents and the titles of the posts, along with the time when these were posted. You then need to place the above code in HTML template accordingly and you are done!
Netrouting is committed to fulfil the mission critical IT demands for Web Hosting platform using the best hardware available, spread over multiple data centers to ensure the quality and availability of your blog and website. Netrouting utilizes a Cloud based infrastructure for offering its Web Hosting service. Redundant storage, daily backups and automated fail over is included with its packages. Get in touch with us now!

Our valued customers

What customers say about Netrouting

Andre Sannes,
Owner Klik ICT

I have had my hosting and servers managed by Netrouting for many years now and I am very content with... Read more

Danny Bogaards,
Owner Boware IT

Netrouting has provided us with reliable Colocation services since September of 2008. They did a great job delivering flexible and stable... Read more

Irene Maragaki,
CEO, Hostsun

If you are running a hosting company you need to have a dependable vendor. I’ve been hosting several servers with them... Read more

Paul Groeneweg,
Owner Pazion IT

Thanks to the hands-on mentality of Netrouting we are able to completely manage our servers remotely. Even in case of... Read more

Ronald Boot,
Owner Terrabyte BV

We have worked together with Netrouting for nearly 10 years now, and for good reason. Their positive approach and can... Read more

Paul Bint,
CEO, ColoHouse

ColoHouse is certainly fortunate to have a valued business partner such as Netrouting in our Miami facility. Netrouting has a... Read more

Get to know Netrouting Datacenters

Take a virtual tour of datacenter Spijkenisse, The Netherlands.

Do you have any questions?