Turning HTML site into WP site

CMS & WordPress
41

It took me a while to find it, but the “sandbox” theme has the main content first in the mark-up. It uses CSS to put the one or two sidebars both left, both right, or one each side.

index.php calls get_sidebar and sidebar.php is where 1 + 2 (or in your case left and right) are marked-up. eg. (very stripped)
index.php

<?php get_header(); ?>
<?php next_posts_link(__(
<?php previous_posts_link(__(
<?php while ( have_posts() ) : the_post() ?>
<?php the_content( __(
<?php comments_template() ?>
<?php endwhile; ?>
<?php next_posts_link(__(
<?php previous_posts_link(__(
<?php get_sidebar() ?>
<?php get_footer() ?>

sidebar.php

	<div id="primary" class="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) :
<?php endif;
	</div><!-- #primary .sidebar -->
	<div id="secondary" class="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) :
<?php endif;
	</div><!-- #secondary .sidebar -->
42

Got my sidebar to finally show up last night. I changed the code in the sidebar_left.php and sidebar_right.php pages and registered with a different piece of code in the functions.php page.

Now working on styling the calendar, which Firebug shows as #wp-calendar. Not having much luck.

43

I have been able to set up a testing environment on my business site.

I just noticed that IE 8 and 9 have completely broken the theme. I don’t understand what is going on. Can someone look at it and tell me what is going on? It works just fine in other browsers and works in IE when in HTML/CSS

You may view it at http://foxdenwebsolutions.com/test
The HTML/CSS version is at http://foxdenwebsolutions.com/CACNR/index.html

44

Cgacfox,

I’m not a coder (also a newbie here). I went through a similar situation. I had a 350 page static html site. To make things worse, the site was created with absolute positioning html. When I tried to hire a coder to convert it to Wordpress, each one looked at the code and told me I was on my own (it was a mess). I tried similar processes like the ones you outlined above. I was unsuccessful. I ended up starting over (pretty much from scratch).

First, I bought a copy of Artisteer (I’m not an affiliate) to create a duplicate of the static html layout. I was able to output it as a Wordpress theme. After that, I manually entered the page names and copy and pasted each page’s content/images etc. It took me 3 long weeks to convert everything. The result was exactly as I wanted, although it was labor-intensive.

It’s likely that your code is better than mine was (I designed my original site in WebEasy), so you may be able to accomplish this task much faster than I did.

One piece of advice: as soon as you convert to WP (even if you have blocked search engines etc.), activate some type of security plugins immediately (I like “Better WP Security”); I was hacked a few days after completing the conversion.

Good luck to you.

John

45

I found the problem. I had a comment at the beginning of index.php, which caused IE 8 & 9 to into, what I think was quirks mode. I took the comment out and now IE7 through IE9 show it as it should be.

46

Now I just need to fix the header for the calendar as it does not match the header for the links, which was easy to style being a text widget. GRRRRR

47

This isn’t online yet, is it? Otherwise it’s almost impossible to help with this, as we can’t see the problem.

48

Its up, Ralph. Go to http://foxdenwebsolutions.com/test

49

Hm, they look the same to me. What browser are you using?

50

I am viewing in IE9, FF, Chrome, etc. The header for calendar sits higher than the header for links. I can see rounded corners at the top on calendar. There shouldn’t be.

51

I looked at what I did for my sidebars again. Actually what I did was combine the two into one file. So there is only sidebar.php.

52

Try making the changes in red below:

[around line 163]

caption {
text-transform: uppercase;
font: bold italic 125%/120% arial, helvetica, sans-serif;
color: black;
background: #6BD url(images/h2Background.png) top left repeat-x;
border: 2px solid black;
box-shadow: 0 2px 6px #432;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin: [COLOR="#FF0000"]0 -4px -10px;[/COLOR]
padding: 0.2em 0.8em 0.1em;
}

[Around line 271]

#wp-calendar {
width: 90%;
margin: 0 14px 0.8em;
padding: [COLOR="#FF0000"]20px[/COLOR] 1em 0.5em; 
-webkit-border-radius: [COLOR="#FF0000"]0 0 8px 8px[/COLOR];
-moz-border-radius: [COLOR="#FF0000"]0 0 8px 8px[/COLOR];
border-radius: [COLOR="#FF0000"]0 0 8px 8px[/COLOR]; 
margin-bottom: 1em;
color: black;
background: white;
}
53

Thanks, Ralph again you are a life saver. I kept playing around with the subSection code and couldn’t get it to do what I needed it to do. Another reason that WP is so frustrating…what works in straight HMTL and CSS, does NOT work in WP.

Now on to adding the other pages. I was thinking that since I have one sidebar.php page, this might be a problem but I think it will work since the functions.php page has the 2 sidebars registered separately. So I believe if I not include the <?php get_sidebar(left); ?> on the other pages, it should LOGICALLY not pull the left sidebar onto the page. We will see! I will have to do this when I get home from work tonight.

54

Although this particular matter is really just a HTML/CSS issue anyhow. But I understand the frustration. :slight_smile:

55

Now I am stuck again. I have to add the other pages of the website to wordpress and have no idea how to go about this. I have built my own nav at the top and in the footer. It isn’t as easy as cutting and pasting code as when I tried to do this, the “index.php” page, which should be my “home” page, shows what I have on that page and what I adding for the next page in the nav bar. So I need help with the magic code that will produce my 5 other pages as static pages. However, what is posted there needs to show up on the index.php page as New Posts! Is this possible?

56

I have been doing lots of reading and may have made a mistake creating the index.php as I did. Looks like I have to create a home.php page to be the first page and alter the index.php page to just add new post info in the middle section of the home.php page. All other pages will be static pages. This site is NOT to be a blog at all but more of a "business’ site. Is it possible to strip down the index.php page to just pick up info that has been posted on the other pages as sort of a preview? If it can be stripped down, then I am thinking just have The Loop info on that page. Everything else goes away such as the get header, get sidebar, and get footer. Please let me know if I am thinking this through correctly?

57

I am so lost right now, I can’t even think straight. Could someone please help with my site? This is really a STATIC site using WP as a CMS and I am so confused as to how to go about this. The INDEX.php file has to remain according to WP. So I have 6 total pages in the site. The home page is set up differently than the 5 other pages. I know I probably need to use some sort of PHP code to accomplish this but the codex is confusing me and there are no really good tutorials on how to create an entire static site using WP as a CMS. There will be NO blog. HELP!!!

58

I just watched a video on youtube about using WordPress as a CMS. That is what I need to do. the video stated to take all your HTML pages in your site and save them as .php pages. Then at the tops of each page put the code <?php /* Template Name: Home or whatever */ ?>. Create a new PAGE and under Template on the right side of the page choose the name of the page you are creating in the dropdown. Continue to add new pages until you have all that you need. Under the settings tab you will choose static page for the home page. The video then says to change permalinks to day and name. Next find a theme with the page.php in it and take the code from that and place it in your page so that it is editable. Each page will be a template. Then you can paste the editable content back in on each page. Links have to be relative. Does this sound correct for what I am trying to accomplish? He didn’t go into navs or the style.css page at all. I am thinking that I would still add that as style.css as I did before. I am just wondering about the nav now. What path do I use in order for the nav to be usable.