CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://codex.wordpress.org/Blog_Design_and_Layout","20110411164527","https://web.archive.org/","web","/_static/", "1302540327"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta name="generator" content="MediaWiki 1.15.5"/> <meta name="keywords" content="Site Design and Layout,Blog Design and Layout,About WordPress,Adding Administration Menus,Adding Asides,Advanced Topics,CSS,CSS Coding Standards,CSS Troubleshooting,Creating Horizontal Menus,Current events"/> <link rel="canonical" href="/web/20110411164527/http://codex.wordpress.org/Site_Design_and_Layout"/> <link rel="shortcut icon" href="/web/20110411164527im_/http://codex.wordpress.org/favicon.ico"/> <link rel="search" type="application/opensearchdescription+xml" href="/web/20110411164527/http://codex.wordpress.org/opensearch_desc.php" title="Codex (en)"/> <link rel="alternate" type="application/rss+xml" title="Codex RSS feed" href="/web/20110411164527/http://codex.wordpress.org/index.php?title=Special:RecentChanges&feed=rss"/> <link rel="alternate" type="application/atom+xml" title="Codex Atom feed" href="/web/20110411164527/http://codex.wordpress.org/index.php?title=Special:RecentChanges&feed=atom"/> <title>Site Design and Layout « WordPress Codex</title> <style type="text/css"> @import url("https://web.archive.org/web/20110411164527cs_/http://s.wordpress.org/style/codex-wp4.css?3"); @import url("https://web.archive.org/web/20110411164527cs_/http://s.wordpress.org/style/wp4.css?10"); </style> <link media="only screen and (max-device-width: 480px)" href="https://web.archive.org/web/20110411164527cs_/http://wordpress.org/style/iphone.css" type="text/css" rel="stylesheet">  <link rel="shortcut icon" href="https://web.archive.org/web/20110411164527im_/http://s.wordpress.org/favicon.ico" type="image/x-icon"/> <script src="https://web.archive.org/web/20110411164527js_/http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript"> _uacct = "UA-52447-1"; urchinTracker(); </script>  <script type="text/javascript" src="/web/20110411164527js_/http://codex.wordpress.org/index.php?title=-&action=raw&gen=js&useskin=codex"></script> <script type="text/javascript">wgBreakFrames=false;wgContentLanguage='en';</script> <script type="text/javascript" src="/web/20110411164527js_/http://codex.wordpress.org/skins/common/wikibits.js"></script> </head> <body id="wordpress-org"> <div id="header"> <div class="wrapper"> <h1><a href="https://web.archive.org/web/20110411164527/http://wordpress.org/" title="WordPress">WordPress.org</a></h1> <form action="https://web.archive.org/web/20110411164527/http://wordpress.org/search/do-search.php" method="get" id="head-search"> <input class="text" name="search" type="text" value="Search the Codex" maxlength="150" onfocus="this.value=(this.value=='Search the Codex') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'Search the Codex' : this.value;"/> <input type="submit" class="button" value="Go"/> </form> <ul> <li><a href="https://web.archive.org/web/20110411164527/http://wordpress.org/" title="Home is where the heart is.">Home</a></li> <li><a href="https://web.archive.org/web/20110411164527/http://wordpress.org/showcase/" title="See some of the sites built on WordPress.">Showcase</a></li> <li><a href="https://web.archive.org/web/20110411164527/http://wordpress.org/extend/" title="Taking WordPress beyond your wildest imagination">Extend</a> <ul class="nav-submenu"> <li><a href="https://web.archive.org/web/20110411164527/http://wordpress.org/extend/plugins/" title="Plugins can extend WordPress to do almost anything you can imagine.">Plugins</a></li> <li><a href="https://web.archive.org/web/20110411164527/http://wordpress.org/extend/themes/" title="Find just the right look for your website.">Themes</a></li> </ul></li> <li><a href="https://web.archive.org/web/20110411164527/http://wordpress.org/about/" title="About the WordPress Organization, and where we're going.">About</a></li> <li><a class="current" href="https://web.archive.org/web/20110411164527/http://codex.wordpress.org/Main_Page" title="Documentation, tutorials, best practices.">Docs</a></li> <li><a href="https://web.archive.org/web/20110411164527/http://wordpress.org/development/" title="Come here for the latest scoop.">Blog</a></li> <li><a href="https://web.archive.org/web/20110411164527/http://wordpress.org/support/" title="Support and discussion forums.">Forums</a></li> <li><a href="https://web.archive.org/web/20110411164527/http://wordpress.org/hosting/" title="Find a home for your blog">Hosting</a></li> <li id="download"><a href="https://web.archive.org/web/20110411164527/http://wordpress.org/download/" title="Get it. Got it? Good.">Download</a></li> </ul> </div> </div> <div id="headline"> <div class="wrapper"> <h2>Codex</h2> <div class="portlet" id="p-personal"> <p class="login">Codex tools: <a href="/web/20110411164527/http://codex.wordpress.org/index.php?title=Special:UserLogin&returnto=Site_Design_and_Layout">Log in</a> </p> </div> </div> </div> <div id="pagebody"> <div class="wrapper"> <div class="col-10" id="bodyContent"> <h2 class="pagetitle">Site Design and Layout</h2>  <p class="LanguageLinks" style="border:1px solid #CCCCCC; line-height:1.5; text-align:left; color:#333333; font-size:90%; padding:10px;"><span style="white-space:nowrap;"><a href="/web/20110411164527/http://codex.wordpress.org/Multilingual_Codex" title="Multilingual Codex" class="mw-redirect">Languages</a>:</span> <a href="/web/20110411164527/http://codex.wordpress.org/Blog_Design_and_Layout" title="Blog Design and Layout" class="mw-redirect">English</a> • <a href="https://web.archive.org/web/20110411164527/http://wpdocs.sourceforge.jp/Blog_Design_and_Layout" class="external text" title="http://wpdocs.sourceforge.jp/Blog_Design_and_Layout">日本語</a> • <a href="/web/20110411164527/http://codex.wordpress.org/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D0%B8_%D1%80%D0%B0%D1%81%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0_%D0%B1%D0%BB%D0%BE%D0%B3%D0%B0" title="Дизайн и раскладка блога">Русский</a> • <a href="/web/20110411164527/http://codex.wordpress.org/zh-cn:%E5%8D%9A%E5%AE%A2%E7%9A%84%E8%AE%BE%E8%AE%A1%E5%92%8C%E5%B8%83%E5%B1%80" title="zh-cn:博客的设计和布局">中文(简体)</a> • <a href="/web/20110411164527/http://codex.wordpress.org/zh-tw:%E9%83%A8%E8%90%BD%E6%A0%BC%E7%9A%84%E8%A8%AD%E8%A8%88%E5%92%8C%E4%BD%88%E5%B1%80" title="zh-tw:部落格的設計和佈局">中文(繁體)</a> • <small>(<a href="/web/20110411164527/http://codex.wordpress.org/Multilingual_Codex#Language_Cross_Reference" title="Multilingual Codex" class="mw-redirect">Add your language</a>)</small> </p> <p><br/> </p> <div style="width:95%; font-size: 110%; text-decoration:none; padding: 0px 5px; margin: 20px 0px 5px; background-color: #f0f0f0; border: 1px solid darkslateblue"> <a name="Basics_of_WordPress_Site_Design" id="Basics_of_WordPress_Site_Design"></a><h3> <span class="mw-headline">Basics of WordPress Site Design</span></h3> </div> <div style="width: 45%; margin:0px 6px; float:left"> <ul><li> <a href="/web/20110411164527/http://codex.wordpress.org/First_Steps_With_WordPress" title="First Steps With WordPress">First Steps With WordPress</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Using_Themes" title="Using Themes">Using WordPress Themes</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Theme_Development" title="Theme Development">Theme Development</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/FAQ_Layout_and_Design" title="FAQ Layout and Design">FAQ Themes, Layout and Design</a> </li></ul> </div> <div style="width: 45%; margin:0px 6px; float:left"> <ul><li> <a href="/web/20110411164527/http://codex.wordpress.org/WordPress_Lessons" title="WordPress Lessons">WordPress Lessons</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/WordPress_Lessons#Designing_Your_WordPress_Site" title="WordPress Lessons">Lessons: Designing Your WordPress Site</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/WordPress_Lessons#Template_Files" title="WordPress Lessons">Lessons: Customizing Template Files</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/WordPress_Site_Reviews" title="WordPress Site Reviews">WordPress Site Reviews</a> </li></ul> </div> <div style="clear:both; height:10px"> </div> <div style="width:95%; font-size: 110%; text-decoration:none; padding: 0px 5px; margin: 20px 0px 5px; background-color: #f0f0f0; border: 1px solid darkslateblue"> <a name="Specifics_and_Advanced_Design" id="Specifics_and_Advanced_Design"></a><h3> <span class="mw-headline"> Specifics and Advanced Design </span></h3> </div> <div style="width: 45%; margin:0px 6px; float:left"> <ul><li> <a href="/web/20110411164527/http://codex.wordpress.org/Navigation_Menus" title="Navigation Menus">Adding Navigation Menu support to a theme</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Developing_a_Colour_Scheme" title="Developing a Colour Scheme">Developing a Colour Scheme</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Designing_Headers" title="Designing Headers">Designing Headers</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Creating_Horizontal_Menus" title="Creating Horizontal Menus">CSS Horizontal Menus</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Dynamic_Menu_Highlighting" title="Dynamic Menu Highlighting">Dynamic Menu Highlighting</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Good_Navigation_Links" title="Good Navigation Links">Good Navigation Links</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Next_and_Previous_Links" title="Next and Previous Links">Next and Previous Links</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Styling_for_Print" title="Styling for Print">Styling for Print</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Styling_for_Mobile" title="Styling for Mobile">Styling for Mobile</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Post_Meta_Data_Section" title="Post Meta Data Section">Designing Your Post Meta Data Section</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Separating_Categories" title="Separating Categories">Separating Categories in your Post Meta Data Section</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Custom_Fields" title="Custom Fields">Using Custom Fields with Post-Meta</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Customizing_the_Read_More" title="Customizing the Read More">Customizing the Read More</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Adding_Administration_Menus" title="Adding Administration Menus" class="mw-redirect">Adding Administration Menus</a> </li></ul> </div> <div style="width: 45%; margin:0px 6px; float:left; display: inline"> <ul><li> <a href="/web/20110411164527/http://codex.wordpress.org/Formatting_Date_and_Time" title="Formatting Date and Time">Formatting Date and Time</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Styling_Lists_with_CSS" title="Styling Lists with CSS">Styling Lists with CSS</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Designing_Headings" title="Designing Headings">Designing Headings</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Playing_With_Fonts" title="Playing With Fonts">Playing With Fonts</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Using_Images" title="Using Images">Using Images</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Wrapping_Text_Around_Images" title="Wrapping Text Around Images">Wrapping Text Around Images</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Fun_Character_Entities" title="Fun Character Entities">Fun Character Entities</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Using_Smilies" title="Using Smilies">Smilies</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Using_Gravatars" title="Using Gravatars">Using Gravatars</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Adding_Asides" title="Adding Asides">Adding Asides</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Writing_Code_in_Your_Posts" title="Writing Code in Your Posts">Writing Code in Your Posts</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Protection_From_Harvesters" title="Protection From Harvesters">Protecting Your Email Address from Harvesters</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Theme_Development" title="Theme Development">Theme Development</a> </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Theme_Review" title="Theme Review">Theme Review</a> </li></ul> </div> <div style="clear:both; height:10px"> </div> <div style="width:95%; font-size: 110%; text-decoration:none; padding: 0px 5px; margin: 20px 0px 5px; background-color: #f0f0f0; border: 1px solid darkslateblue"> <a name="WordPress_and_CSS" id="WordPress_and_CSS"></a><h3> <span class="mw-headline"> WordPress and CSS </span></h3> </div> <ul><li> <a href="/web/20110411164527/http://codex.wordpress.org/CSS" title="CSS">CSS</a> - Overview of CSS within WordPress, and list of resources related to CSS and WordPress </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Know_Your_Sources" title="Know Your Sources">Know Your Sources</a> - External resources on HTML, PHP, and CSS in general </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/CSS_Coding_Standards" title="CSS Coding Standards">CSS Coding Standards</a> - Best practices for coding CSS </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/CSS_Troubleshooting" title="CSS Troubleshooting">CSS Troubleshooting</a> - Examining and debugging CSS </li></ul> <div style="clear:both; height:10px"> </div> <div style="width:95%; font-size: 110%; text-decoration:none; padding: 0px 5px; margin: 20px 0px 5px; background-color: #f0f0f0; border: 1px solid darkslateblue"> <a name="Themes.2C_Templates.2C_and_Customization" id="Themes.2C_Templates.2C_and_Customization"></a><h3> <span class="mw-headline"> Themes, Templates, and Customization</span></h3> </div> <ul><li> <a href="/web/20110411164527/http://codex.wordpress.org/Using_Themes" title="Using Themes">Using Themes</a> - Best starting point for learning about Themes </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Templates" title="Templates">Templates</a> - Comprehensive list of theme and template resources </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Plugins" title="Plugins">Plugins</a> - Comprehensive list of plugin resources </li><li> <a href="/web/20110411164527/http://codex.wordpress.org/Advanced_Topics#WordPress_Plugins_and_Customization" title="Advanced Topics">WordPress Plugins and Customization</a> - Other resources related to customizing WordPress </li></ul> <div style="clear:both; height:10px"> </div> <div style="clear:both; background-color:#f0f0f0; border:1px solid #CCCCCC; color:#000000; padding:7px; margin:0.5em auto 0.5em auto; vertical-align:middle;"><a href="/web/20110411164527/http://codex.wordpress.org/About_WordPress" title="About WordPress">About WordPress</a> • <a href="/web/20110411164527/http://codex.wordpress.org/Getting_Started_with_WordPress" title="Getting Started with WordPress">Getting Started with WordPress</a> • <a href="/web/20110411164527/http://codex.wordpress.org/Working_with_WordPress" title="Working with WordPress">Working with WordPress</a> • <a href="/web/20110411164527/http://codex.wordpress.org/Blog_Design_and_Layout" title="Blog Design and Layout" class="mw-redirect">Blog Design and Layout</a> • <a href="/web/20110411164527/http://codex.wordpress.org/Advanced_Topics" title="Advanced Topics">Advanced Topics</a> • <a href="/web/20110411164527/http://codex.wordpress.org/Troubleshooting" title="Troubleshooting">Troubleshooting</a> • <a href="/web/20110411164527/http://codex.wordpress.org/Developer_Documentation" title="Developer Documentation">Developer Documentation</a> • <a href="/web/20110411164527/http://codex.wordpress.org/Current_events" title="Current events">Current Events</a></div>  <div class="printfooter"> Retrieved from "<a href="https://web.archive.org/web/20110411164527/http://codex.wordpress.org/Site_Design_and_Layout">http://codex.wordpress.org/Site_Design_and_Layout</a>"</div> <div id="catlinks"><div id="catlinks" class="catlinks"><div id="mw-normal-catlinks"><a href="/web/20110411164527/http://codex.wordpress.org/Special:Categories" title="Special:Categories">Categories</a>: <span dir="ltr"><a href="/web/20110411164527/http://codex.wordpress.org/Category:Troubleshooting" title="Category:Troubleshooting">Troubleshooting</a></span> | <span dir="ltr"><a href="/web/20110411164527/http://codex.wordpress.org/Category:Design_and_Layout" title="Category:Design and Layout">Design and Layout</a></span></div></div></div>  </div> <div class="col-2"> <ul class="submenu"> <li id="n-mainpage"><a href="/web/20110411164527/http://codex.wordpress.org/Main_Page">Home Page</a></li> <li><a href="/web/20110411164527/http://codex.wordpress.org/WordPress_Lessons">WordPress Lessons</a></li> <li><a href="/web/20110411164527/http://codex.wordpress.org/Getting_Started_with_WordPress">Getting Started</a></li> <li><a href="/web/20110411164527/http://codex.wordpress.org/Working_with_WordPress">Working with WordPress</a></li> <li><a href="/web/20110411164527/http://codex.wordpress.org/Blog_Design_and_Layout">Design and Layout</a></li> <li><a href="/web/20110411164527/http://codex.wordpress.org/Advanced_Topics">Advanced Topics</a></li> <li><a href="/web/20110411164527/http://codex.wordpress.org/Troubleshooting">Troubleshooting</a></li> <li><a href="/web/20110411164527/http://codex.wordpress.org/Developer_Documentation">Developer Docs</a></li> <li><a href="/web/20110411164527/http://codex.wordpress.org/About_WordPress">About WordPress</a></li> </ul> <h3>Codex Resources</h3> <ul class="submenu"> <li id="n-portal"><a href="/web/20110411164527/http://codex.wordpress.org/Codex:Community_Portal">Community portal</a></li> <li id="n-currentevents"><a href="/web/20110411164527/http://codex.wordpress.org/Current_events">Current events</a></li> <li id="n-recentchanges"><a href="/web/20110411164527/http://codex.wordpress.org/Special:RecentChanges">Recent changes</a></li> <li id="n-randompage"><a href="/web/20110411164527/http://codex.wordpress.org/Special:Random">Random page</a></li> <li id="n-help"><a href="/web/20110411164527/http://codex.wordpress.org/Help:Contents">Help</a></li> </ul> </div> </div> </div> <div id="footer"> <div class="wrapper"> <p> <a href="https://web.archive.org/web/20110411164527/http://wordpress.org/about/privacy/">Privacy</a> | <a href="https://web.archive.org/web/20110411164527/http://wordpress.org/about/gpl/">License / GPL</a>     See also: <a href="https://web.archive.org/web/20110411164527/http://wordpress.com/" title="Hassle-free WP hosting">WordPress.com</a> | <a href="https://web.archive.org/web/20110411164527/http://wordpress.tv/" title="Videos, tutorials, WordCamps">WordPress.TV</a> | <a href="https://web.archive.org/web/20110411164527/http://central.wordcamp.org/" title="Find a WordPress event near your home">WordCamp</a> | <a href="https://web.archive.org/web/20110411164527/http://jobs.wordpress.net/" title="Find or post WordPress jobs">WP Jobs</a> | <a href="https://web.archive.org/web/20110411164527/http://ma.tt/" title="Co-founder of WordPress, an example of what WordPress can do">Matt</a> | <a href="https://web.archive.org/web/20110411164527/http://www.facebook.com/WordPress">Fan WP on Facebook</a> | <a href="https://web.archive.org/web/20110411164527/http://wordpress.org/news/feed/" class="rsslink">Blog RSS</a> </p> <h6>Code is Poetry</h6> </div> </div> </body> </html>