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">
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">
header
</div> <!– close header –>
<div id="content">
Next, Part 3 – Index . [tags]diy, how to, skin, theme[/tags]
azraai says
dari ko wat tutorial mcm ni. baik ko terang satu-satu tag template WP. bukan semua org faham kal wat tutorial mcm ni.
Undertypo says
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.
novatech says
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 :)>-
dinswok says
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!
CypherHackz says
[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. 🙂
goggle says
A better explanation of the tags would be really useful 🙂
CypherHackz says
for the tags, you can learn them here:
http://codex.wordpress.org/Template_Tags/
mr.eims says
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..:)
rohaza says
yang ni dah cukup bagus…
Bertie says
A wonderful job. Super helpful inofrtmaoin.
Anne says
oh my poor brains..though that article is really helpful but PHP code from “Part 2 – Header” is really awesome.Anyway, Thank you!!!
Senpai says
i cant proceed part 2…hard la
Dana says
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.
Tor-Arne says
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.
Arif says
Good share about make a themes wordpress
Kimbah says
Thank you for sharing such a good tutorial 🙂
Umar says
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.
peter says
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!
Stefan says
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!
Christian Voigt says
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 🙂
amran says
This is too much helpful . Thanks for this tutorial..
Matt says
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.
DvorakSarjinааы says
Всем Привет! Заходите на wmr-wmb.ru заработок в сети | заработок 2011 | вид материалов для ucoz| рипы и адаптации| авторские статьи| авторегер почты|обзоры новинок|заработок на кликах.
Braxton says
I can not see all the code blocks. They seem to just run on, but if I try highlighting them not addition information is displayed making this and the rest of this tutorial useless. 🙁 Can you please fix this. I have used this set of tutorials in the past and they worked great, I wish to use them again.
lorraine says
same here -can’t see all the code lines
so have to abandon this one – bugger – was best I have found so far
tried it in FF and Opera – code disappearing under rhs sidebar and highlighting don’t fix it
hope you can get to it?
regards
L