The How Two

Wed, 10 Mar 2010 07:36:18 +0000

Ok How do i take the output from Site Grinder

and use it in Wordpress.

Step by Step By: Edward Morgan

Ok with WP a not very used feature that many people do not know about is making a WP home page that is outside the WP loop.

So you can make any page you design a WP home page so your normal WP side bar information is not showing up and the home page is custom any way you want it to look.

The best feature of doing this is you can use two simple sets of code one set at the very top of you page and one at the very bottom of your page. Placing this simple code into your page for one tells WP that you want to use this page and it will then show up as a template when you are making a post or page.

The other great feature of using this code is you can have the WP header and footer pulled into you custom page so your new custom page looks 100% like the rest of your WP site. This makes things very easy to work with.

So lets make our new WP home page. First go into Photoshop and make a page that is a few pix smaller then your blog site. You want it a few pix smaller otherwise it will run off the side and mess up the format of the WP page.

Remember do not make a top and bottom to your page as the WP header and footer will be auto added in for you so you just need to design your content area. (Less Work For You)

Now that you have your page designed in PS take it into Site Grinder and make sure everything is working right and set you compresion settings for you images and other items.

Build and save out your design like normal. Now go to the saved out folder and find the HTML file that was created and click on it and change the .HTML to .php WP needs this page to be a .php page not a html page.

Now the hard part you need to open up your now .php file lets call it homepage.php in a editor and you will see at the top.

">"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

">xmlns="http://www.w3.org/1999/xhtml">

http://www.medialab.com/sitegrinder" />

SGPost

----------------------------

What you need to do is remove most all of that and only keep this line

href="homepage.css"> you do not need head and body tags for a WP page as WP will add this as it is needed for you and WP will add all the top page information for you.

Now in the place that says href="homepage.css you need to enter in what is going to be the excat path to this file or it will not work. The file path will be into your theme folder and in the filder for the theme you are using like.

http://yourwebsite/wp-content/themes/What-ever-your-theme-name-is-you-are-using/mysite.css so you new code would look like this.

" style="color:#0000FF;">http://yourwebsite/wp-content/themes/What-ever-your-theme-name-is-you-are-using/homepage.css">

Ok we are almost done. We now just need to add the specilal head and footer code and name your page so WP can use it.

At the very top of your page in the code place this code

The text that says homepage you can change to anything that you want. The text will show up in WP for you to pick this page to use as your new home page.

Now at the very bottom of the page after everything place in this code.

Now save your page we are done editing.

Now FTP into you Wordpress site and go to wp-content/themes/the -folder-of-the-theme-you-are-using.

In the themes folder that you are using upload all your files they should be.

homepage.css

homepage.php

homepagemedia

Thats it! well almost.

Now go to your WP site and log in to your admin area and go and make a new page and call this page Home unless you all ready have one named Home. If you all ready have one named Home then go to that page.

No in the page area you will now see a new feature called Template over on the right under Parent.

If you did everything right you can now pick your new page from the drop down list. You will see the name that you entered in to the top of the page as part of the new top of page code we put in.

Select that template and just save the page and this new page is now your new WP home page showing with the WP header and footer all in place for you.

This is very easy once you get the hang of it.

To add a Site Grinder design into a Page or Post

This is even more easy. First make sure you design your content to be a size that will fit into your blog page or post page. I am using 721 pix wide for this and the full website is 980 wide. You must be carfull as many times a blog page or post has formating that will make everything be in from the right and left side some so you need to make sure what you design is going to fit. I good way to test this is to insert photo into your page and keep resizing it and posting it and looking to see till it is not longer fiting right.

Now you must save your new page into a new folder as we are going to have a new css file and we nead to have a new name for it so we do not over write you new homepage css we just made.

Make a new folder and page name for every new page you design.

Now after your design is all done and exported out in Site Grinder go to the html page and only change the path to your css file. You do not need to do any of the other things as we are going to insert the code into WP.

Now upload the media folder and files and upload the css file all into the same folder as the theme you are using.

DO NOT UPLOAD THE HTML FILE

Now go to the WP admin area and goto or start a page or post and set it to be in the HTML view mode.

Now click on your html page still on your computer and go to the code view and copy all the main code starting with the line that has the css in it on down to the end but with out the head and body tags at the bottom.

Paste this code into the WP page or post and save it and thats it.

If you did everything right you should see your new design in the page or post working as you want.

If things are not working right it can be a few things.

If you see all your text but do not see any of the photos and objects then you do not have your css file pointer right in your .php file. The css file is what makes all the images and layout work right.

If you see nothing working make sure you changed the file from html to .php and make sure you placed the special WP code into the top and bottom of you page otherwise it will not work.

Here are some screen graps to help you add a new home page to WP

Design your page with no top header and no

footer as WP will add this for you

After you export the page from Site Grinder

Change the name of the page to .php

Add the special WP code to the top abd

bottom of your page

Bottom code

Go into your WP admin and start or

use a current page or post and you

will now see the new feature

dropdown list caller Template.

Pick your new home page from the list.

Then save the pahe and view it.

Your all done

FTP your files into the same folder of the current

WP theme you are using

This page was designed in PS and output

with Site Grinder V2

How to use Site Grinder with Wordpress

The How Two