Support » Fixing WordPress » Layout question-Reverse engineering WordPress to learn php/css

  • I’ve already figured out how to edit a theme and get it to match my site: Hurray! 🙂

    I have no idea how mysql works, but I thought I’d build my site from scratch using the layout and php used in WordPress. (I’ll be able to better integrate WordPress into my site once I fully understand how it works. I don’t want to make my whole site a blog.)

    I’ve created a test layout using the section templates that WordPress uses: Here’s the site: The index.php code looks like this:

    <?php include (‘header.php’); ?>
    <?php include (‘content.php’); ?>
    <?php include (‘sidebar.php’); ?>
    <?php include (‘footer.php’); ?>

    CSS file:

    First problem: the sidebar isn’t aligning to the right of my content page. Does it have something to do with the <?php include’s or is it something in my CSS code? I noticed that WordPress uses “<?php get_header(); to insert the sections on the index page.

    I still haven’t figured out how to center the whole thing in a browser window. 😛

Viewing 8 replies - 1 through 8 (of 8 total)
  • your alignment has to do with your CSS. You’ll probably want to “float” your sidebar to the right or left.

    If you want to align your entire site to the center, in your CSS either in the main “body” tag or “html” tag put the attribute “margin: 0px auto;”

    I guess I wanted to know how does the default WordPress theme align the two columns? Where in the style.css does it mange to do this? Same thing for centering the whole mess. This is what I’m seeing:

    /* Begin Structure */
    body {
    margin: 0;
    padding: 0;

    #page {
    background-color: white;
    margin: 20px auto;
    padding: 0;
    width: 760px;
    border: 1px solid #959596;

    I keep thinking I’m going to find page: center. Ah ha…found this though:

    .narrowcolumn {
    float: left;
    padding: 0 0 20px 45px;
    margin: 0px 0 0;
    width: 450px;

    OK, .narrowcolumn is doing the floating.

    Moderator Samuel Wood (Otto)

    (@otto42) Admin

    On another note, you will want to use the WordPress functions for various things.

    In the case of displaying comments, you’ll want to use:

    These mostly do the same thing as the include’s you’re using, but they are more standard to the WordPress way of doing things.

    if there is no attribute in the body tag of a CSS a page automatically aligns to the left.

    body {
    margin: 0px auto;
    padding: 0;

    just adding that to the body attribute should align everything on your page to the center.

    I’m attempting to redo everything in simplier php with no mysql. I’m assuming the get_header(); are related to mysql. (getting header data from the mysql database?) When I run anything with get_ in the code, nothing works. (php is working on my server/machine)

    I finally got my columns to align with float. I noticed to get my footer to align correctly below everything, I had to include “clear: both; in the #footer tag in my css file. No idea why this worked.

    Like I said, I’m attempting to strip away everything that’s not needed from the default theme to make a simple layout, yet using the methods used in WordPress. (I’m old school who grew up with html tags. This is forcing me to get my head on straight with css.)

    Moderator Samuel Wood (Otto)

    (@otto42) Admin

    I’m attempting to redo everything in simplier php with no mysql. I’m assuming the get_header(); are related to mysql. (getting header data from the mysql database?)

    No. These are parts of WordPress. They cause the theme to display the header.php, sidebar.php, footer.php, or comments.php of the theme. They have special handling as part of WordPress.

    If you’re developing a WordPress theme, then you really should use these functions. If you’re developing something else entirely, then just ignore me.

    When I run anything with get_ in the code, nothing works. (php is working on my server/machine)

    Are you developing a theme? Are you running the theme in a copy of WordPress? You cannot run a WordPress theme separately, it’s got to be run under a copy of WordPress itself.

    What I’m doing is building a totally new site with WordPress as my starting point. (Only using PHP, no mysql at this point) I’m using the same structure (header.php, sidebar.php, etc.) but having the parts come together using my own php code. (very simplified versions)

    The reason why I’m doing this is because I’m a beginner when it comes to CSS and php. When I first took a peek at WordPress, it was overwhelming. (at least for a beginner like me) Now that I’ve done this, I know exactly how WordPress puts it’s parts together.

    I’ve finally got something that looks and sorta behaves like WordPress. The next step is to actually insert WordPress and alter a theme to match my site. (easy peasy – see?)

    The next step is to figure out how the mysql aspect works within WordPress. (I’m sure I’ll have questions on that too.) 🙂

    Actually, even if you are not aware of it – WP went initially, the other way around: prior to 1.5 there was ONE single file called index.php, and everything was in it from the starting html to the final /html.

    PHP is needed only to be able to “talk” to the MySQL database, since html doesn’t communicate with databases.

    Then, with the release of WP 1.5 the theme system has been introduced and the original index file was “sliced” in several pieces, making the customization more flexible.
    About 2 years ago I wrote about the “anatomy” of a theme. You may want to take a look at it.

    Edit. One last note: The use of CSS is absolutely not related to PHP – you can have pure html sites + css.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Layout question-Reverse engineering WordPress to learn php/css’ is closed to new replies.