Seattle Web Design Seattle Web Design

WordPress Theme #2


WordPress Custom Theme – Header

In the part 1 of this tutorial we learned how to install WordPress CMS, Set it up, thumbnail, and favicon. Now it is time to go further and keep converting different piece of parts.
In part 2 you work on header part of your website. You need to replace some html parts in it. Also you need to add your HTML template styling sheet to the Desktop WP Website’s styling sheet and upload it to your theme on server.

Style.css file

This file is located in root of your folder theme and you need to replace your CSS codes with some parts of it. All you should do is
In Desktop WP website open style.css
From line right after your top comments to the “BEGIN WORDPRESS-GENERATED SELECTORS” delete all codes, then copy and paste your template website CSS codes into it (the same location). DO NOT TOUCH CODES LOCATED UNDER “BEGIN WORDPRESS-GENERATED SELECTORS” SECTION.
If you check your WP website, it looks wholly mess. Do not worry because it is what we should fixed to make it neat and pretty like as your HTML website.


Index.php file is WordPress main file Index.php is the file you should work on. If you fix and convert index.php, header.php, and footer.php to look like your HTML website, you pass 50% of your conversion.


Time to convert header.php

Open header.php from your HTML template in your text editor. Also, open header.php from desktop WP website. Compare them and embed different part of your HTML template to the Desktop WP Website. To do so, you need to know some generic rules:
1-      <?php bloginfo('template_directory'); ?> is a URL substitution for the Theme Folder. Use this piece of code before all images
2-      <?php bloginfo('name'); ?> is a URL to your website and NOT your theme.
3-      <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" /> is what you need to link your HTML coding to style.css file
4-      Put <?php wp_head(); ?> right before </head>
5-      Put <?php body_class(); ?> to the <body>. It should be looked like
<body <?php body_class(); ?>>
6-      Use <?php echo get_option('home'); ?> whenever you want to create a link to your website’s home page.
7-      <?php echo date ('l – F d, Y'); ?> shows today’s date
8-      Use this code to link your Favicon to your website
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

Convert everything properly, you need to compare two header.php files and make your changes carefully. After finishing this part you should have a neat and organized header part.

The other parts are messy and we still did not touch navigation. I will teach you how to convert navigation in tutorial PART 3.



Leave a Reply

Kianoush Facebook Profile Kianoush Google Plus Profile Kianoush LinkedIn Profile Find Kianoush Twitter