You are reading Make your Own WordPress Theme – Part 2. To read other parts, click on the link below.
- Part 1 – The Layout
- Part 2 – Header
- Part 3 – Index
- Part 4 – Comment
- Part 5 – Sidebar
- Part 6 – Footer
- Part 7 – Finish!
Part 2 will be more detail on things and functions needed to put in your WordPress header file. Open your header.php file.
-
-
<html>
-
<head>
-
<title>My WordPress Theme</title>
-
</head>
-
<body>
-
<div id="wrapper">
-
<div id="header">
-
</div> <!– close header –>
-
<div id="content">
-
Now, we are going to put wordpress functions into our header. We start with the title first.
Because WordPress is dynamic, so we can make our site has dynamic title by put this <?php wp_title(); ?> between <title> and </title>. This tag is use to call the title of the page.
-
-
<title><?php wp_title(); ?></title>
-
But to make the title more interesting, we use the title tag with other PHP codes.
Just copy and paste this code between <title> and </title>.
-
-
<?php wp_title(”); if (function_exists(‘is_tag’) and is_tag()) { ?>Tag Archive for <?php echo $tag; } if (is_archive()) { ?> archive<?php } elseif (is_search()) { ?> Search for <?php echo $s; } if ( !(is_404()) and (is_search()) or (is_single()) or (is_page()) or (function_exists(‘is_tag’) and is_tag()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo(‘name’); ?> – <?php bloginfo(‘description’); ?>
-
And it will look like this
-
-
<title>
-
<?php wp_title(”); if (function_exists(‘is_tag’) and is_tag()) { ?>Tag Archive for <?php echo $tag; } if (is_archive()) { ?> archive<?php } elseif (is_search()) { ?> Search for <?php echo $s; } if ( !(is_404()) and (is_search()) or (is_single()) or (is_page()) or (function_exists(‘is_tag’) and is_tag()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo(‘name’); ?> – <?php bloginfo(‘description’); ?>
-
</title>
-
The next thing that we will do is to import our stylesheet file to be use in our theme.
-
-
<?php bloginfo(‘stylesheet_url’); ?>
-
This tag will return our stylesheet url. Put this tag after </title>. But make sure that your CSS file named with style.css.
-
-
<style type="text/css" media="screen">
-
<!– @import url( <?php bloginfo(‘stylesheet_url’); ?> ); –>
-
</style>
-
There are some other tags that we need to put in. Just copy this code below and paste it before </head>
-
-
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url’); ?>" type="text/css" media="screen" />
-
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo(‘name’); ?> RSS Feed" href="<?php bloginfo(‘rss2_url’); ?>" />
-
<link rel="pingback" href="<?php bloginfo(‘pingback_url’); ?>" />
-
<meta name="generator" content="WordPress <?php bloginfo(‘version’); ?>" />
-
Last thing that we need is to put <?php wp_head(); ?> in header.php.
Finally, your header.php file will look like this.
-
-
<html>
-
<head>
-
<title>
-
<?php wp_title(”); if (function_exists(‘is_tag’) and is_tag()) { ?>Tag Archive for <?php echo $tag; } if (is_archive()) { ?> archive<?php } elseif (is_search()) { ?> Search for <?php echo $s; } if ( !(is_404()) and (is_search()) or (is_single()) or (is_page()) or (function_exists(‘is_tag’) and is_tag()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo(‘name’); ?> – <?php bloginfo(‘description’); ?>
-
</title>
-
-
<style type="text/css" media="screen">
-
<!– @import url( <?php bloginfo(‘stylesheet_url’); ?> ); –>
-
</style>
-
-
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url’); ?>" type="text/css" media="screen" />
-
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo(‘name’); ?> RSS Feed" href="<?php bloginfo(‘rss2_url’); ?>" />
-
<link rel="pingback" href="<?php bloginfo(‘pingback_url’); ?>" />
-
<meta name="generator" content="WordPress <?php bloginfo(‘version’); ?>" />
-
-
<?php wp_head(); ?>
-
-
</head>
-
<body>
-
<div id="wrapper">
-
<div id="header">
-
</div> <!– close header –>
-
<div id="content">
-
Next, Part 3 – Index . [tags]diy, how to, skin, theme[/tags]
If you enjoyed this article, get latest updates via RSS feed or by email.
dari ko wat tutorial mcm ni. baik ko terang satu-satu tag template WP. bukan semua org faham kal wat tutorial mcm ni.
Yeah, I think you better explain more about all the tag that you use in header.php.
If there is A newbie that trying to create a wordpress theme, do you expect he just copy and paste all the code? At least he/she need some explanation regarding all the coding.
i think this is already good, the structure of theme.
go read youself at wp codex for more explaination for the function used
“good programmer learn from examples”, and always use multiple sources
good luck :)>-
yeah… this is just the rough explanation. Any details regarding the meaning of each code can be found somewhere else. But… hmmm.. i wish i could read all those details here. Haha!
[Comment ID #15604 Will Be Quoted Here]
okies. aku dah start kat part 3. sudi2 la men’review nyer. :d
[Comment ID #15610 Will Be Quoted Here]
same2. check out my 3rd part.
A better explanation of the tags would be really useful
for the tags, you can learn them here:
http://codex.wordpress.org/Template_Tags/
hurm..bagus..bagus..ko nie rajin btol..hehe
mesti ko dah expert ngn sume tags2 dlm WP nie..hehe..
buat la theme utk latest WP plak..:)
yang ni dah cukup bagus…
oh my poor brains..though that article is really helpful but PHP code from “Part 2 – Header” is really awesome.Anyway, Thank you!!!
i cant proceed part 2…hard la
Thank you for this tutorial, though it may behoove you to actually listen to your audience. You have multiple requests here for better explanation of the information presented. Though the lesson may be straight forward for you, I’m assuming you wrote this tut for your readers to read…not simply for yourself.
I was surprised that you simply said “copy and paste this code”. That doesn’t necessarily constitute a tutorial and judging by your readers’ comments, they’re letting you know that, as well. Taking into account feedback from your audience will only strengthen you…you may want to listen.
Hi! I am having trouble making the CSS work, what might be the problem? It just wont work. Everythings shows up and all, but just under each other.
Good share about make a themes wordpress
Thank you for sharing such a good tutorial
Hi,
I made everything the tut said….in the i got this..
Fatal error: Call to undefined function get_header() in D:\wamp\www\wp\index.php on line 1
now i made the header file with name: “header.php”,
so what is that I am doin wroing…
I would send you the file but i cant find any place to attach it & send it to you.
Thank you.
tutorial – teaching others something in layman’s terms. Once you start throwing all the extra code in without saying what the hell it is or does you lose people. I’d like to understand what I’m coding before I throw things out there!
Thx sooo much! I forgot the in my header.php and was wondering why the lightbox 2 plugin did not work properly. Now i fixed it and lb 2 works fine. You made my day!
I really don’t get what some of you are complaining about. This tutorial is extremely helpful.
And you can copy and paste the lot and have a working template too, don’t even need to be brainy for that.
But nobody can teach you to understand things, for this you have to work, work and work some more.
You don’t get what the more interesting title code does? Dont’t use it, the simple version is there too. Use that.
You want to learn how it’s done properly? Take apart the more complex code and try to understand what is being done there. If you can’t, then you have some more work to do, like learning php and how to read and work with manuals and api’s. There is nothing here but simple php logic and well documented WordPress Template-Tags
You really can’t expect this to be part of any tutorial. That would be enough material for several books. Books which have already been written at that.
Thanks for this tutorial, it helped me get in tune with wordpress-template-programming. I will now wolf through the api-docs
This is too much helpful . Thanks for this tutorial..
I’m completely new to this. I have extremely basic html programming experience from about 10 years ago and I found this helpful. I realize that I need to learn to do some things to really understand what’s going on here. After looking at some of the tags here, there is simply no way the author can explain the code in any detail and not have this part of the tutorial end up waaaaaaaay too long. That’s my take. Happy code hunting. Make it fun and learn what you can.