How to create a Wordpress Template or Theme

Step Five: Miscellaneous Important Stuff

One very large important factor I have failed to mention so far is how to link properly to certain things - namely stylesheets. Now, remember in our original template code, the stylesheet link was your everyday


<link rel="stylesheet" href="global.css" />

Well, that won’t work here. Because your files will no longer be located in the root of your site, leaving the link like this will cause your stylesheet to not be picked up by the browser. This is a bad thing. You must “Wordpress” this link! Since you will always have a default stylesheet (styles.css - see step two!), then there is one wordpress tag that will always work, and should be used as the default:


<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />

Wait! You say. What about other stylesheets? Like when you create a separate stylesheet for print? Or how about one within a conditional comment for IE? That won’t work for those. However, there is an alternate way to call it in without hard-coding the long URL yourself:


<?php bloginfo('template_directory'); ?>

What this does is put in the path to your template directory. So, say you have a print stylehseet you also want to use with the default. You would do this:


<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/print.css" media="print" />

Note how I added the “/filename here” at the end of the PHP call. The above PHP code will work for anything that needs the path to the files called in. You just add the filename afterwards so you get the results you desire.

I should also note that, if there are any links or images within your template that do need the full URL (usually for outside linking purposes - this isn’t a common need, though!) you can use that PHP code anywhere in your template. Just tack on the filename at the end.

I would also like to address the comments_popup_link(); area, in the “feedback” section of the index.php file. What this does is provide a popup window when the end user clicks on the “Comments” link at the end of each post. For this to work, you must insert the following line in your header:

<?php comments_popup_script(400, 400); ?>

Basically, that puts the popup script in the header of your page. The “400″s you see there are the width and height of your popup window and can be altered to any size you wish.

Now, if you do not wish to have the comments popup in a new window, simply leave that line out of your header.php file. That will remove the popup, leaving your comments in line with the post. This, of course, will not be on the main page - what it does is, when the end user clicks on the “Comments” link to leave a comment, it’ll take the end user to an archived page with the comments area at the bottom.

Page 1 2 3 4 5 6 7

Comments

Mr.Blogged says...
1

it really helped me, thanks a lot, let me get started with wodpressing

Jet says...
2

This is a lovely tutorial. Most will learn more from these 7 page tutorial than the 1000 page goliath at WordPress.org. Actually, Shelly is an oddity. She has both beauty and brain, a rare tiny jewel among the giant rocks.
Having said that, I hope you don’t rest on your laurels. After the basic tutorial, many are now waiting for the “Intermediate” tutorial. I am.

Pukhraj Prajapat says...
3

Hi Shelly,
I am really thankful to you what experience you given me with this small tutorial. and i need your extreme help again actually i want to do some changes in my theme and i am totally new with wordpress. Actually i want to do is as follows:

I wana show the comments which are usually coming in a single element list and i want to show them as two columns list

How can i do so with wordpress. I am regularly trying it. Please do this thing in my favor thanks. and thanks thanks again.

alexander achles says...
4

Excelent tutorial! thanks for sharing :)

Timbaland says...
5

This is the tutorial I was looking for. Thanks a lot!

Ash says...
6

Brilliant. Just what I have been looking for. Your tutorial has given me a good overview on how to create WP templates.

Thank you for sharing your knowledge.

s.karal says...
7

I am very excited by 2.5, I am keeping mum about the new features which I do not know of. The idea of reducing 2 plugins for my blog with 2.5 is a huge bonus - Gravatars and Tags management. Way to go WordPress, I can’t wait for March 10.

Ludogames says...
8

Thanks, this was really helpfull. I’ve just started with WP and I love it. But I think a good template is a must, otherwise your blog looks quite boring with the basic template. With this info I’ll try to design my own. I’ll keep you updated :)

9

What a great tutorial. Many thanks for sharing, I’ve found it very useful indeed.

Ilona says...
10

I’d like to say that your WP Theme tutorial is awesomely great, easy and very clear to understand. Something that I’ve been looking for about two years. Now I can finally make my own theme. :p

Karpacz says...
11

Oh, i need tutorial like this:) It is very helpful:) Thanks a lot!

andrew says...
12

Thanks. Great tutorial. Nice and simple.

13

very nice article

well i would like to know the tools you used for your design

Shelly says...
14

&rt;&rt;well i would like to know the tools you used for your design< <

Huh. Never been asked that before!

For images, I use Paint Shop Pro. Coding, I use PSPad. Site CMS is (obviously) WordPress. That’s pretty much it :)

15

Shelly - what a fantastic resource! I have been looking for a tutorial like this for ages and now I can seriously begin to design my own theme.

Thank you, thank you!

Sarah

Yigit says...
16

Excelent tutorial! thanks for sharing :)

kat says...
17

wow! that was great! i really learned alot. i’ll be bookmarking for future reference!

Tarihcim says...
18

Thanks.. Nice and simple.But old…

programlar says...
19

This is the tutorial I was looking for. Thanks a lot!:)

Carolin says...
20

Thank you so much for all that information. I haven’t had time to read it yet, but I copied all to a Word document for later review (like in a couple of hours). You just saved my Bachelors degree and a bunch of money (not on car insurance :D).

21

I would like to express my expression in my native language “Darun!”.. meaning “Fabulous !”.. I really like the way of explaining things….

It was really beneficial and helpful to me…

Thank you, keep up the good work….!

Lynne says...
22

Wonderful tut! After wandering around in the Wordpress wilderness for 3 days I have finally got it thanks to you!

Thaks very much for sharing

Bye
Lynne

One Thought says...
23

I tried to design a Wordpress Theme myself but was unable. Some one said you need to build a layout in Fireworks and then do css stuff. I exactly do not know what or how fireworks is used so , I dropped idea of making a theme. Now I use themes designed by other people.

I will try to make the wordpress theme once more again, so that I may have a unique design and I can practice some wp things .

24

Wow. I read this twice and I’m so lost. I don’t even know were to start. I’ll read it again in the morning for a clearer picture. Might be lack of sleep

admin says...
25

One Thought -

Fireworks is a sort of editor that developrs use to create websites in. Sort of a “powerhouse WYSIWYG” editor. personally, I don’t use it (even though I have it) - I’m a notepad gal, through and through.

Basically, what they were telling you is, in fact, what I say in my tutorial. When I create theme, I initially create the site as I would if I were creating a static website. Once I get it laid out and how it needs ot be set, *then* I add in the WordPress information, and break apart the file as need to create the theme itself.

Paul says...
26

Great wordpress tutorial…this is exactly what I was looking for. One question is what is “Fireworks”?
Thanks Paul

Dan says...
27

Just use wordpress folks. It’s the best.

Gary says...
28

This is the best information I’ve found on Wordpress Template.Great Job!

spyfly says...
29

THIS TOOK TWO PAGES OF THE TUESDAY USATODAY - IT IS FOR REAL
>
>
>
> To all of my friends, I do not usually forward messages,
>
> But this is from my friend Pearlas Sandborn and she really is
>
> an attorney.
>
>
> If she says that this will work - It will work. After all, what have
>
> you got to lose?
>
>
> SORRY EVERYBODY.. JUST HAD TO TAKE THE CHANCE!!! I’m an
>
> attorney, And I know the law. This thing is for real. Rest assured
>
> AOL and Intel will follow through with their promises for
>
> fear of facing a multimillion-dollar class action suit similar to the one
>
> filed by PepsiCo against General Electric not too long ago.
>
>
>
> Dear Friends: Please do not take this for a junk letter.
>
> Bill Gates sharing his fortune. If you ignore this, You will repent
>
> later.
>
>
>
> Microsoft and AOL are now the largest Internet companies
>
> and in an effort to make sure that Internet Explorer remains the
>
> most widely used program, Microsoft and AOL are running an e-mail
>
> beta test
>
>
>
> When you forward this e-mail to friends, Microsoft can and will
>
> track it (If you are a Microsoft Windows user) for a two week
>
> time period.
>
>
>
> For every person that you forward this e-mail to, Microsoft will pay
>
> you $245.00 For every person that you sent it to that forwards it on,
>
> Microsoft will pay you $243..00 and for every third person that receives
>
> it, You will be paid $241.00. With in two weeks, Microsoft will contact
>
> you for your address and then send you a check.
>

Cytaty says...
30

Thank you for this article. Has been proven to be very helpful for me. Good Job! Geat blog!

31

Toronto Escorts Agency - Toronto Escort 4 UWe are teeming with dozens of sexy, fluffy bunnies, eager to frolic and play in the fields in and around the Toronto area. We pride ourselves on our excellent customer service and providing you with the finest Toronto Escorts. All our Toronto Escorts are carefully selected for their delightful personalities and their love of bunny fun - and yes, that may include a good roll around in the hay…
Our main guarantees are:
Genuine pictures of all our girls. Complete discretion. Honesty to all our clients. We only work with girls who enjoy being an escort. Careful selection of all girls to ensure the best. Reliability and integrity.
With so many un-reliable escort agencies in Toronto let Toronto Escort 4 U be your safe place in an unsafe world. We personally interview and meet all of the girls before we fluff them up and brush their tails, ready to meet you, our client. And so we guarantee that what you see is what you get.
We also have an online escorts reservations form for bookings over 48hrs in advance. Our weekly newsletter will keep you informed with all the latest news at TE4U if you want to be kept updated.
Feedback is a very important issue to us, so please help us to keep Toronto Escort 4 U your favorite agency by keeping us informed of all your adventures. Please inform us of how your encounter went so we know if we should give your bunny an extra carrot or take away her water bottle and bedding materials.
Toronto Escort 4 U Escorts Agency is also easily viewed on your mobile phone and is a great way to see our girls when you are on the move or for those last minute bookings when you are away from a computer. Just go to http://www.torontoescort4u.com and you will be automatically redirected to our mobile phone site.
Please remember our promise to dear customers: NO SATISFACTION, NO PAY!!

http://www.torontoescort4u.com

helen says...
32

Thank you for your tutorial. It’s exactly what I’ve been looking for! :)

33

Hi, Do you have any idea about the Branford Magazine word press theme? i am trying to resolve image issues with it for the past 1 month, but no clue. I tried all tutorials yet no go. can you advice on it?

Guru says...
34

I am very found of collecting information about because i want every person in this world know the correct meaning of love. so i am collecting information about love.

Guru

top-10SEO says...
35

If any of you would like a basic Search Engine Optimation job, I am offering a basic tune up for $250.00 for the next 10 days.

Masaguz says...
36

hi, i’m agus from indonesia, i like this tutorial ;)

Mike says...
37

Hi!
Thanks for great tutorial! It is the best information I found on net. :)

mirc says...
38
mirc says...
39

i learn lots of things from this documan thanks a lot.

downloader says...
40

thx..

i learned so many things..

Laser marker says...
41

there is a big Internet Marketing?Guaranteed SEO

Laser marker says...
42

I’m waiting for you other articles

43

I was looking for a good tutorial for building wordpress themes. Thanks this helpful document.

china news says...
44

Thanks for great tutorial!
Another Wordpress question that is asked a lot is how to take a current website design and make it work with Wordpress.

Erica says...
45

Wow, I’ve been searching for tutorials lately on how to easily make a template for Wordpress but without any effect until now. I went through your tutorial and besides being descriptive and full of information, it’s very easy to understand, which is a big plus unlike for the other easy ones out there on the internet. I need a few days and my own template will be complete and I can start blogging… thank you very much for putting this into light. :)

Rx Online says...
46

Interesting tutorial [...]

sohbet says...
47

Sohbet Chat Muhabbet Turkish

Netlog says...
48

Thanks

Weber says...
49

it really helped me, thanks a lot, let me get started with wodpressing
Thank You.

50

Hi…

You have a nice niche

i love it

51

http://www.fabletechnologies.com your product is good

52

dfg

Trackbacks & Pingbacks

[...] How to Create a WordPress Template or Theme [...]

[...] How to Create a WordPress Template or Theme [...]

[...] How to create a template or theme [...]

[...] How to Create a WordPress Template or Theme [...]

[...] How to Create a WordPress Template or Theme [...]

[...] Aneko Studios » Blog Archive » How to create a Wordpress Template or Theme (tags: wordpress themes tutorial) [...]

[...] Aneko Studios » Blog Archive » How to create a Wordpress Template or Theme [...]

[...] How to create a template or theme [...]

[...] Aneko Studios [...]

[...] How to create a Wordpress Template or Theme [...]

Leave a Reply