Jump to content
xisto Community
Sign in to follow this  

Making Wordpress Themes :part 2

Recommended Posts

This is the next post to the series of the wordpress theme tutorials

in this post i'll cover the working and arcitecture of the wordpress header

To begin with the header of wordpress you should know all the files and scripts related to it so you caN WORK ON IT.


The main hearder scripts recides in the header.php file in the template directory.

Header style attributes are also given in style.css as(for the default template):

#header {	background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;	}//Thus you can change header image by changing the above image link#headerimg	 {	margin: 7px 9px 0;	height: 192px;	width: 740px;	}
to find header related styles(default theme) look for css selector of name #header and #headerimg(for background) and there more custom selectors you can add for your header for example:

#header h1 {	color: #fff;	border: none;	font: normal 24pt verdana;	padding-left:230px;	padding-top:50px
There could more or less css selectors ( according to your styling) as in the classic theme we only have one that is :

#header{	background: #90a090;	border-bottom: double 3px #aba;	border-left: solid 1px #9a9;	border-right: solid 1px #565;	border-top: solid 1px #9a9;	font: italic normal 230% 'Times New Roman', Times, serif;	letter-spacing: 0.2em;	margin: 0;	padding: 15px 10px 15px 60px;}
Now coming to the the file header.php:

this php script is the backbone of your header it contains :



Header image/background

Executes the CSS style

anchor to main page : blog. get_settings('home')


You can include functions like wp_list_pages so you also can have a menu within a header..

You can customise that menu with the style.css

Now To undesatand and learn to make a basic customized header visit this link: http://forums.xisto.com/no_longer_exists/

also this link to make a good advanced header http://forums.xisto.com/no_longer_exists/

Now you've must got a good understanding of the wordpress headers


As index.php is main theme file be sure to include the header file by uising get_header() function


<?php get_header( $name ); ?>// when name is specified or<?php get_header(); ?> //when there is no name , by default it is ()
You can also use different header for different pages


<?phpif ( is_home() ) :  get_header('home');elseif ( is_404() ) :  get_header('404');else :  get_header();endif;?>

Visit https://codex.wordpress.org/Function_Reference/get_header to know about get_header function.(premade ready to use function designed for wordpress)

Visit https://codex.wordpress.org/Function_Reference/ to know about all the premade functions for wordpress

Next post : working with the sidebar > continued....

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.