Support » Themes and Templates » Making A Theme From Existing XHTML and CSS Files

  • When an existing web page (i.e., the XHTML file with its accompanying CSS style sheet file) is to be used to make a WordPress template or theme, and one has never before used WordPress, what video “”how to” resource is a good reference?

    A Google search and a few YouTube videos have been investigated, but have not proven to be as helpful as hoped. A basic cook-book style video reference would be greatly appreciated. If the templating or theme task proves too time consuming, paying $100 to an honest and experienced WordPress theme maker would be desirable. My contact is ambassador A T hushmail D O T c o m in the USA.

Viewing 15 replies - 1 through 15 (of 19 total)
  • WP Voyager


    I would advise looking through the Codex articles about Themes. You will gain a great understanding of how the WordPress Theme system works, and the various pages include many links to outside references.

    The revelation will not be instantaneous, and it requires some work. Depending on how complex your theme needs to be, you probably wont even need to touch PHP! Just find a theme that works the way you want it to, and then use your existing XTML and CSS to make it look the way you want to.

    Hopefully, all the info you need will be right there. If you have any other questions, and searching does not provide an accessible answer, you can post new threads in the Forum to find answers.

    Good luck with your learning journey!
    –MindBlender 3D

    An attempt is being made to change the default theme since a search for a similar theme produced zero results with the WP site’s theme search/filter tools.

    The text in the footer is changed easily enough via the footer.php file, and the associated background image via the style.css file. However:

    1. Removing the sidebar by commentiong out get_sidebar in the index.php file does not produce the desired result. Since this site will not exhibit a blog, a typical unordered list for navigational items in the left side is desred, with a second column on the right side of the page for the associated content.

    2. Discovering where to set the site’s width to 990px is also proving to be difficult to find in the style.css file.

    Your helpful suggestions toward addressing the first two changes would be greatly appreciated.

    WP Voyager


    1. See this codex article for some pointers:
    Also, you could look at some two- or three-column themes to get an idea. Does your existing XHTML file contain information for these sidebars? You could possibly get away with copying a lot of the code, and making the column content dynamic with PHP.

    2. Okay. Depending on how complicated your theme is, changing the site width is probably not a simple matter of changing a simple CSS class. You will probably wind up having to change several things in the stylesheet, as well as repositioning divs that start going in the wrong place, etc.
    Plus, to make matters more interesting, Internet Explorer will make your job harder. Due to its famed issues with positional CSS, you will have to use conditional commenting to fix the issues there in separate files.
    A good start would be to begin looking for elements in your markup which seem to affect the width of the site, track them down in the stylesheet, and change the values. This may require some hefty tweaking…

    Modifying an existing theme seems as though it might be more time consuming than simply starting from nothing and making a new theme. Thus, modifying an existing theme has been abandoned in favor of attempting to make a new theme.

    A “make a theme from scratch” approach is likely both quicker and easier when the desired site exhibits a simple page layout and is to consist of just a few “pages” with no blog. Some follow-up posts will be placed here as the “make a theme from scratch” approach progresses (or not).

    Thus far, making a theme from scratch seems to be more straightforward than a retro-fit approach. The associated XHTML and CSS files have been broken into the WordPress-favored style, header, footer, index, and sidebar files.

    When the site is to consist solely of WordPress ‘Pages’ (remember, the site will not exhibit a blog), how is the CSS styling applied when the ‘wp_list_pages’ feature is used?

    For example, if the site’s navigation (in plain XHTML/CSS) is:

    <ul class="nav_primary_ul">
          <li><a class="nav_primary" href="nav_option_a.php">Nav Option A</a></li>
          <li><a class="nav_primary" href="nav_option_b.php">Nav Option B</a></li>
          <li><a class="nav_primary" href="nav_option_c.php">Nav Option C</a></li>
          <li><a class="nav_primary" href="nav_option_d.php">Nav Option D</a></li>
          <li><a class="nav_primary" href="nav_option_e.php">Nav Option E</a></li>
          <li><a class="nav_primary" href="nav_option_f.php">Nav Option F</a></li>
          <li><a class="nav_primary" href="nav_option_g.php">Nav Option G</a></li>
          <li><a class="nav_primary" href="nav_option_h.php">Nav Option H</a></li>
          <li><a class="nav_primary" href="nav_option_i.php">Nav Option I</a></li>
          <li><a class="nav_primary" href="nav_option_j.php">Nav Option J</a></li>
          <li><a class="nav_primary" href="nav_option_k.php">Nav Option K</a></li>
          <li><a class="nav_primary" href="nav_option_l.php">Nav Option L</a></li>
    </ul> <!-- end nav_primary_ul -->

    How does something like:

    <?php wp_list_pages('sort_column=menu_order&title_li='); ?>

    capture the relevant styling? Your suggested WordPress code for producing the listed XHTML/CSS navigation (above) would be greatly appreciated.

    How does something like:

    <?php wp_list_pages(‘sort_column=menu_order&title_li=’); ?>

    Short answer: it won’t. You’ll have to adapt your CSS to work with the generated classes.

    1. Does generated classes mean WordPress-specific CSS classes?

    2. Is there a specific web page reference (i.e., a single link) exhibiting the generated classes and how one accesses the classes to make a custom WordPress theme?

    LightJoy, when I started to do the same thing you are trying to accomplish, I learned a LOT from this video:

    I prefer the “BLANK Theme” listed here:
    to starkers which is mentioned in the screencast.

    WP Voyager


    Thus far, making a theme from scratch seems to be more straightforward than a retro-fit approach.

    Well, if you want to make a theme completely from scratch…

    That is a rather serious undertaking. Actually, probably not so much for your case, because you already have the XHTML framework to work from. But still, now you have to put in ALL of the functional PHP to make it work correctly!

    You might want to look at Theme Frameworks. These are parent themes that are designed with the express purpose to be modified.

    Depending on how hard and long you are really committed to working on it, you might have to request professional help after all!

    A very very basic, new-from-scratch, non-blog WordPress theme is now nearly complete. However, there are a few questions that still need to be resolved. Two of the questions are:

    1. When editable content appears in multiple portions of the page, how is it implemented and managed? For example, <?php the_content(); ?> is used to enable WYSIWYG editing of one content area located within the main portion of the page. Yet there are several small special purpose content boxes (e.g., four DIVs floated left to form a row across the page) that presently have no way of receiving similarly editable content.

    2. The page’s title does not display on the home page, yet it appears on all other pages. Specifically,
    <h1 class="page_title"><?php wp_title(); ?></h1>
    code is used within the index, home, and page theme files. All pages display the page’s title exactly as intended, except the home page which dispays no title whatsoever.

    WP Voyager


    <h1 class=”page_title”><?php wp_title(); ?></h1>
    code is used within the index, home, and page theme files.

    You should consider putting the site title in the header.php file, because that way it will be loaded into all pages that call the WP header.

    That is one of the main things that the header is intended for: content that should remain consistent across the whole site.

    Thank you for your response. However; as stated, it is “… The page’s title …” that is being placed by the associated code, not “… the site title …”

    The page’s title is different for every page and is not “… content that should remain consistent across the whole site …”

    The previously posted two matters await a reply.

    WP Voyager


    Ah, sorry, my mistake. I read the post too fast! For some reason, I was thinking of the blog title function.

    For the post title, yes, you are correct: the code should at least be on those templates to display. Why it is not displaying on the home page, I am not sure. You might try using the Pastebin to show us what your home.php file looks like.

    As for your first question, <?php the_content(); ?> is used to grab the content of the post currently loaded by the Loop. Since it sounds like you are using WordPress as more of a “normal” CMS, you are not using posts. But, since you have those content areas that you want to fill, it is possible to use posts to perform that function.

    Since you are making a CMS theme, there is probably not an instance of The Loop iterating through recent posts on your front page (since you are not posting to a blog). One option could be to create several categories of posts (one category for each space), write up several possible fillers for each category (which correspond to those slots), create posts using those write-ups, and put a miniature Loop inside each of the content areas. These Loops would be customized to show a random post from a specified category.

    There are several themes which appear to have similar content areas. You might want to have a look at them for additional ideas.

    Where is the Pastebin option? A zipped file has been prepared to upload but where is the option to share it here?

    WP Voyager


Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Making A Theme From Existing XHTML and CSS Files’ is closed to new replies.