HTML - WP

ConvertHTMLtoWordPressTheThemeFoundry
UpdatedFebruary2012andnowcompatiblewithWordPress3.3+
When I first decided to convert a static HTML design to WordPress I did some searching for a tutorial to
help megetstartedwiththe basics. Surprisingly,I didnt find anythingthat was verycompleteor easy to
follow. For that reason I decided to write a very basic tutorial on how to convert a static HTML template
intoaWordPressTheme.IfyouareanabsolutebeginneratdevelopingWordPressthemesthenthisshould
helpyougetstarted.ThistutorialassumesyoualreadyhaveabasicunderstandingofHTMLandCSS.Italso
assumesyouhaveawebsitebuiltinHTMLandCSSandhaveitreadyforconversion.
HowWordPressWorks
WordPressworksinaratherstraightforwardmannerbutitmayseemconfusingifyouarecompletelynew
to the concept. WordPress relies on PHP to call on different parts of your content from the database
managementsystemitstandson.Forexample,lookinyour/wpcontent/themes/twentyten/directoryand
opentheheader.phpfile.AsyouscrollthroughthecodenoticethePHPcalls,theystartwitha<?phpand
endwitha?>.Lookatline37andnoticethecallforyourstylesheetURL:
<linkrel="stylesheet"type="text/css"media="all"href="<?phpbloginfo('stylesheet_url');?>"/>
ThislineusesPHPtolookupyourstylesheetslocationfromthedatabase.Thisbasicfunctionofretrieving
orcallingsomekindofdatafromyourdatabaseandusingPHPtodisplayitinyourHTMLishowWordPress
works. Throughout this process you will be substituting PHP for different parts of your content and your
code.Thiswillmakeeditingeasierinthelongrun,asyouwillfindout.Nowthatyouunderstandthebasics
ofhowWordPressworks,letsgetstarted.
FirstThingsFirst
The first step is to create a new folder and name it whatever you want your theme to be called. Next,
createtwonewfiles,style.cssandindex.phpandplacetheminthefolder.Believeitornot,thesearethe
onlytwofilesyouactuallyneedforaWordPresstheme.Nowcopyandpastethecodefromyouroriginal
CSSfileintothestyle.cssfileyoujustcreated.Atthetopaddthefollowingcode:
/*
ThemeName:ReplacewithyourTheme'sname.
ThemeURI:YourTheme'sURI
Description:Abriefdescription.
Version:1.0
Author:You
AuthorURI:Yourwebsiteaddress.
*/
ThesecommentssimplyhelpWordPressproperlyidentifythetheme.Yourstylesheetisnowreadytogo.
ChopItUp
NowletsstartchoppingupyourHTML.RememberhowwetalkedaboutWordPressusingPHPtocalldata
from your database? Well WordPress can also use PHP to call different files from within your template
folder.ImagineyourcurrentHTMLcodechoppedupinto4(ormore)differentsections.Forexample,take
alookatthelayoutandcorrespondingHTMLofthispage.Theheadercomesfirst,followedbythecontent,
thenthesidebar,andfinallythefooter.Insteadofkeepingthese4partsoftheHTMLtogetherinonefile,
youaregoingtoputeachofthemintheirownseparatefile.ThencallonthemonebyoneusingPHP.
SogoaheadandsortthroughyourHTMLcodeandplacesomemarkersinthe4placeswhereyouplanon
cuttingthecodeinto4separatesections.
Thesenextstepsassumeyouhave yourpagesetuplefttoright:header,content,sidebar,footer.Ifyour
pageisordereddifferentlyyouwillhavetoswitchacoupleofthesestepsaround.
Nowcreate3newfiles(header.php,sidebar.php,footer.php)andplacetheminyourthemedirectory.Next
takealookattheheader.phpfilefromtheTwentyTenthemewelookedatearlier.NoticeallthePHPthat
is used in between the <head> tags. Copy that code to your new header.php file. Now open up your
original HTML file and copy the code you marked off for your header (1st section) into your new
header.phpfile(underneaththe<head>section).Saveandclose.
Nowopenupyournewindex.phpfile.CopythesecondpartofyouroriginalHTMLcode,thecontent(2nd
section)intoyournewindex.phpfile.Saveandclose.
Gettingthehangofit?
Next open up your new sidebar.php file, copy the sidebar (3rd section) of your original code into the
sidebar.phpfile.Finally,copytheoriginalfooter(4thsection)ofcodeintoyournewfooter.phpfile.
PutItBackTogether
Your original code should now be chopped up into 4 different files (header.php, index.php, sidebar.php,
footer.php). Let's put it back together using a few lines of PHP. Open up your index.php file, it should
containtheHTMLfromthecontent(2ndsection)ofyouroriginalcode.Addthislineattheverytopofthe
file:
<?phpget_header();?>
Nowgototheabsolutebottomofyourindex.phpfileandaddthesetwolines:
<?phpget_sidebar();?>
<?phpget_footer();?>
These 3 simple lines of PHP are telling WordPress to fetch and display your header.php, sidebar.php, and
footer.phpfileswithinyourindex.phpfile.Yourcodeisnowofficiallyputbacktogether.Now,ifyouwant
to edit your sidebar you can just edit your sidebar.php file, instead of sorting through your index.php to
findit.Thesamegoesforyourheader.phpandyourfooter.php.
TheLoop
Your index.php is almost finished. The final step is to insert the actual content into the code. Luckily,
WordPressusesPHPforthisaswell.TheLoopisthePHPfunctionWordPressusestocallanddisplayyour
postsfromthedatabasetheyaresavedin.Grabthiscodeandpasteitintoyournewtheme'sindex.phpfile
(insideofwhicheverdivyouareusingtoholdyourcontent).

<?phpif(have_posts()):?>
<?phpwhile(have_posts()):the_post();?>
<divid="post<?phpthe_ID();?>"<?phppost_class();?>>
<divclass="postheader">
<divclass="date"><?phpthe_time('Mjy');?></div>
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to
<?php the_title_attribute(); ?>"><?php the_title(); ?></a></<div
class="author"><?phpthe_author();?></div>
</div><!endpostheader>
<divclass="entryclear">
<?phpif(function_exists('add_theme_support'))the_post_thumbnail();?>
<?phpthe_content();?>
<?phpedit_post_link();?>
<?phpwp_link_pages();?>
</div><!endentry>
<divclass="postfooter">
<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1
Comment','%Comments');?></div>
</div><!endpostfooter>
</div><!endpost>
<?phpendwhile;/*rewindorcontinueifallpostshavebeenfetched*/?>
<divclass="navigationindex">
<divclass="alignleft"><?phpnext_posts_link('OlderEntries');?></div>
<divclass="alignright"><?phpprevious_posts_link('NewerEntries');?></div>
</div><!endnavigation>
<?phpelse:?>
<?phpendif;?>
You just inserted a basic version of the loop into your code! WordPress will use the loop to display your
postsandcommentsonyourwebsite.
TheEnd
Nowuploadyourthemefolderto/wpcontent/themes/.ThenlogintoWordPressandactivateyourtheme.
Wasn'tthateasy?
This tutorial covered the basics for converting your theme to WordPress. To further customize and
enhanceyourthemestartlookingattheWordPressCodex,specificallyTemplateTagsandTemplateFiles.
Youcanusetemplatetagsinyoursidebar,inyourheader,oryourfootertocallmenus,categories,posts,
etc.Asyoulearnmoreabouttemplatetagsandtemplatefilesyouwilldiscovertheendlesspossibilitiesfor
customizingyournewWordPressblog.
<<OriginalPOST:seebelow>>
3/7/13 Convert HTML to WordPress The Theme Foundry
thethemefoundry.com/blog/html-wordpress/ 1/6
Already a customer? Please sign in.
The Theme Foundry
Home Overview
Browse Themes find and purchase
About Info + faq
Customer Stories see real examples
Blog Latest news
Help Center customer support
Convert HTML to WordPress
by Drew Strojny on May 8, 2006 in Tutorials
39 comments
Updated February 2012 and now compatible with WordPress 3.3 +
When I first decided to convert a static HTML design to WordPress I did some searching for a tutorial to help me get started with the basics. Surprisingly, I didnt find anything that
was very complete or easy to follow. For that reason I decided to write a very basic tutorial on how to convert a static HTML template into a WordPress Theme. If you are an
absolute beginner at developing WordPress themes then this should help you get started. This tutorial assumes you already have a basic understanding of HTML and CSS. It also
assumes you have a website built in HTML and CSS and have it ready for conversion.
How WordPress Works
WordPress works in a rather straightforward manner but it may seem confusing if you are completely new to the concept. WordPress relies on PHP to call on different parts of your
content from the database management system it stands on. For example, look in your /wp-content/themes/twentyten/ directory and open the header.php file. As you scroll
through the code notice the PHP calls, they start with a <?php and end with a ?>. Look at line 37 and notice the call for your stylesheet URL:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
This line uses PHP to look-up your stylesheets location from the database. This basic function of retrieving or calling some kind of data from your database and using PHP to
display it in your HTML is how WordPress works. Throughout this process you will be substituting PHP for different parts of your content and your code. This will make editing
easier in the long run, as you will find out. Now that you understand the basics of how WordPress works, lets get started.
First Things First
The first step is to create a new folder and name it whatever you want your theme to be called. Next, create two new files, style.css and index.php and place them in the folder.
Believe it or not, these are the only two files you actually need for a WordPress theme. Now copy and paste the code from your original CSS file into the style.css file you just
created. At the top add the following code:
/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/
These comments simply help WordPress properly identify the theme. Your stylesheet is now ready to go.
Chop It Up
Now lets start chopping up your HTML. Remember how we talked about WordPress using PHP to call data from your database? Well WordPress can also use PHP to call
different files from within your template folder. Imagine your current HTML code chopped up into 4 (or more) different sections. For example, take a look at the layout and
corresponding HTML of this page. The header comes first, followed by the content, then the sidebar, and finally the footer. Instead of keeping these 4 parts of the HTML together in
one file, you are going to put each of them in their own separate file. Then call on them one by one using PHP.
So go ahead and sort through your HTML code and place some markers in the 4 places where you plan on cutting the code into 4 separate sections.
These next steps assume you have your page set up left to right: header, content, sidebar, footer. If your page is ordered differently you will have to switch a couple of these steps
around.
Now create 3 new files (header.php, sidebar.php, footer.php) and place them in your theme directory. Next take a look at the header.php file from the Twenty Ten theme
we looked at earlier. Notice all the PHP that is used in between the <head> tags. Copy that code to your new header.php file. Now open up your original HTML file and copy the
code you marked off for your header (1st section) into your new header.php file (underneath the <head> section). Save and close.
Now open up your new index.php file. Copy the second part of your original HTML code, the content (2nd section) into your new index.php file. Save and close.
Getting the hang of it?
Next open up your new sidebar.php file, copy the sidebar (3rd section) of your original code into the sidebar.php file. Finally, copy the original footer (4th section) of code into
your new footer.php file.
Put It Back Together
Your original code should now be chopped up into 4 different files (header.php, index.php, sidebar.php, footer.php). Let's put it back together using a few lines of PHP.
Open up your index.php file, it should contain the HTML from the content (2nd section) of your original code. Add this line at the very top of the file:
<?php get_header(); ?>
Now go to the absolute bottom of your index.php file and add these two lines:
<?php get_sidebar(); ?>
<?php get_footer(); ?>
These 3 simple lines of PHP are telling WordPress to fetch and display your header.php, sidebar.php, and footer.php files within your index.php file. Your code is now
officially put back together. Now, if you want to edit your sidebar you can just edit your sidebar.php file, instead of sorting through your index.php to find it. The same goes
for your header.php and your footer.php.
The Loop
Your index.php is almost finished. The final step is to insert the actual content into the code. Luckily, WordPress uses PHP for this as well. The Loop is the PHP function
WordPress uses to call and display your posts from the database they are saved in. Grab this code and paste it into your new theme's index.php file (inside of whichever div you
are using to hold your content).
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-header">
<div class="date"><?php the_time( 'M j y' ); ?></div>
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="author"><?php the_author(); ?></div>
</div>
<div class="entry clear">
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?>
</div>
<div class="post-footer">
<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
</div>
</div>
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<div class="navigation index">
<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
</div>
<?php else : ?>
<?php endif; ?>
You just inserted a basic version of the loop into your code! WordPress will use the loop to display your posts and comments on your website.
The End
Now upload your theme folder to /wp-content/themes/. Then log into WordPress and activate your theme. Wasn't that easy?
This tutorial covered the basics for converting your theme to WordPress. To further customize and enhance your theme start looking at the WordPress Codex, specifically Template
Tags and Template Files. You can use template tags in your sidebar, in your header, or your footer to call menus, categories, posts, etc. As you learn more about template tags and
template files you will discover the endless possibilities for customizing your new WordPress blog.
Tweet Tweet
39 Comments
1. wandering_nomad May 9, 2006
Im glad you made this, its certainly helpful to me, someone with little/no knowledge about PHP.
2. Cate May 11, 2006
You are my new hero.
3. Michael Spence May 17, 2006
Okay, that takes care of the styling. How about pre-existing articles and comments? How can I place them in the WP database?
4. Drew Strojny May 17, 2006
Michael: Check out the Importing Content page from the Codex. Also, look under the Import tab in the administration panel.
5. William Brown May 19, 2006
Thanks for writing up this tutorial. This is exactly what I was looking for. Keep up the good work.
6. Abbey May 26, 2006
Given the simplicity of your directions, I had pretty much convinced myself there was no way my journal was going to come out with the same design as the rest of my html-
based website but I was pleasantly surprised. Just wanted to say thanks :)
7. Michael Josh July 3, 2006
Your article couldnt have come at a better time. I dont know how Id have been able to do it without your guidance, thank you so very much.
The site is great. Design is clean and stylish. Especially love the main (left) content column, how the headings complement the HRs, and the way comments appear in idividual
boxes. Just beautiful!
8. Matt Levenhagen September 6, 2006
Great Tutorial! Thanks for putting it together. It helped me successfully convert one of my templates into a WordPress theme and I have a feeling it wont be my last.
Very cool. :-)
9. Sean October 21, 2006
AWESOME!
This couldnt be laid out any better! Great job, and thanks for all the help.
10. Ron January 13, 2007
Wow, thats precisely what I needed to get my xhtml/css design into wordpress. Thanks!
11. brendan February 5, 2007
Ahhhh. this article is such a relief. I was trying to adjust all my css div names to match the WordPress ids. This is so much easier. Thanks!!
12. Abdel April 22, 2007
Great tutorial mate really much appreciated :)
13. Paul Nilsen August 10, 2007
This is easily the most straight forward and easy to understand tutorial on this subject.
Thank you very much for providing such well laid out instructions.
14. Josh H August 22, 2007
D-Man, you are a GOD. This is by far the easiest tutorial Ive seen, and I was beginning to give up hope on being able to integrate WordPress with my existing site. Im giving
you full props for this save in my codethanks just doesnt say enough!
Please let me know if theres anything I can help you with in terms of page design. Take care!
15. Ashley April 17, 2008
Wow! Thank you so much!!! Really helpful and well written, thank you!
16. Nick April 21, 2008
Fantastic tutorial worked first time!
17. John McFarlane May 31, 2008
Great tutorial, Ive not used PHP or WordPress for longer than 10 minutes, but this was easy to follow and seemed straight forward.
Thanks very much.
John
18. BK June 18, 2008
Thanks for taking the time to write this. Greatly appreciated.
19. Rajiv July 15, 2008
Simple and Impressive !!!!
Thanks for sharing with us :)
20. Wen July 15, 2008
Genius!!!
Exactly as the author said, there are not many tutorials explaining the basics, and the ones that do exist are too complicated and never spot out the main points. This article is
such a no-nonsense tutorial.
Author is an absolute talent! Thank you very much!
21. Lucy July 22, 2008
OMG u are amazing!
22. digiwebbs July 29, 2008
great guide, one that i could actually follow! keep up the good work
23. Mike September 3, 2008
Nice job.. Thanks
24. Anthony September 11, 2008
Thanks for sharing its a great overview.
25. room1012 September 17, 2008
Awesome tutorial. It easy to follow and helped me understand the purpose of php and the theme development process. Thanks!
26. Shin September 18, 2008
You just made a newbie an intermediate in one page.
27. john September 24, 2008
Thanks for this.
28. Posicionamiento Valencia October 13, 2008
Nice tutorial. Very useful.
29. Kevin Schueller October 16, 2008
Thanks so much! Your tutorial is fantastic. Saved me in a time of need!
30. Eric October 17, 2008
Ive been trying to figure out how to convert a couple sites for awhile and havent found anything out there this clear and straightforward. Thanks!
31. Incredible October 26, 2008
I have searched every nook and cranny of the WWW for a tutorial that simplifies the process of converting an (X)HTML template into a wordpress theme but all to no avail.
Coming across your tutorial replenishes my weary soul because I have been on this for the past months. Thank you for the time it took you to write this and thank you for
sharing your knowledge.
32. Henry Hoffman November 5, 2008
Why havent the guys at WordPress made this? This is absolutely brilliant I abandoned WordPress several months ago because of a lack of a decent beginners guide.
Thanks!
33. Vivek November 7, 2008
Thanks for the great article. How about comments.php? Will it be automatically taken from default template?
34. Puneet November 14, 2008
Wonderful post!
Thanks for sharing.
35. LL November 23, 2008
A lifesaver! Thanks for a great tutorial. :)
36. Lindsay December 20, 2008
You are amazing! Great tutorial!
37. Mike December 28, 2008
Great info. Thanks for sharing :)
You rock !
38. Mark January 9, 2009
Legendary!
Makes it so much clearer!
39. kaylee January 15, 2009
dude, you are a legend :)
Comments are closed.
Sell your creative work the easy way
Memberful is a new service we built for selling your downloads and monetizing your content. We use it to sell our themes and it integrates quickly with WordPress.
Subscribe
RSS feed
Twitter
Facebook
Filter by topic
Business
From the workshop
New Releases
News
Theme Updates
Tutorials
Our Story
Pricing
Contact
Jobs We're hiring!
Terms
Privacy
Forge
For WordPress.com
Copyright 2008 - 2013 Jestro LLC. The Theme Foundry is a registered trademark.
Twitter
Facebook
Receive news via email Subscribe

HTML - WP

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML - WP

Caricato da

Copyright:

Formati disponibili

ConvertHTMLtoWordPressTheThemeFoundry

Potrebbero piacerti anche