SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Integrating WordPress into existing html/css site

    I designed a site at huskerfootballzone.com and then decided it was essentially functioning like a blog and I should just use WordPress to update content. My design is a little more complicated than a standard WordPress theme, so it won't work to just make modifications to a theme to match the site design. Instead I would like to approach it the other way by adding WordPress code into my existing HTML and CSS. However I have no familiarity with PHP. Also, the default style sheet in any given WordPress theme looks quite complicated and I'm not sure which classes are important or even necessary for WordPress functionality, or how to mix my current CSS stylesheet into the WordPress one for proper functioning. Would someone be willing to walk me through this process? Thank you.

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,832
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by JTrainGBR83 View Post
    I designed a site at huskerfootballzone.com and then decided it was essentially functioning like a blog and I should just use WordPress to update content. My design is a little more complicated than a standard WordPress theme, so it won't work to just make modifications to a theme to match the site design.
    I looked at your site and your layout looks like it can be accomplished in Wordpress.

    Quote Originally Posted by JTrainGBR83 View Post
    Instead I would like to approach it the other way by adding WordPress code into my existing HTML and CSS.
    You don't incorporate Wordpress into your site so much as you incorporate your design into Wordpress. And that is what you would be doing anyway as the Wordpress engine will run with every page load.

    Quote Originally Posted by JTrainGBR83 View Post
    However I have no familiarity with PHP.
    Then you have some learning to do. If you are going to take your design and incorporate it into Wordpress, you will not have to do much monkeying around with PHP.

    Quote Originally Posted by JTrainGBR83 View Post
    Also, the default style sheet in any given WordPress theme looks quite complicated and I'm not sure which classes are important or even necessary for WordPress functionality, or how to mix my current CSS stylesheet into the WordPress one for proper functioning. Would someone be willing to walk me through this process? Thank you.
    Walking you through the process could take hours. Your best bet is to get started doing some research on your own and come back and ask questions when you reach a stumbling block as someone around here will probably be able to help you get over it.

    Here is a place for you to start:

    http://codex.wordpress.org/Theme_Development
    http://codex.wordpress.org/Stepping_Into_Templates

    I suggest you install Wordpress, create a folder for your own custom theme and then start reading about Theme Development and what you need to do to incorporate your existing layout into Wordpress. In a nutshell, you will be creating a theme that has your existing HTML code in it along with key Wordpress functions. You should not have to do much modifying of the Wordpress code or need to know much PHP as long as you can copy and paste what you need. Your HTML plus the existing Wordpress functions.

    This is not an insurmountable task. It will take you several hours. Consider it a fun learning experience and you will have a good time.

  3. #3
    SitePoint Member
    Join Date
    May 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply.

    I found this short tutorial and tried replacing the style.css in the Twenty Eleven theme entirely with my own style sheet and using my own HTML (split into header, index and footer) with the basic WordPress PHP functions inserted in (The Loop, The Header, etc.). It appears to have worked well, at least for the index page. So integrating the WordPress php functions into my existing code seems to be doable. I will just have to tinker with adding in more CSS from the original style sheet and see what I need and what I don't. I will look at the links you posted.

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,832
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by JTrainGBR83 View Post
    Thanks for the reply.

    I found this short tutorial
    Great. Keep in mind that there is more than what is in that tutorial you posted a link to such as menus, widgets, etc. My recollection of playing with the Loop and stuff is that it leaves some things out. It may be easier in the long run for you to copy the default theme, strip out the HTML and Wordpress functions you don't need replacing it with your own HTML from your layout, then customize the CSS.

    Some of the information you find on Wordpress.org is dated and does not discuss the newer features in Wordpress 3. The first external link on the page you linked to is from 8 years ago.

  5. #5
    SitePoint Member
    Join Date
    May 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think my biggest obstacle at this point is trying to sort through the default style sheet, which is over 1700 lines of code, and figure out what classes/IDs are important enough to copy and paste back into my css, and what each of them do.

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,832
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by JTrainGBR83 View Post
    I think my biggest obstacle at this point is trying to sort through the default style sheet, which is over 1700 lines of code, and figure out what classes/IDs are important enough to copy and paste back into my css, and what each of them do.
    You can probably worry about the CSS after you get your layout's HTML incorporated into your custom template. At that point, you can use a web developer tool such as Firefox's built-in Inspector to select an element with your mouse and inspect the relevant HTML and CSS that applies to that element. So you will know what you need to change. I would recommend the Opera browser's Dragonfly tool but the developers foolishly stripped that functionality and a whole bunch more out of the latest version of Opera rendering it nothing more than a stripped-down Google Chrome.

    Access the Firefox Inspector after loading your page by:

    Crtl + Shift + I

    Or:

    Tools -> Web Developer -> Inspector

    There are other web developer tools that may be more helpful but I am not familiar with them. I relied on Opera Dragonfly until they removed it!

    If you copy the default Wordpress theme to create your own custom theme you can modify the default CSS to suit your needs instead of having to pick through and copy over what you need.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •