Turning HTML site into WP site

I actually dropped them in with the style.css and did this code - <link rel=“stylesheet” href=“<?php bloginfo(‘template_url’); ?>/bigScreen.css” type=“text/css” media=“screen and (min-width:66em)”/>

The only one that did not work was flexslider.css. I just left that as the relative path.

I am still fighting with getting my left and right sidebars to work. Where I have the dummy text for the content will be where recent posts will populate so that will contain The Loop.

I don’t want the default “pages”, “archives”, “categories”, and “meta” to show up. Any idea how to get rid of those? This is a WP site but the client wants it to be more of a regular business site that he can maintain with adding his own content. So the sections mentioned do not need to be present.

That’s why I don’t use WP … too much junk you just have to get rid of.

Anyhow, you can dig into the template files and find the bits of code that pull in those items and just delete them from the templates. Not sure which one, but often a lot of it is in the sidebar file.

I know, I know, Ralph. I am not really fond of it either but it’s what the client wants. Luckily he is a friend of my husband’s and understands that there is a learning curve with this. Plus it seems that more and more people want to use WP because they can then handle the site themselves once we have done our job!

Indeed, although every CMS allows for that. :slight_smile: The main reason I don’t like WP is that it’s not primarily designed for regular websites, while other systems (like MODx and ExpressionEngine) are for just that, so you don’t have to hack them around.

Anyhow, just saying. I’m not trying to put you off. :slight_smile:

I know, it’s just frustrating that there aren’t more WP people on Sitepoint, not that I have anything against you, Ralph. You have bailed me out of trouble countless times! :wink:

SiteGrinder, the software I use to convert PSD to HTML also has a plug in that allows you to convert PSD to Wordpress. So in theory you can first go from PSD > HTML > Wordpress.

Thank god… those script kiddies are a breed of their own.

Thanks, I needed a good laugh. PSD > Sitegrinder > Wordpress… lmfao. Like I said, breed of their own. Making every technical sacrifice under the sun to avoid learning some PHP, HTML and CSS. The way the designer mind works…

Well it’s a little too late for SiteGrinder. The site is built and functions outside of the WP environment. I am trying to learn the proper way to add PHP to HTML in the WP environment. I don’t want to sacrifice anything. However, even though my client is patient about me learning WP, I cannot take forever. So if there is anyone on Sitepoint that KNOWS WP and can help me learn it, please step forward. I have even posted my problem on the WP forums and am waiting for someone to step forward to help me learn quickly for this project.

One would think people on the WP forum would be eager to help out. There is a WP forum right.

Anyone that is a WP expert willing to help me learn how to convert the HTML/CSS site into a WP site?

I wouldn’t call myself a WordPress expert but I know some.

The more static pages you have the more work is ahead of you.

First I would get WordPress, look for a suitable theme and tweak it.

Considerations are what would be “content” and what would go in sidebars. AFAIK navigation should be fairly easy.

Then it’s a matter of entering the content into pages (not posts) and the “other stuff” into the sidebars.

So it really depends on how many and how complex your static pages are.

If you look at the beginning of this post, I am taking an HTML/CSS site and converting it over to WP. I really don’t want to make a child theme as there is a lot of stuff I don’t want in there. This is a business site that will be handled by the client after I do my stuff. I have watched a few video tutorials, read a few tutorials online, and have a few books (including one from Sitepoint). The problem I am currently having is in the original site there are left and right sidebars. They are not showing up in WP. I have tweaked the original code I posted at the beginning so here is the new code…

header.php


<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<title><?php if (is_single() || is_page() || is_archive()) { wp_title('',true); } else { bloginfo('description'); } ?> — <?php bloginfo('name'); ?></title>
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection, TV" />
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/bigScreen.css" type="text/css" media="screen and (min-width:66em)"/>
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/smallScreen.css" type="text/css" media="screen and (max-width:751px)"/>
    <link rel="stylesheet"href="<?php bloginfo('template_url'); ?>/css/flexslider.css">
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.flexslider.js"></script>
<script type="text/javascript">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>
<?php wp_head(); ?>
</head>	
<body>
<div id="pageWrapper">
  <h1> Centennial Airport Community Noise Roundtable </h1>
  <ul id="mainMenu">
    <li><a href="index.php">Home</a></li>
    <li><a href="noise101.php">Noise 101</a></li>
    <li><a href="meeting.php">Meeting Recaps</a></li>
    <li><a href="workplan.php">Workplan</a></li>
    <li><a href="about.php">About Us</a></li>
    <li><a href="newsletter.php">Newsletter</a></li>
  </ul>
  <hr />
 <div class="flexslider">
  <ul class="slides">
    <li>
      <img src="wp-content/themes/cacnr/images/1.png" />
    </li>
    <li>
      <img src="wp-content/themes/cacnr/images/2.png" />
    </li>
    <li>
      <img src="wp-content/themes/cacnr/images/3.png" />
    </li>
     <li>
      <img src="wp-content/themes/cacnr/images/4.png" />
    </li>
     <li>
      <img src="wp-content/themes/cacnr/images/5.png" />
    </li>
     <li>
      <img src="wp-content/themes/cacnr/images/6.png" />
    </li>
    <li>
      <img src="wp-content/themes/cacnr/images/7.png" />
    </li>
    <li>
      <img src="wp-content/themes/cacnr/images/8.png" />
    </li>
  </ul>
</div>
  <hr />
  <div id="columnWrapper">
    <div id="contentWrapper">

index.php


<div id="columnWrapper">
    <div id="contentWrapper">
<?php define('WP_USE_THEMES', false); get_header(); ?>

<div id="columnWrapper">
    <div id="contentWrapper">
      <div id="content">
        <h2>Recent Posts</h2>
        <div class="post">
          <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
          <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
          <!-- .post --></div>
        <!-- #content, #contentWrapper --></div>
    </div>
    	<?php get_sidebar(left); ?>
	<?php get_sidebar(right); ?>
	<?php get_footer(); ?>

sidebar_left.php


 <div id="sideBarWrapper">
<div id="sidebar_left">
      <?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>
      <h2>News</h2>
        <div class="subSection"> <img src="../images/placeHolder.png" alt="placeholder image" class="plate" />
          <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          <!-- .subSection --></div>
        <div class="subSection"> <img src="../images/placeHolder.png" alt="placeholder image" class="plate" />
          <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          <!-- .subSection --></div>
          <?php endif; ?>
        <!-- #sidebar_left --></div>
         <?php wp_sidebar(left); ?>

sidebar_right.php


 <div id="sidebar_right">
  <?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>
     (<?php _e('Search'); ?>
        <div id="sideLinks" class="subSection">
          <h2>Links</h2>
          <ul>
            <li><a href="http://webtrak.bksv.com/den" target="_blank">Track and view all aircraft in the metro area</a></li>
            <li><a href="http://www.centennialairport.com/Complaints" target="_blank">Homepage for Centennial Airport</a></li>
            <li><a href="http://www.centennialairport.com/" target="_blank">Centennial Airport Home Page</a></li>
            <li><a href="4.	http://aviation-noise.org/" target="_blank">National Organization to Insure a Sound Controlled Environment</a></li>
          </ul>
        </div>
        <div id="calendar">
          <h2>Calendar</h2> <!--this is where the calendar plugin will go-->
          <div id="RSS">
          <h2>RSS Feed</h2> <!--this is where the RSS feed plugin will go-->
          <!-- #RSS --></div>
        <!-- #sidebar_right --></div>
      <!-- #sideBarWrapper --></div>
      <?php endif; ?>
    <!-- #columnWrapper --></div>
<?php wp_sidebar(right); ?>
  <hr />

footer.php


<div id="footer">
    <ul>
       <li><a href="index.html">Home</a></li>
    <li><a href="noise101.html">Noise 101</a></li>
    <li><a href="meeting.html">Meeting Recaps</a></li>
    <li><a href="workplan.html">Workplan</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="newsletter.html">Newsletter</a></li>
    </ul>
    <hr />
    <div class="address"> Arapahoe County Public Airport Authority<br />
      7800 South Peoria Street, Box G-1<br />
      Englewood, CO 80112<br />
      (303) 790-0598 </div>
    <hr />
    <img src="wp-content/themes/cacnr/images/cacnr_logo.png" alt="CACNR Logo" /><br />
    &copy; 2012 Centennial Airport Community Noise Roundtable
    <hr />
    <div class="designBy"> Website Design By <a href="http://foxdenwebsolutions.com" target="_blank">Foxden Web Solutions</a> </div>
    <!-- #footer --></div>
  <!-- #pageWrapper --></div>
  <?php wp_footer(); ?>
</body>
</html>

Now I don’t know what is causing the sidebars not to show because I created a functions.php page and added this code


<?php
if ( function_exists('register_sidebar') )
    register_sidebars(2);
	(array(
       'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => '</div>',
        'before_title' => '<div class="title">',
        'after_title' => '</div>',
    ));
?>

I don’t want the customary pages, archives, categories, and meta to be showing up at all. They are not anywhere in my code but yet they are there. You can see images of the problems in the attached image.

Well I have deleted WP from my computer and re-installed it. I have downloaded several theme templates to work with including one that has a left and right sidebar. Interesting thing about that one is it calls the left sidebar at the top of the index.php page and the right sidebar is called at the bottom of the index.php page. Now when this site was built in HTML, the content comes first and then the sidebars. maybe that was what was wrong. The only way to tell is find more left and right sidebar templates to see if this is a pattern.

Downloaded 4 different themes with left and right sidebars…yup it’s a pattern. I was supposed to call the left sidebar first, then have the main content section then call the right sidebar and then the footer. I was going off of the layout of the actual site so this is where I screwed up. Now I have to code everything again as I deleted what I did. Oh well, good learning experience.

You can switch the order around any way you like. :slight_smile:

Well unfortunately what I tried did not work. I called the sidebar_left at the top of the index.php page and called sidebar_right at the bottom of the index.php page. Now the default sidebar crap is at the top of the content area and the content section for recent posts is at the bottom of the content area. Now the right sidebar will hold SOME widgets, such as the search section, a simple calendar, and RSS feed but I also want the clients links over there. The left sidebar will hold news items that he adds. Why can’t this be as straightforward as an HTML/CSS site?!?!? :mad::x:confused::(:nono::eek:

It can be, if you use a better CMS. :smiley:

Anyhow, once you’ve moved those bits around, you can go into those files begin called in and swap bits around there as well. It is all a bit mess, though, so I feel your pain. This is the reason I don’t use WP. I prefer a CMS wehre you start with a blank slate, or your own HTML page, and just plug things in straight where they belong. Even if you pay a bit for the CMS, if you think of how much time you are spending trying to get WP into shape, it’s actually a considerable saving … at least of time, but also chargeable time.

There has to be something wrong with my code…either in the php or how I “sliced” it or in the CSS. Something is wrong and I need someone to really look at the code and tell me what is wrong because I have no clue. Maybe it is in how Jason put it all together. It doesn’t like to play with Wordpress.

No, it’s nothing to do with the HTML and CSS. It’s to do with WP being a mongrel of a CMS to theme. :frowning:

Ok I think I have figured it out. I have found what is called a Text Widget. This is used in the “widgetized” sidebars. You can add anything you want to them. I have to look into this further because I was able to get “text” in the left sidebar but it is not in the format that I need nor is it to the left, it is still above the content section. I think I still need to do something with the sidebar_left.php and sidebar_right.php pages and possibly the CSS. If there are any WP gurus on this forum, please let me know if I am on the right track!