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.
[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!!!
[...] Part 2 - Header [...]
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.