Documentos de Académico
Documentos de Profesional
Documentos de Cultura
16/02/10 16:08
NOV
17
WordPress
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/
Pagina 1 di 10
16/02/10 16:08
2. Photoshop Mockups
Based on the information gathered from the default theme, design a Photoshop mockup of your blog. Here Im using GlossyBlue, one of my free WordPress themes, as an example. Download the demo.zip to see the Photoshop file.
3. HTML + CSS
After the PSD design is done, create a static HTML+CSS template of each page. You can use my GlossyBlue HTML files in the demo.zip to follow this tutorial. Extract the zip and take a look at the index.html,
single.html, and page.html . Later in the tutorial, I will use these HTML files and convert them into a theme.
For more details, check out Site Architecture and Template Hierarchy at Codex.
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/
Pagina 2 di 10
16/02/10 16:08
6. Style.css
Go to the WordPress default theme folder, open the style.css file. Copy the commented code at the top and paste it to the GlossyBlue style.css file. Change the theme name and the author information as you desire.
footer.php. The image below shows a simplified version of my index file and how the markups should split.
8. Header.php
Open the index.html file. Cut from the top to where the <!--/header --> ends, paste it in a new PHP file, and save the file as header.php.
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/
Pagina 3 di 10
16/02/10 16:08
Go to the default theme folder, open the header.php. Copy and replace the tags where it requires PHP code (Template Tag): <title> , <link> stylesheet, <h1>, and <div class=description> .
Reference: wp_list_pages.
9. Sidebar.php
Back to the index.html file, cut from where the <form id=searchform> start to the closing tag of
<div id=sidebar> and paste it in a new PHP file, save it as
sidebar.php.
Replace the category <li> tags with <?php wp_list_categories('show_count=1&title_li='); ?> Replace the archive <li> tags with <?php wp_get_archives('type=monthly'); ?>
10. Footer.php
Back to the index.html file, cut from the <div id=footer> tag to the end of </html> and paste it in a new PHP file, save it as footer.php.
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/
Pagina 4 di 10
16/02/10 16:08
Recent Posts
Here I used the query_post to display the 5 latest posts.
Recent Comments
Recent comments are generated by a plugin (included in the theme folder).
11. Index.php
Now in your index.html file, you should only have the <div id=content> wrap. Save the file as index.php . Insert the line: get_header , get_sidebar , and get_footer in the same order as your layout structure.
16/02/10 16:08
15. Single.php
Now, it is time to do the single.php template. If you want, you can go through the same process cut & paste from the default theme. But, I find it easier to use the index.php that you just created and save it as
single.php . Open the default theme single.php file and copy the Template Tags over. Then include the
comments_template . The image below highlights what Ive changed:
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/
Pagina 6 di 10
16/02/10 16:08
16. Page.php
With the single.php template you just created, save it as page.php. Remove the post date, comment form, next/previous link and thats it.. there goes your page.php template.
Here Im using the query_post ( showposts=-1 means display all posts) to display a list of all posts.
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/
Pagina 7 di 10
16/02/10 16:08
Now, login to your admin panel, write a new page, title it Archives. On the Page Template dropdown, select Archives.
More Reading:
Check out a list of WordPress Plugins that you may find useful. For more advance theme coding, read my WordPress Theme Hacks.
Whats Next
In the next chapter, I will show you how to export your local WordPress to a web host and keep the local version for backup purpose.
Comments
Pages: 36 35 34 33 32 31 30 29 28 27 26 1 Show All
353
iamoffended
February 16th, 2010 at 6:24 am
A quick note, its not super simple to create a static html and css from a psd if your not familiar with slicing and basic css coding. Does anyone have any good links to ruts for this process? Something for starting with a blank page, custom format for the layout?
352
keith
February 16th, 2010 at 3:13 am
cam you please help me with my sit .i want to improve the look.i an a novice
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/ Pagina 8 di 10
16/02/10 16:08
351
crewof1
February 14th, 2010 at 2:21 pm
Im also trying to figure out how to make a 3-column layout, like the recent comment below.
350
iamoffended
February 14th, 2010 at 6:29 am
Thanks, this is the most helpful tut Ive found. How would you name the sidebar if you wanted a 3 column layeout? I.e. Sidebar left, index, sidebar right? Header, footer? Thanks again for this
349
Will Hull
February 5th, 2010 at 12:15 pm
Thank you so much for this tutorial. It helped break things down so much more than much of what is out there. I just completed coding for my blog design. I invite you to check it out. Its all thanks to you. http://willhull.com/blog Thank you, thank you, thank you!
348
Rob
February 4th, 2010 at 3:20 pm
Hey great tut, one issue Im having though and Im hoping you can shed some light. Ive developed the html and css and it works flawlessly as it is. One I start breaking it apart (header, nav, sidebar, footer, etc) it breaks. It appears that the isnt doing what it needs to do. Ive read around and Im not sure if I need to define that in any way to look for header.php, footer.php, etc. But as it is Im stuck and frustrated. Any help would be awesome! Thanks and great work!
347
Mina
February 4th, 2010 at 6:48 am
346
seocontentgirl
February 3rd, 2010 at 6:32 pm
Now thats what I am talking about, this is one of the best tutorials on learning to build a custom wordpress theme yet! Great work.
345
slit
February 1st, 2010 at 5:14 am
344
DreamHouse
January 31st, 2010 at 2:39 pm
Wow! you made it easier. This is a really big help for beginners like me. thanks
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/
Pagina 9 di 10
16/02/10 16:08
ABOUT
Web Designer Wall is all about design, ideas, web trends, and tutorials. It is designed and maintained by Nick La, who also runs N.Design Studio, IconDock, and Best Web Gallery.
Web Designer Wall 2010 .
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/
Pagina 10 di 10