Title: (urgent) Adding XHTML/CSS Theme to WordPress
Last modified: August 19, 2016

---

# (urgent) Adding XHTML/CSS Theme to WordPress

 *  Resolved [nikmac](https://wordpress.org/support/users/nikmac/)
 * (@nikmac)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/urgent-adding-xhtmlcss-theme-to-wordpress/)
 * Hi, I am trying to add wordpress to my XHTML/CSS website. I followed the tutorial
   at [http://jestro.com/convert-xhtml-css-to-wordpress/](http://jestro.com/convert-xhtml-css-to-wordpress/)
   and nothing is displaying. Here is the theme code.
 * style.css:
 *     ```
       /*
       Theme Name: allaboutgo-theme
       Theme URI: http://www.allaboutgo.com/articles/
       Description: Go (Baduk, Weiqi, Igo) blog theme.
       Version: 1.0
       Author: Nikolas S.
       Author URI: http://www.allaboutgo.com
       */
       /* ======== AllAboutGo.com Screen Stylesheet ::
       Author:    Nikolas S.
       Created:    01/04/2010
       Updated:    01/04/2010
       TOC:        Resets; HTML & Body; Links; Typography; Lists; Tables;
               Classes; Template; Navigation; Page Styles; Forms; Other;
       ----------------------------------------------------------------- */
   
       /* ======== Resets ::
       ----------------------------------------------------------------- */
       body, address, blockquote, h1, h2, h3, h4, h5, h6, p, pre, dl, ol,
       ul, dd, dt, li, fieldset, form {margin:0;padding:0;}
   
       /* ======== HTML & Body ::
       ----------------------------------------------------------------- */
       html {font-size:100.01%;height:101%;}
       body {
           height:100%;
           font:62.5%/1.4 Arial,Tahoma,Geneva,Helvetica,sans-serif;
           background: url(../images/backgrounds/bg_body.jpg) repeat-x top;
           width:100%;
           color:#333
           }
       /* ======== Links ::
       ----------------------------------------------------------------- */
       a,a:visited {text-decoration:underline;}
       a:active, a:focus, a:hover {text-decoration:none;outline:none;}
       a img {border:none;}
   
       /* ======== Typography ::
       ----------------------------------------------------------------- */
       /* ==== Resets for Nested elements
       - Helpful for Relative Font Size Sites (Not Needed for Fixed Font Size Sites) ==== */
       blockquote p, p blockquote, div div, div li, div p,div dt,div dd,
       li li, li li li,ul ul, p address, p pre, pre p,
       td address, td h1, td h2, td h3, td h4, td li, td dd, td dt, td p, td pre {font-size: 100%;}
   
       abbr,acronym {text-decoration: none;border:0}
       address, h1, h2, h3, h4, h5, h6, dd, dt, li, p, pre {padding:.6em 0;}
       h1 { font: bold 2em Arial,Tahoma,Geneva,Helvetica,sans-serif; padding: 25px 0 25px 0; color: #555; background: transparent }
       h2 {font-size:1.5em;}
       h3 {font-size:1.4em}
       h4 {font-size:1.4em;}
       h5 {font-size:1.2em;}
       h6 {font-size:1.1em;}
       address,blockquote,div,dd,dt,li,p,th,td {font-size:1.2em;}
       dt {font-weight:bold;}
       pre {font-size: 12px;}
       q:before,q:after {content:'';}
       /* ======== Lists ::
       ----------------------------------------------------------------- */
       dl, ol {margin-left: 20px;}
       ol, dd, dt {vertical-align:middle;list-style-position: inside;}
       ul {  padding: 0; margin: 0 }
       li { list-style-type: none }
       .checkbox {list-style-image:url(../images/checkmark.png)}
   
       /* ======== Tables ::
       ----------------------------------------------------------------- */
       table {
           border:none;
           border-collapse:collapse;
           border-spacing:0;
           overflow:hidden;
           width:100%;
       }
       .timeline thead td{text-align:left;vertical-align:top;font-weight:bold;}
       td {text-align:left; vertical-align:middle; border-bottom: 1px solid #BBB;}
   
       /* ======== General Purpose Classes ::
       ----------------------------------------------------------------- */
       .alignleft {text-align:left;}
       .alignright {text-align:right;}
       .center {text-align:center;}
       .clear {clear:both;padding:0;margin:0;line-height:0;}
       .clearleft {clear:left}
       .clearright {clear:right;}
       .floatleft {float:left;}
       .floatright {float:right;}
       .hidden {display:none;}
       .inline {display:inline;}
       .large {font-size:20px;font-weight:bold;}
       .light {color:#999;}
       .small {font-size:10px !important;font-weight:normal;}
       .top {font-size:10px; text-decoration:none;}
       /* ======== Template ::
       ----------------------------------------------------------------- */
       #wrap {width:960px;margin:0 auto;}
       #header {
           height:111px;
           width:960px;
           margin:0;
           padding:0;
       }
   
       #header-inner {
           height: 54px;
           width: 960px;
           padding: 10px 0 10px 0;
       }
       #header-inner h1{font: bold 2em Arial,Tahoma,Geneva,Helvetica,sans-serif;
       color: #555;
       background: transparent;
       float: left;
       width: 150px;
       margin: 0;
       padding-bottom:10px;
       margin-top:-10px;
       }
       #banner {background: #FFF url(../images/banner.jpg) no-repeat left; height:54px; margin-top:10px;width:600px; float:left;}
       #content {
           background: transparent;
           width:960px;
           margin: 0 auto;
       }
       #main {
           float:right;
           width: 720px;
           color: #555;
           background: #FFF
       }
   
       #main p { text-align: justify; font-size:1.2em; margin: 7px 0 7px 0; padding: 0; background: inherit }
       #main img { margin: 0px 10px 3px 10px; position: relative; border: 1px solid  #f5f5f5; padding: 1px; background: #FFF }
       #main .border {margin: 7px 10px 3px 10px; position: relative; border: 1px solid  #000 !important; padding: 0px !important;background: #FFF}
       #main h2 { color: #999; width: 100%; border-bottom: 1px solid #BBB;clear:both; padding: 0; background: inherit;}
       #main h2 a {text-decoration: none !important}
       #main h3 { color: #555; font-size: 1.2em; padding: 7px 0 0 0; font-weight: bold;background: transparent}
       #main ul {line-height:10px;}
       ul#main ul { list-style-position: inside; margin-left: 2px }
       #main ul li { list-style-type: square; margin-left: 15px }
       #main ul li a {text-decoration: none}
       #main ul ul li { list-style: none; margin-left: 10px; list-style-type: lower-alpha; list-style-position: inside; }
       #main .citation { background: #FFF url(../images/citation1.gif) no-repeat top left; font-style: italic; padding: 10px 0 0 32px; font-size: 0.9em}
       #main .citation p{background: none; padding-bottom: 5px !important; padding-right:32px;}
       #main .citation-end{ background: #FFF url(../images/citation2.gif) no-repeat bottom right !important;}
       #main blockquote { text-align: justify; border-left: 8px solid #f0f0f0; padding-left: 8px; margin-right: 15px; margin-top: 5px; background: inherit }
       #main br { margin: 0px 0 5px 0; background: inherit }
       #main .topborder {clear: both; width: 100%; border-top: 1px solid #BBB; margin: 7px 0 0 0; background: inherit;}
   
       .diagram {float: right; width: 120px; margin: 0 0 10px 10px; text-align: center; font-size: 0.83em; line-height:8px; vertical-align: top;}
       .diagram p {float:none; width:120px; margin: 0 !important; text-align:center !important; font-size: 1em !important; line-height:1em; vertical-align: top;}
       .description p { text-align: justify; font-size:1.2em; margin: 7px 0 7px 0; padding: 0; background: inherit }
       .largeimg {margin: 0 0 3px 0 !important}
   
       #topleftcorner { float: left; margin: 10px 10px 0 0; border: 1px solid #ddd; padding: 5px; background: #f5f5f5;}
       #topleftcorner a { text-decoration:none}
       #topleftcorner li {line-height: 1px; list-style:none !important}
       #topleftcorner h2 {border:none; color:#555;font:1em/1.4 Arial,Tahoma,Geneva,Helvetica,sans-serif;}
   
       #middle {text-align: center; position: relative; padding: 1px}
   
       #sidebar {float: left; width: 200px; margin: 0 auto; background: #FFF }
       #sidebar h2 {
       	color: #FFF;
       	border-bottom: 1px solid #f0f0f0;
       	font-size: 1em;
       	padding-left: 8px;
       	line-height: 10px;
       	background: url(../images/menus/sideh2.jpg) no-repeat top left;
       	margin-bottom: 5px
       }
       #sidebar .box { border: none; padding: 0px 0 20px 0; margin: 0 0 1em 0; line-height: 0.14em; background: #f5f5f5 url(../images/menus/sidebottom.jpg) no-repeat bottom center }
       #sidebar .box ul { padding-left: 8px }
       #sidebar .box li a { text-decoration: none; font-size: 1em }
   
       .extra {
       	text-align: left;
       	padding:8px;
       	font-size:1.8em;
       	font-family: "Times New Roman", times;
       	margin:0px;
       	color: #AAA;
       	line-height: 25px;
       	background: #FFF;
       }
       .extra h3 { color: #CCD8E1;  margin-bottom: 5px; font-size: 1.2em; background: #FFF }
       .extra a { color: #8FB9DB; text-decoration: none; font-style: italic; background: #FFF }
       .extra p { margin-top: 15px; background: #FFF }
   
       #footer { clear: both; border-top: 2px solid #e5e5e5; padding: 7px 0 7px 0; color: #777; font-size: 0.9em; background: #FFF }
       #footer .right  { float: right; text-align: right; background: #FFF; }
   
       /* ======== Navigation ::
       ----------------------------------------------------------------- */
       /* ==== Main Menu ==== */
       #menu { float: right; margin: 0; padding: 0; background: transparent; height: 31px; width: 960px }
       #menu  ul { list-style: none; padding: 0; margin: 0; float: left; background-color: transparent }
       #menu li {
          width: auto !important;
          width: 0%;
          float: left;
          margin: 0;
          font-size: 10px;
          line-height: 31px;
          white-space: nowrap;
          background: url(../images/menus/leftmenu.jpg) center left no-repeat;
          background-color: transparent;
          list-style: none;
          padding-right: 2px;
       }
       #menu li:hover { font-weight: bold; }
   
       #menu a {
          font-family: Verdana, Arial, Sans-Serif;
          font-size: 1.2em;
          display: block;
          padding-left: 0px;
          padding-right: 10px;
          text-decoration: none;
          color: #FFF;
          background: url(../images/menus/rightmenu.jpg) top right no-repeat;
          margin-top: 0px;
          margin-left: 9px
       }
   
       #menu a.current { font-weight: bold }
   
       /* ==== Breadcrumbs Menu ==== */
       #breadcrumbs {
           height: 28px;
           background: transparent;
           width: 960px;
           margin: 10px 0;
           color: #333;
           padding-left: 0px;
           font:bold 1em Arial,Tahoma,Geneva,Helvetica,sans-serif;
       }
       #breadcrumbs a {text-decoration: none}
   
       /* ==== Footer Menu ==== */
       #footer ul { list-style: none; float:right; text-align:right; background:#FFF}
       #footer li {display: inline }
       #footer li a { text-decoration: none; background: #FFF }
   
       /* ==== Collapsible Menu ==== */
       #collapsible {width:720px; margin:5px 0 5px 0}
       #collapsible p {font-size:1em;}
       #collapsible ul li {margin-left:10px; line-height: 1px !important}
       .menuHeader {color:#60c; cursor:pointer;  font-weight:bold; border-top:1px solid #300;}
       .menuList {display:none; margin-bottom:10px;}
       .menuOption {margin-left:10px; display:block;}
   
       /* ======== Page Styles ::
       ----------------------------------------------------------------- */
   
       /* ======== Forms ::
       ----------------------------------------------------------------- */
       label {cursor:pointer;}
       fieldset {border:0;}
       input,label,select,textarea {
       line-height:1.2;
       vertical-align:baseline;
       font-size:inherit;
       font-family:inherit;
       }
       input[type="radio"], input[type="checkbox"] {position:relative;top:1.5px;}
       input[type="text"],textarea {padding:.2em;}
       textarea {overflow:auto;}
   
       /* ======== Other ::
       ----------------------------------------------------------------- */
       /* ==== Advertising Placeholders ==== */
       #sidebarbox {
           height: 200px;
           width: 200px;
           margin-bottom:7px;
           float: left;
           background-color:#808080;
       }
   
       #bottomleaderboard {
           height:90px;
           width: 728px;
           margin: 0 auto;
           background-color:#808080
       }
   
       /* ==== Search === */
       #search {
           height:27px;
           width:210px;
           margin:15px 0 0 0;
           float: left;
       }
       ```
   
 * header.php:
 *     ```
       <?php
       /**
        * @package WordPress
        * @subpackage Default_Theme
        */
       ?>
       <!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" <?php language_attributes(); ?>>
   
       <head profile="http://gmpg.org/xfn/11">
       <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
   
       <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
   
       <?php } else { // No sidebar ?>
       	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
       <?php } ?>
   
       </style>
   
       <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
   
       <?php wp_head(); ?>
       </head>
       <div id="wrap">
           <div id="header">
               <div id="header-inner">
                   <h1>All About Go</h1>
                   <div id="banner"></div>
                   <div id="search">
       </div>
               </div>
                    <div id="menu">
                       <ul>
                         <li><a href="/index.html" title="Home">HOME</a></li>
                         <li><a href="/play-go.html" title="Play Go">PLAY GO</a></li>
                         <li><a href="/lessons/index.html" title="Lessons">LESSONS</a></li>
                         <li><a class="current" href="/articles/index.html" title="Articles">ARTICLES</a></li>
                         <li><a href="/resources/index.html" title="Resources">RESOURCES</a></li>
                         <li><a href="/history/index.html" title="History">HISTORY</a></li>
                         <li><a href="/gallery/index.html" title="Gallery">GALLERY</a></li>
                         <li><a href="/links.html" title="Links">LINKS</a></li>
                       </ul>
                   </div>
           </div>
           <div id="breadcrumbs"></div>
       </div>
       ```
   
 * index.php:
 *     ```
       <?php
       /**
        * @package WordPress
        * @subpackage Default_Theme
        */
   
       get_header(); ?>
   
       <div id="content">
               <div id="main">
   
       	<div id="content" class="narrowcolumn" role="main">
   
       	<?php if (have_posts()) : ?>
   
       		<?php while (have_posts()) : the_post(); ?>
   
       			<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
       				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
   
       				<div class="entry">
       					<?php the_content('Read the rest of this entry &raquo;'); ?>
       				</div>
   
       				<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
       			</div>
   
       		<?php endwhile; ?>
   
       		<div class="navigation">
       			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
       			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
       		</div>
   
       	<?php else : ?>
   
       		<h2 class="center">Not Found</h2>
       		<p class="center">Sorry, but you are looking for something that isn't here.</p>
       		<?php get_search_form(); ?>
   
       	<?php endif; ?>
   
       	</div>
               </div>
       	</div>
   
       <?php get_sidebar(); ?>
       <?php get_footer(); ?>
       ```
   
 * sidebar.php:
 *     ```
       <?php
       /**
        * @package WordPress
        * @subpackage Default_Theme
        */
       ?>
       <div id="sidebar">
                   <div class="box">
                       <h2>Categories:</h2>
                   </div>
                   <div class="box">
                       <h2>New Articles:</h2>
                   </div>
                   <div class="box">
                   <h2>Sponsored Links</h2>
               </div>
   
       			<?php endif; ?>
       		</ul>
       	</div>
       </div>
       ```
   
 * footer.php:
 *     ```
       <?php
       /**
        * @package WordPress
        * @subpackage Default_Theme
        */
       ?>
       <div id="footer">
   
       <ul>
       <li><a href="/contact.html" title="Contact Us">Contact</a> | </li>
       <li><a href="/sitemap.html" title="Sitemap">Sitemap</a> | </li>
       <li><a href="/privacy.html" title="Privacy Policy">Privacy</a> | </li>
       <li><a href="/help.html" title="Help">Help</a></li>
       </ul>
                   © Copyright 2010, All About Go
               </div>
               <div id="bottomleaderboard"></div>
           </div>
   
       		<?php wp_footer(); ?>
       </body>
       </html>
       ```
   
 * I think that’s everything. Can anyone here see why my theme is not displaying?
   Thank you very much. Please let me know if you need anything else.
 * -Nik

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [nsathees](https://wordpress.org/support/users/nsathees/)
 * (@nsathees)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/urgent-adding-xhtmlcss-theme-to-wordpress/#post-1447638)
 * I suggest you to read the documentation on how to build a Theme for wordpress.
   That is not a Theme. it is just a site code. if you want to use it then name 
   it index.html and upload to the root dir. but it has noting to do with WP.
 * I guess no one over here will spoon feed you with codes!
 *  Thread Starter [nikmac](https://wordpress.org/support/users/nikmac/)
 * (@nikmac)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/urgent-adding-xhtmlcss-theme-to-wordpress/#post-1447644)
 * Hi, nsathees.
 * Sorry – I misunderstood how to post code on this website. The actual theme code
   is in the original post now. I’m not expecting anyone to “spoon feed me with 
   codes” – but can someone tell me why what I have posted is not working?
 * Thanks.
 *  [nsathees](https://wordpress.org/support/users/nsathees/)
 * (@nsathees)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/urgent-adding-xhtmlcss-theme-to-wordpress/#post-1447719)
 * 1)you side bar code do NOT have any template tags.
    2) you have hard coded the
   menu. if that should work then you have to have the pages or post with that name
   and set the permalink option accordingly with in the settings at the admin back
   end.
 * do you have a link to the site?
 *  Thread Starter [nikmac](https://wordpress.org/support/users/nikmac/)
 * (@nikmac)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/urgent-adding-xhtmlcss-theme-to-wordpress/#post-1447762)
 * Hi,
 * I just uploaded a link here: [http://www.allaboutgo.com/history/index.html](http://www.allaboutgo.com/history/index.html)
   
   Most of the links are broken as I have not uploaded the full site yet, but that
   should show you the theme I would like to add.
 * By template tags you mean the php a theme would use to display info? Yes, I will
   have to add that in later. Right now I just want to find out why *nothing* is
   displaying (theme preview in worpress options brings up a blank screen).
 * Thanks.
 *  Thread Starter [nikmac](https://wordpress.org/support/users/nikmac/)
 * (@nikmac)
 * [16 years, 1 month ago](https://wordpress.org/support/topic/urgent-adding-xhtmlcss-theme-to-wordpress/#post-1447813)
 * Okay, the full website is online now at [http://www.allaboutgo.com](http://www.allaboutgo.com)
 *  Thread Starter [nikmac](https://wordpress.org/support/users/nikmac/)
 * (@nikmac)
 * [16 years ago](https://wordpress.org/support/topic/urgent-adding-xhtmlcss-theme-to-wordpress/#post-1448034)
 * As the issue is now resolved (I learned how to properly code PHP for WordPress),
   can a moderator please delete this thread, or at least edit out the website links?
   This page is showing up in Google search results for my website… Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘(urgent) Adding XHTML/CSS Theme to WordPress’ is closed to new replies.

 * 6 replies
 * 2 participants
 * Last reply from: [nikmac](https://wordpress.org/support/users/nikmac/)
 * Last activity: [16 years ago](https://wordpress.org/support/topic/urgent-adding-xhtmlcss-theme-to-wordpress/#post-1448034)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics