Resources and Tutorials for Graphic Designers and Web Designers

How to Integrate a WordPress Blog Into Your Existing Website

By swolock | December 31, 2008

The alternate title for this tutorial is Or How I Added a Wordpress Blog to This Website. This tutorial assumes you’re using PHP, CSS and XHTML. This tutorial is based on WordPress 2.7. This is not a tutorial about making a standard WordPress theme. It does not strictly adhere to the standards set in Designing Themes for Public Release. It is intended to seamlessly incorporate a blog into an existing website.

You’ll need to know some basics:

how to FTP to your site;
how to set permissions;
your database hostname (probably localhost), the database name, your username and your password for the database; and
some CSS and XHTML basics.

Download and install WordPress

Download WordPress.
Install WordPress on your server in a new directory. Call it something user-friendly like ‘blog’ or ‘articles’. A separate folder for your blog helps keeps the your site organized and reduces the chance of accidentally overwriting an existing file with a file in the WordPress installation. Follow the easy five-minute installation instructions.
Complete the installation and make sure everything is working. See Common Installation Problems or add a comment below if you’re having trouble.
Right off the bat you may want to install the Akismet plugin to help keep the spam at bay.

NOTE: The steps below assume that you can edit files with a text or web editing program on your local computer and save them directly to your web server. Alternatively, you can work on the local files (the WordPress directory you downloaded) and upload them to your server as you work.

Initial set-up for your blog template

FTP into the WordPress installation on your server.
Go to the themes directory. It’s in /yourwordpressdirectory/wp-content/themes.
In the themes directory you’ll see that each theme has it’s own directory. Duplicate the classic directory, which houses the classic theme.
Think of a name for your new theme, like ‘My Theme’ or ‘Existential’. Let’s call this one My Theme’.
Rename the duplicated directory to your new theme’s name except use a server friendly name. Following the My Theme example, we’ll call the directory my_theme.
In the my_theme directory, open the file style.css with a text or web editing program, I like Adobe Dreamweaver and BBEdit (Mac only).
Change the following lines (should be about lines 2-7) to information about you and your theme:
Theme Name: Your Theme Name Theme URI: http://yourwebsite.com/ Description: A description for your theme. Version: 1.0 Author: Your Name Tags: tags, for, your, theme, separated, by, commas
Once that’s saved login your blog control panel at http://yourwebsite.com/yourwordpressdirectory/wp-login.php.
Click on Appearance then on Themes if it isn’t already selected.
You should see your theme name, in this example, My Theme, with a thumbnail that looks exactly like the Classic theme thumbnail. That’s because we haven’t changed the thumbnail yet. Click on the thumbnail or the theme name. You’ll see a preview window that looks exactly like the Classic theme, then click on Activate “Your Theme Name” in the upper right corner of the preview window. Of course, in this example Activate “Your Theme Name” would be Activate “My Theme”.
View your blog in another browser window or tab to make sure it’s still working. For now it should look just like the Classic theme.

Make an empty skeleton page of your website

This part gets a little ugly before it gets better. You’re going to overwrite index.php in your new theme’s directory with a page from your existing website then fix broken links to style sheets, images, hyperlinks, includes and scripts. Later you’ll add the WordPress code as needed after the skeleton page is working correctly.

From your website, open an existing page that has a layout similar to the layout you would like for your blog. Consider the header, number of columns you’ll want, the footer and any other common parts. I will use my About Us page because it has the header, a simple 2-column content area the footer.
Save the file as index.php in /yourwordpressdirectory/wp-content/themes/yourthemename. Make sure you save the file in the correct directory so you don’t accidentally overwrite an important index file.
Leaving the page layout structure intact, delete the content from this file that you will not want in your blog. I deleted just the about us content and left the header, empty content area and footer as is. Preview your blog in another browser window or tab, it probably isn’t looking so great. Not to worry.
Make sure the CSS file links are OK. You can use relative links with dots like ../../../../styles/main-styles.css, absolute links like http://www.mywebsite.com/styles/main-styles.css or a reference to the root directory like /styles/main-styles.css. You’ll know it’s OK if your background and divs are working. Personally, all those dots confuse me. I prefer the reference to root directory method.
Fix links for hyperlinks, to images and to any scripts as above.
If there are header, footer or other files that are used in your skeleton page with a PHP include() statement, copy the files into the yourthemename directory. WordPress 2.7 does not recognize the PHP include() statement.
Replace the PHP include() statements with:
Using include (TEMPLATEPATH . '/your_include_file.php'); is the WordPress 2.7 way to include a non-WordPress file. But as far as I know the file has to be in the template directory. I would be interested in learning an easier and better solution for this if anyone knows one.
Preview your skeleton page again. It should look and function OK but without blog content.

Create the header and footer files

Make a new PHP file and save it to the yourthemename directory naming it header.php. It will overwrite the existing header.php file. Again, make sure you save the file in the correct directory.
Make a duplicate of the index.php in the yourthemename directory and name it index-backup1.php or similar. This is a backup copy just in case.
Open index.php from the yourthemename directory if it isn’t already open. Cut (not copy) the code from the top of the page up to and including the closing head tag .
In the new header.php, replace all of the existing code with the code in your clipboard cut from the top of index.php.
Save both files.
Make another new PHP file and save it to the yourthemename directory naming it footer.php. It will overwrite the existing footer.php file.
From index.php, cut (not copy) the code beginning with your footer, just after the end of the content divs, and paste it into the new file footer.php, replacing any code that was there.
You may need to customize this part some because this tutorial is assuming you are using well-defined div for the different areas of your skeleton page.
Save footer.php.

Put it back together and add the WordPress parts

Open index.php from the yourthemename directory if it isn’t already open.
Also open index.php from the classic directory.
Copy (not cut) the first PHP block, probably lines 1-7, from classic/index.php and paste it immediately above the body tag in yourthemename/index.php.

^?View Code PHP

<?
/**
 * @package WordPress
 * @subpackage Classic_Theme
 */
 get_header();
 ?>

Save yourthemename/index.php and preview your file. You should see your header but no blog, footer or sidebar with categories, recent posts, search, etc.
Copy the last PHP block, it should be and paste it at the very end of yourthemename/index.php.
Save yourthemename/index.php and preview your file. You should see your header and footer but still no blog or sidebar.

Copy the middle section—everything between between the header block and the footer block—from classic/index.php and paste into the main content area of yourthemename/index.php.

^?View Code PHP

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
<?php the_date('','
<h2>','</h2>
 
'); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="meta"><?php _e("Filed under:"); ?> <?php the_category(',') ?> &#8212; <?php the_tags(__('Tags: '), ', ', ' &#8212; '); ?> <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?></div>
<div class="storycontent">
		<?php the_content(__('(more...)')); ?>
	</div>
<div class="feedback">
		<?php wp_link_pages(); ?>
		<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
	</div>
</div>
 
<?php comments_template(); // Get wp-comments.php template ?>
 
<?php endwhile; else: ?>
 
<?php _e('Sorry, no posts matched your criteria.'); ?>
 
<?php endif; ?>
 
<?php posts_nav_link(' &#8212; ', __('&laquo; Newer Posts'), __('Older Posts &raquo;')); ?>
 
<?php get_footer(); ?>

Save yourthemename/index.php and preview your file. You should see your header, footer, your blog but no sidebar.
Open classic/footer.php. Copy the following from classic/footer.php and paste into the div in yourthemename/index.php where you want the sidebar to go.
^?View Code PHP
<?php get_sidebar(); ?>
Save yourthemename/index.php and preview your file. You should now see all of the basics.

Everything should be working now. Next you can customize sidebar if you want to or finish up with a screen shot.

Add the screenshot

The final step is to replace the screenshot of your blog.

Take a screen shot of your new blog.
Crop it to 300px wide by 225px high.
Save it as a png to the yourthemename directory as screenshot.png replacing the classic screenshot that is currently there.
Login your blog control panel at http://yourwebsite.com/yourwordpressdirectory/wp-login.php.
Click on Appearance then on Themes if it isn’t already selected.
You should see the screenshot of your integrated blog. You may need to refresh the page.

In the blog you are reading this from, I modified the sidebar bar a bit. Please visit How to Customize the WordPress Sidebar.

I hope you find this tutorial useful and accurate. I would greatly appreciate comments, suggestions and corrections.

Next Article: WordPress Blog Intergration Update

77 Comments

77 Comments | Leave a comment

Hello,

I have followed every step of this tutorial and it isnt working. When i preview my template all I see is:

‘,’ ‘); ?>
id=”post-”>
— @

If you could help me fix this or even just make my template work with wordpress I would happily compensate you for your time. Thank you,

Justin Edelson
http://justinledelson.com

[Reply]

Comment by Justin — January 24, 2009

Justin, can you provide a little more info?

[Reply]

Comment by swolock — January 25, 2009

[...] How to Integrate a WordPress Blog Into Your Existing Website Entries by Month: [...]

Pingback by WordPress Blog Intergration Update | River Graphics — January 25, 2009

Hello Steve,

No your post worked very well and it was easy to follow. The problem I had was my container stretching to fix the posts. Here is my container css

background:url(images/background_main.jpg) no-repeat;
height:auto !important;
width:1000px;
position:relative;

I have the height set at auto but I don’t think my css could see how many posts there were so it would just overlap and go into my footer.
So to solve this I just made a seperte tag and added the property: min-height. I set that to 1000 and changed the setting in wordpress to only allow 5 posts per page. Now I just have to make sure I don’t write posts that are too big. (open up in height or width?)

Thanks,

Justin Edelson

[Reply]
Reply by: swolock
January 28th, 2009
I use min-height a lot for main containers. I usually make mine a real minimum, like 400px. That makes the container grow with the content. The content for this particular post is really long and it works OK. It’s especially useful if you have a background image in the div with a repeat-y to create a fake column or a dividing rule. Happy blogging.

[Reply]

Comment by Justin — January 26, 2009

The problem i was having was that it wouldnt stretch with my wordpress. It worked for regular text. But not for wordpress. I still would like it to stretch with wordpress if you know a way.

[Reply]

Comment by Justin — January 29, 2009

It may be that you need to clear the float immediately after your sidebar and content divs. You can make a class like .clearfloat { clear: both } then assign it to a BR. That would go after the last closing div of the sidebar and content divs or right before the closing div that contains the sidebar and content divs. I don’t know for sure if that will help but it might.

[Reply]

Comment by swolock — February 2, 2009

Great article! I personally have been working on this exact problem recently, and I think I actually came up with something tolerable, though a bit different from your solution. In my case, I was avoiding the whole Wordpress theming issue partially because I didn’t want to get sucked into theming more and more of Wordpress and partly because I hate having duplicate themes in different formats (my base web theme, the wordpress theme, a joomla theme, etc etc) So… I went ahead and just sucked the wordpress blog into my site using the rss feed. I based all of my work off of an RSS library I found online somewhere and basically have a library where I use one function to grab and url-rewrite the rss feed which services as a table of contents, and another function which gets the contents of any given posts and outs them. Anyways, if anyone’s curious, I talk about it Here

[Reply]

Comment by Vancouver Web Developer Palantar — February 12, 2009

Thanks for a great post. I made two attempts before reading your step-by-step instructions and almost gave up. I surprised myself! My blog mirrors my website. The only problem is that instead of the page being centered, it’s left-aligned. My initial instinct was to fiddle around with the stylesheet, but to no avail. Any suggestions?

Thanks again.

[Reply]

Comment by Debbie — February 18, 2009

Hi Debbie

Why don’t you email me through our website or post your URL here so I can look at it. It may be that you aren’t using that magic combination of a “text-align: center;” in the body CSS and “margin: 0 auto;” in the div containing your content. Does that make sense?

[Reply]

Comment by swolock — February 19, 2009

This worked perfectlly for me and saved me hours trying to sort it out, a massive thank you!

I assume that I can upgeate WP with no problems as this is now just another template?

[Reply]
Reply by: swolock
February 20th, 2009
It should work OK with upgrades but you never know for sure. I upgraded from 2.7 to 2.7.1 with no problem at all.

[Reply]

Comment by Steve — February 20, 2009

Thank you so much for your great article. I almost got it to work but have two errors. One is that my time menu hangs down on top of the text of the blog. Secondly, the sidebar is not coming up right. If you could help me I would appreciate it so much.

Thanks
Justin

[Reply]
Reply by: swolock
February 22nd, 2009
Hi Justin,

It’s a little hard to tell what’s going on but after looking at your page I noticed you have a div tag, div id=”content”, as the first thing in your code. I’m not sure where that should go, but certainly not there, probably immediately before where you want your content to begin. Also, it looks like your sidebar is in the footer div. If you want to have a column for the sidebar and a column for blog content you need to add an extra column that floats left or right. There are a few ways of doing this. I like a float left div and a float right div inside a parent div with a clear float right after the floated divs. Does this help?

[Reply]

Comment by Justin Katz — February 21, 2009

Sorry type, meant to write top not time. Thanks again.

[Reply]

Comment by Justin Katz — February 21, 2009

Unfortunately I am not that proficient in web design as yet. Perhaps I could send you the files and you could fix them. I would compensate you for the work. Thanks, Justin
Please email me you response at yossik@breslov.org

[Reply]
Reply by: swolock
February 23rd, 2009
Justin

Why don’t you just email header.php, index.php and footer.php to web.inquiry@rivergraphics.net and I’ll take a quick look at them gratis. If it’s something simple, and I think it is, I’ll just fix it, if it’s more complex I’ll let you know.

[Reply]

Comment by Justin Katz — February 22, 2009

Your the best!

[Reply]

Comment by Justin Katz — February 23, 2009

Hi Steve,

Great article. Thanks heaps. I’ve been looking around for a simple solution to this ‘dilemma’ for a while. Thanks for laying it out so clearly. It worked a treat! Now the only problem to contend with is actually writing the content

Cheers,
Anthony.

[Reply]

Comment by Anthony Hortin — February 28, 2009

Thank you!!! I was at this for a day and a half before I came across your post. Genius! Worked like a charm!

[Reply]

Comment by Mike — March 6, 2009

Great and detailed explanation. Thank you.
However, I keep getting an error message every time I upload the three files.

“Parse error: syntax error, unexpected T_ENDWHILE in /mnt/web3/30/41/5799441/htdocs/mywebsite.com/wordpress/wp-content/themes/dhcom/index.php on line 23″

This is line 23.

Any idea what causes that? Sorry, I’m still a beginner.

[Reply]
Reply by: swolock
March 25th, 2009
Hi Christina

Did you complete all of the steps? I ask because it won’t work until late in the process. Would you like to provide a link to what you have so far?

[Reply]

Comment by Christina — March 25, 2009

Hi, thanks for your quick response. I spent the rest of the afternoon redoing everything a few times and it turned out I had copied the wrong code. I was just too stupid to read the instructions right. Sorry about that.
Maybe as a little suggestion, you could split the box under number 7 so it becomes a little clearer which parts should be copied and pasted.
Again, thank you. This works great.

By the way, is there a way to add the blog archive from the side bar (or the whole side bar), as well? This only shows the posts.

[Reply]

Comment by Christina — March 25, 2009

Silly me. Ignore… I found it.

[Reply]

Comment by Christina — March 25, 2009

Hi

im really new to this – i’m finding it really easy SO far — im a little lost on the header.php and footer.php section is this defining where my blog section starts and ends ? as in the area size i want my blog to be ?

[Reply]

Comment by Simon Taylor — March 25, 2009

Hi, great tutorial, thanks… It looks really good but I have one problem that I simply cannot solve. I was able to adapt all the fonts in Dreamweaver to my current layout. However, the date above the subjects is not changable in Dreamweaver. It’s the same as the subject line. I figured it had something to do with H2 and so I made some changes in the style.css file. However, that didn’t change anything. I tried to remove the H2 tags from the index page but that only changed the date of the latest post and the older post dates were in this case not bold.
How can I change the font? Thanks in advance.

[Reply]

Comment by Welch — March 26, 2009

hello and thank you so much for the tutorial, i tried this on my bro in laws website i built for him for a portfolio for work and incorporated the blog tonight. the website is http://www.clauderhodes.com and for some reason when i put the code it for the side bar it pushed the blog part down below it. instead of even like it was. i changed no code only put that php part in the sidebar like u said. i am wondering if i was to change something else, if anyone has ideas thank you

[Reply]

Comment by Johnny Walker — April 4, 2009

wow, so 1. not sarcastic thank you for not replying fast it gave me time to sit back and problem solve, it turned out that i had the sidebar coded before my main col for the blog and i just accidently put 2 instead of the just 1 needed and for some reason that pushed my blog content past my container and below my sidebar so it is solved problem fixed. clauderhodes.com/blg is up and running thanks to you.

[Reply]

Comment by Johnny Walker — April 5, 2009

Thanks for the great tutorial. Worked perfectly first time.

[Reply]

Comment by mcred — April 23, 2009

Hi Steve,

I have scoured the web for instructions on how to implement this idea, and you tutorial, sir, is by far the best. Well written and professionally presented. I went through the process and got the gist of it all. Granted, I have much tweaking to do, but you are the only one thus far who has managed to get me off the ground by explaining the process in clear terms. Thank you for all the time you put into the tutorial. We’re reading and learning from it!

Marc

[Reply]

Comment by Marc — April 28, 2009

Hi thanks for the tutorial.

I have a dir like this
/docroot/mysitedir/blog/ with wp inside that will manage the post feature.

Now I need to add another subdir
/docroot/mysitedir/travel-diaries/ that will be managed by the wp pages feature.

How can I do that without installing a second wordpress into /docroot/mysitedir/travel-diaries/ ?

What I need is just the right dir name for site navigation:
http://mysite/blog/...
http://mysiste/travel-diaries/...

Thank you in advance.
Dana

[Reply]
Reply by: swolock
June 17th, 2009
Dana… Are you saying you want your blog to be in the directory travel-diaries instead of blog?

[Reply]

Comment by Dana — May 21, 2009

I followed all the directions and find them very helpful, but when i insert my side bar, it does not stay “floating” to the left. Can you take a look at my site and my site source to see what the problem is? Thanks.
http://www.eliterhino.com

[Reply]
Reply by: swolock
June 17th, 2009
What do you mean by ‘floating’. Your site looks fine to me!

[Reply]

Comment by kris — June 11, 2009

Hi – Thanks, this was great! I was successful following these steps for my client’s site:

http://www.expectthebestpregnancy.com/blog

BUT — I want to delete the “meta” list in the sidebar. This is a WIDGET which comes in the Classic template, but it is not listed in the Widget page in WP admin. HOW DO I GET RID OF THE META LIST? I’m talking about the list that says “site admin” “log out” “rss” “comments rss” etc.

THANK YOU!!

[Reply]
Reply by: swolock
June 17th, 2009
Are you saying that you didn’t see meta in the admin area under appearance > widgets?

[Reply]

Comment by Welltech — June 17, 2009

correct. Under “current widgets” there’s just one in the dropdown, called “sidebar1.” when that is selected, it says, “You are using 0 widgets in the sidebar.”

[Reply]
Reply by: swolock
June 17th, 2009
I’m not sure about this but I believe the links you want to get rid of are coded in sidebar.php. In sidebar.php look for li id=”meta” or php _e(‘Meta:’); . Right under that you’ll probably see some wp links plus some regular HTML links to validator.w3.org, gmpg.org, and wordpress.org depending on what you want to do you can either delete the whole block beginning with li id=”meta” and ending with the closing li or delete the 7(?) lines above ?php wp_meta(); ?. If you delete the whole block the whole meta thing will go away. If you delete coded links (the 7(?) lines) and leave ?php wp_meta(); ? you’ll still have the meta block but be able to control through wp-admin. Your files might be a bit different but that should get you rolling. I removed the < and > from this post because wp doesn’t like them. I hope this helps.

[Reply]

Comment by Welltech — June 17, 2009

You are ABSOLUTELY RIGHT ON. Thank you a million! I don’t understand how this was “disassociated” from the Widgets… well it’s probably better to have Code Control anyway. THANK YOU THANK YOU THANK YOU!!!

[Reply]

Comment by Welltech — June 17, 2009

Hi

thanks for putting up the tutorial I have follwed your instructions and it seems to be working fine although I do have two minor issues that I could do with some help with,

1, It seems to be missing the one image from the navigaation menu and the mouseover images I have checked the paths and ri-inserted them but I can not seem to fix

2, How can I change the text size and weight ive gone through the style sheet and change all font references but it does not seem to be making any difference.

Any help would be appreciated

Many thanks

Gazelle

[Reply]
Reply by: swolock
June 29th, 2009
Hi Gazelle.

1, It seems to be missing the one image from the navigaation menu and the mouseover images I have checked the paths and ri-inserted them but I can not seem to fix

This is most likely due to in incorrect path to the image or a missing image. The paths seem OK but I’m guessing the mouseover images are missing.

2, How can I change the text size and weight ive gone through the style sheet and change all font references but it does not seem to be making any difference.

Looking at your source, I didn’t see a link to any stylesheet. Make sure there’s a link to whatever stylesheet you’re referring to. Also, make sure the < ?php wp_head(); ?> is in your header.php file.

I noticed that you have the source code for a blank html page at the end of your page, you might want to clean that up.

[Reply]

Comment by Gazelle — June 29, 2009

Hi thanks for the info

you were right I had uploaded the wrong image folder which is why I could not see the images.

I have attached style sheet which works fine aprt form the sidebar which is now been chucked out of of the frame and sits tight to the right hand side

any thoughts

regards

Gazelle

[Reply]
Reply by: swolock
July 1st, 2009
Make sure you clear the float for your blog content div and the sidebar div. I like to create a class like .clearboth { clear: both;} then assign it to a br like br class="clearboth" . The important thing is to make sure you put br class="clearboth" after the closing tag of the content div or the sidebar div, whichever comes last. I usually deal with that by putting br class="clearboth" before the closing tag of the div that contains both the content div and the sidebar div. Does that make sense?

[Reply]

Comment by Gazelle — June 29, 2009

Hi, Love the tutorial, just what I was looking for, this is the first time I have done a self-hosted wordpress blog and for some reason cant get it to work… I have followed the guidelines but when I preview online the file doesnt have the style sheet for my main site attached – it is in the header.php () but when previewing diplays without it… I have done the steps 3 times now and still no joy… any ideas? I just have a very simple one column page (no sidebar as yet as stripped that out for now)

[Reply]
Reply by: swolock
July 13th, 2009
It might be helpful if you provide a link to your blog. Also, see if putting the link to the CSS file just before the ending head tag helps.

[Reply]

Comment by Jon — July 13, 2009

I got everything down, designed my theme & template, I see my header & footer–I’m just totally lost on:

“7. Copy the middle section—everything between …area of yourthemename/index.php.”

Can you explain it more thoroughly? In other words, where am I to replace that php code you provided for us? I guess that’s the ONLY thing that’s confusing me. Other than that, I’m pretty ok.

[Reply]
Reply by: swolock
July 15th, 2009
Eva,

Sorry if this is confusing. Doing these things can be that way. Hence this tutorial.

You should have an area in yourthemename/index.php where the content is going to go. Do you have a div that holds the main content? What you need to do now is copy the code from classic/index.php into where you want the blog posts, etc. to go. Copying and pasting the code in step 7 should work fine but you may need to tweak it depending on your page’s structure. Does this help?

[Reply]

Comment by Eva — July 15, 2009

Ahh I think I got it! I wasn’t complaining if I said it was confusing. In fact, this was the ONLY tutorial that has helped me with Wordpress, after days of googling. Thank you so much Swolock, you’ve been extremely helpful! You don’t mind, if I have any problems with Wordpress, I could comment here & ask you?

[Reply]
Reply by: swolock
July 16th, 2009
I’m glad I could help. Ask away, if I can help I will.

[Reply]

Comment by Eva — July 15, 2009

Everything’s going smoothly, thanks once again Swolock!
I also reviewed my coding, it seems I was the one who made it confusing.
Thank you so much

[Reply]

Comment by Eva — July 21, 2009

Hi

Wonderful tutorial for begginers to wrodpress like me! very simple and straight! I am trying to build a website, I have initially created a html based site that is still not launched and now I want to integrate wordpress blog. But, I have couple of questions:
1. I want to know whether I need to merge the stylesheet from my theme into the main stylesheet (of my website)?
2. After going through your steps, I was able to integrate the blog\index.php into my existing site. But the initial “Hello World” blog link in the content area is broken. Am I missing something? Do I need to go to wordpress admin page to set things up?

Regards
Sri

[Reply]
Reply by: swolock
August 21st, 2009
Sri,

1. I want to know whether I need to merge the stylesheet from my theme into the main stylesheet (of my website)?

No, you don’t need to merge the theme stylesheet with your website’s stylesheet. You can, of course, it in the head section if you want to.

2. After going through your steps, I was able to integrate the blog\index.php into my existing site. But the initial “Hello World” blog link in the content area is broken. Am I missing something? Do I need to go to wordpress admin page to set things up?

The Hello World post should show up if you followed the tutorial if you didn’t delete it. You may be missing something in index.php but it’s hard to know without seeing it. Try creating a test post in the Wordpress admin and see if that shows up.

[Reply]

Comment by Sri — August 20, 2009

Hi

Thanks for the reponse! I guess I made some mistake, as I went through all the steps again, it worked. I am now able to add new comments, see all the blogs but when I add new comments (from the blog site) to an existing blog, I still see comments count as (1). Not sure why?

Sorry for asking so many questions

[Reply]
Reply by: swolock
August 24th, 2009
I’m not sure either. Make sure you refresh the page and trying logging out then viewing the page. It should be fine unless you changed the code where it states the number comments.

[Reply]

Comment by Sri — August 21, 2009

I have completed this tutorial multiple times and have followed the instructions carefully, everything looks great for me until I begin to manipulate the header.php and footer.php. Once I paste the get_header(); in the index.php I get a “Fatal Error: Call to undefined function: get_header() in…” Is there something I’m missing. You can view the url here. http://www.vis.uky.edu/Vis_Center_Site_NEW/blog/wp-content/themes/my_theme/

[Reply]
Reply by: bob
October 7th, 2009
I have exactly the same problem. I even de-installed wordpress and went through all the second steps again, but still no luck: “Fatal Error: Call to undefined function: get_header() in…”

See the website here: http://www.rietjens.nl/blog/wp-content/themes/rietjens_theme/index.php

Did you find out what we’re doing wrong?

Bob

[Reply]
Reply by: bob
October 10th, 2009
Me again.

I was wondering what would happen if I would try to skip the part where i put the header and the footer in different files. I just kept all the code (including header and footer code) in the index.php file and removed the links to the external header and footer files.

After that I copied and pasted the code under point 7 of “Put it back together and add the WordPress parts” in the index.php file with the exception of the last line of code.

This didnt work either. I get the following error on the page: “Fatal error: Call to undefined function have_posts() in /usr/home/deb16951/domains/rietjens.nl/public_html/blog/wp-content/themes/rietjens_theme/index.php on line 34″

Line 34 in my index.php file reads:

Any thoughts anyone? Im close to giving up!
B.

[Reply]

Comment by ACE — August 24, 2009

Just wondering if you could help me figure out why my footer is not along the lower portion of the screen unless I make enough blog posts to get it to move down? Also, My original index file had a border around the lower area of the sidebar and it has now disappeared…can’t seem to get it back. I used the http://www.wellnesscenters.com/about.php page for my original (without the text and such) and I my blog site address is http://www.wellnesscenters.com/wordpress Any help would be awesome as I have been trying to figure this out for a day now. Thanks!!!!! The overall tutorial was GREAT! just wish I could figure these two things out and I’d be ready to start blogging

[Reply]
Reply by: swolock
August 31st, 2009
I suggest you take a look at your HTML. Visit your blog page, view source, then copy the source and paste it into a new PHP document in your HTML editor. You’ll see that you have some basic errors in there like 3 body tags and 4 head tags. I’m guessing that if you clean that up your problems will be resolved.

[Reply]

Comment by mary — August 30, 2009

Hello!

Really great tutorial – I got it (kind of) right the first time round. This is definitely one of the clearest tutorials for a WP newbie like me!

Just wondering if you could help me with the white background from content downwards that has disappeared? I’m really wracking my brain and can’t figure it out!

Thanks!

[Reply]
Reply by: swolock
September 3rd, 2009
Hi BQ,

I’m not certain what’s going there but I did notice a couple of HTML errors on your page. 1) You seem to have 3 closing divs with no corresponding opening divs. And 2) you are missing your closing body and html tags. Like I said, I don’t know if that’s your problem but it may be. Also, make sure you clear your floating divs if you haven’t already.

[Reply]

Comment by bq — September 2, 2009

Thank you,

Great tutorial, did exactly what it said on the tin !!

[Reply]

Comment by Gary — September 8, 2009

Hello, thanks for the great tutorial. I have a question about the backend of this. Where would be the admin panel where you post new blogs and delete or approve comments? I have built a admin page for my website where I can edit my event calender and other things. can I build in the admin for the blog into my already built admin page? This way I can maintain my website from one page…

Hope to hear back soon!
thanks!

[Reply]
Reply by: swolock
October 1st, 2009
Hi Beliy

I’m pretty sure you have to use the Wordpress backend to manage Wordpress although I’m not sure. I suppose you could put a link in your site admin to the Wordpress admin.

[Reply]

Comment by Beliy — September 30, 2009

Hi,

This tutorial helped a lot, but i am facing some problems. the blogs are not coming up on my website while its there on wordpress website. can you please help me out to solve this issue?
Below is the link for my blog.

http://etsbpo.com/BLOGS/

thanks.

[Reply]

Comment by Farooq Malik — November 6, 2009

Can you be a little more specific?

[Reply]

Comment by swolock — November 9, 2009

hi! i followed your tutorial and seamlessly integrated a beautiful looking blog into an already existing site. thanks so much for the great instructions!

the only part i’m having trouble with is integrating the sidebar feature. when i put in a tag cloud, for example, all the aesthetic attributes were gone and all you could see was a boring list of words. it was so ugly i took it down. do you have any idea how to get around this?

thanks!

thea

[Reply]
Reply by: swolock
November 23rd, 2009
Thea

It sounds like you don’t have styles for sidebar widget like the tag cloud in your stylesheet document.

[Reply]
Reply by: thea
November 25th, 2009
Thanks! That sounds about right. I’m sorry…I’m new to this. How do I get those styles in my stylesheet?

Thanks!

[Reply]
Reply by: swolock
November 30th, 2009
Hmmm. Complicated question. I’m not sure this is the best answer but what I would do is in a browser view and copy the source of the page that isn’t working right, then copy the source into a new Dreamweaver page. There you can see exactly what styles are being used around the sidebar and widgets. Then you can add or modify those styles in your theme’s style.css.

Comment by thea — November 20, 2009

Thank you for such a detailed introduction to adapting WP to my site.

I have the same problem as the guys on Comment #39:
Fatal error: Call to undefined function: get_header() in /…/…/…/…/…/APPLEGARDEN/wordpress/wp-content/themes/classic/index.php on line 6

which I can’t find a solution for.

Any help in figuring this out will be tremendously appreciated.

Mikka

[Reply]
Reply by: swolock
December 3rd, 2009
Mikka, I can’t say for certain but make sure you have the get_header() include tag at the right spot, probably just under the @package WordPress php block. Make sure you have a header.php file and see what’s on line 6.

[Reply]

Comment by Mikka — December 3, 2009

Thanks a ton for this tut, I’ve at least got a starting point and have the wordpress blog “up” within my site. My problem is the actual wordpress blog section of my theme seems to be inheriting my websites’ css for text styling and everything else, overriding the theme’s style.css. At first this didn’t really bother me, but unfortunately it seems to remove all styling applied when using wordpress’ backend to create posts.

In the post I have up for example, I specified in wordpress when I created the post that the photo should be right aligned, yet when I publish, it’s aligned left. If I change the theme back to the default, it goes back to it’s proper right alignment.

The only successful styling I’ve applied to this section is the h2 tag, (which i specified in my main css file) to have any h2s in my wordpress div to have a certain styling (you can see it being used on the post’s date)

So I guess my question is, where do I specify (and in what file) that the wordpress section should be taking it’s styling info from the theme’s css file and not the website’s main css file? My header and footer are fine, it’s just the main loop or whatever that’s not behaving.

I’m a complete newb when it comes to wordpress, so I’m sure I missed something. I’m completely aware that the sidebar is at the bottom, I just stuck it there for now until I work out the rest of the kinks.

Thanks in advance!

Chris

[Reply]
Reply by: swolock
December 10th, 2009
Chris, This is a pretty complicated answer, sorry. I suppose the first thing to do is make sure there’s a link to the Wordpress CSS file in header.php. Look for php bloginfo(’stylesheet_url’). Then try moving that code before or after the link to your site’s CSS file. FYI, the last style in order will override one before. So if you load an H1 from a CSS file that come before another CSS file the later H1 will override or add to the previous H1. Get it? If it still doesn’t work make sure your CSS file links are right. You may need to CAREFULLY merge small parts of the 2 CSS files a little at a time. Sometime I’ll make a 3rd CSS file for overrides and merges so I don’t mess up the other CSS files. Make sure it comes last in head.php. CSS can be a battle but don’t give up.

[Reply]

Comment by kurisub — December 10, 2009

Thanks so much for the prompt reply, it worked!
Just put that @import url( ); line in the header after my site’s css and all the styling of the orignal theme shows up just fine!

Maybe you should make a note in the tutorial that if people want the orignal blog’s styling to remain intact to leave that line of code in the header.

My only problem now is that the sidebar didn’t seem to want to sit inside the sidebarwrap div I put it inside. After mucking around with the style.css and giving it a float:right I was able to get it where I wanted, but it just seemed weird to me that after I removed the default absolute positioning that it would end up on the left in my wordpresswrap div instead of my sidebarwrap div.

Anyways, things seem to be behaving for now
Thanks again!

Chris

[Reply]

Comment by kurisub — December 10, 2009

I did your tut… it all worked very well. Only problem is I cant get anything to be centered where my content is. Its driving me up a wall. Any help would be much appreciated. my site is hiphopoth.com, but the problem is on my wordpress test site at http://hiphopoth.com/blog/

[Reply]

Comment by Bryan — December 17, 2009

Yep, that pretty much covered it. Thanks a bunch.

[Reply]

Comment by Mark Mc — January 27, 2010

Hello,

I have followed every step of this tutorial and it isnt working. When i preview my template all I see is:

‘,’ ‘); ?>
id=”post-”>
— @

If you could help me fix this or even just make my template work with wordpress I would happily compensate you for your time. Thank you,

Justin Edelson
http://justinledelson.com

[Reply]

Comment by Justin — January 24, 2009

Justin, can you provide a little more info?

Comment by swolock — January 25, 2009

[...] How to Integrate a WordPress Blog Into Your Existing Website Entries by Month: [...]

Pingback by WordPress Blog Intergration Update | River Graphics — January 25, 2009

Hello Steve,

No your post worked very well and it was easy to follow. The problem I had was my container stretching to fix the posts. Here is my container css

background:url(images/background_main.jpg) no-repeat;
height:auto !important;
width:1000px;
position:relative;

I have the height set at auto but I don’t think my css could see how many posts there were so it would just overlap and go into my footer.
So to solve this I just made a seperte tag and added the property: min-height. I set that to 1000 and changed the setting in wordpress to only allow 5 posts per page. Now I just have to make sure I don’t write posts that are too big. (open up in height or width?)

Thanks,

Justin Edelson

Reply by: swolock
January 28th, 2009

I use min-height a lot for main containers. I usually make mine a real minimum, like 400px. That makes the container grow with the content. The content for this particular post is really long and it works OK. It’s especially useful if you have a background image in the div with a repeat-y to create a fake column or a dividing rule. Happy blogging.

Comment by Justin — January 26, 2009

The problem i was having was that it wouldnt stretch with my wordpress. It worked for regular text. But not for wordpress. I still would like it to stretch with wordpress if you know a way.

Comment by Justin — January 29, 2009

It may be that you need to clear the float immediately after your sidebar and content divs. You can make a class like .clearfloat { clear: both } then assign it to a BR. That would go after the last closing div of the sidebar and content divs or right before the closing div that contains the sidebar and content divs. I don’t know for sure if that will help but it might.

Comment by swolock — February 2, 2009

Great article! I personally have been working on this exact problem recently, and I think I actually came up with something tolerable, though a bit different from your solution. In my case, I was avoiding the whole Wordpress theming issue partially because I didn’t want to get sucked into theming more and more of Wordpress and partly because I hate having duplicate themes in different formats (my base web theme, the wordpress theme, a joomla theme, etc etc) So… I went ahead and just sucked the wordpress blog into my site using the rss feed. I based all of my work off of an RSS library I found online somewhere and basically have a library where I use one function to grab and url-rewrite the rss feed which services as a table of contents, and another function which gets the contents of any given posts and outs them. Anyways, if anyone’s curious, I talk about it Here

Comment by Vancouver Web Developer Palantar — February 12, 2009

Thanks for a great post. I made two attempts before reading your step-by-step instructions and almost gave up. I surprised myself! My blog mirrors my website. The only problem is that instead of the page being centered, it’s left-aligned. My initial instinct was to fiddle around with the stylesheet, but to no avail. Any suggestions?

Thanks again.

Comment by Debbie — February 18, 2009

Hi Debbie

Why don’t you email me through our website or post your URL here so I can look at it. It may be that you aren’t using that magic combination of a “text-align: center;” in the body CSS and “margin: 0 auto;” in the div containing your content. Does that make sense?

Comment by swolock — February 19, 2009

This worked perfectlly for me and saved me hours trying to sort it out, a massive thank you!

I assume that I can upgeate WP with no problems as this is now just another template?

Reply by: swolock
February 20th, 2009

It should work OK with upgrades but you never know for sure. I upgraded from 2.7 to 2.7.1 with no problem at all.

Comment by Steve — February 20, 2009

Thank you so much for your great article. I almost got it to work but have two errors. One is that my time menu hangs down on top of the text of the blog. Secondly, the sidebar is not coming up right. If you could help me I would appreciate it so much.

Thanks
Justin

Reply by: swolock
February 22nd, 2009

Hi Justin,

It’s a little hard to tell what’s going on but after looking at your page I noticed you have a div tag, div id=”content”, as the first thing in your code. I’m not sure where that should go, but certainly not there, probably immediately before where you want your content to begin. Also, it looks like your sidebar is in the footer div. If you want to have a column for the sidebar and a column for blog content you need to add an extra column that floats left or right. There are a few ways of doing this. I like a float left div and a float right div inside a parent div with a clear float right after the floated divs. Does this help?

Comment by Justin Katz — February 21, 2009

Sorry type, meant to write top not time. Thanks again.

Unfortunately I am not that proficient in web design as yet. Perhaps I could send you the files and you could fix them. I would compensate you for the work. Thanks, Justin
Please email me you response at yossik@breslov.org

Reply by: swolock
February 23rd, 2009

Justin

Why don’t you just email header.php, index.php and footer.php to web.inquiry@rivergraphics.net and I’ll take a quick look at them gratis. If it’s something simple, and I think it is, I’ll just fix it, if it’s more complex I’ll let you know.

Comment by Justin Katz — February 22, 2009

Your the best!

Comment by Justin Katz — February 23, 2009

Hi Steve,

Great article. Thanks heaps. I’ve been looking around for a simple solution to this ‘dilemma’ for a while. Thanks for laying it out so clearly. It worked a treat! Now the only problem to contend with is actually writing the content

Cheers,
Anthony.

Comment by Anthony Hortin — February 28, 2009

Thank you!!! I was at this for a day and a half before I came across your post. Genius! Worked like a charm!

Comment by Mike — March 6, 2009

Great and detailed explanation. Thank you.
However, I keep getting an error message every time I upload the three files.

“Parse error: syntax error, unexpected T_ENDWHILE in /mnt/web3/30/41/5799441/htdocs/mywebsite.com/wordpress/wp-content/themes/dhcom/index.php on line 23″

This is line 23.

Any idea what causes that? Sorry, I’m still a beginner.

Reply by: swolock
March 25th, 2009

Hi Christina

Did you complete all of the steps? I ask because it won’t work until late in the process. Would you like to provide a link to what you have so far?

Comment by Christina — March 25, 2009

Hi, thanks for your quick response. I spent the rest of the afternoon redoing everything a few times and it turned out I had copied the wrong code. I was just too stupid to read the instructions right. Sorry about that.
Maybe as a little suggestion, you could split the box under number 7 so it becomes a little clearer which parts should be copied and pasted.
Again, thank you. This works great.

By the way, is there a way to add the blog archive from the side bar (or the whole side bar), as well? This only shows the posts.

Silly me. Ignore… I found it.

im really new to this – i’m finding it really easy SO far — im a little lost on the header.php and footer.php section is this defining where my blog section starts and ends ? as in the area size i want my blog to be ?

Comment by Simon Taylor — March 25, 2009

Hi, great tutorial, thanks… It looks really good but I have one problem that I simply cannot solve. I was able to adapt all the fonts in Dreamweaver to my current layout. However, the date above the subjects is not changable in Dreamweaver. It’s the same as the subject line. I figured it had something to do with H2 and so I made some changes in the style.css file. However, that didn’t change anything. I tried to remove the H2 tags from the index page but that only changed the date of the latest post and the older post dates were in this case not bold.
How can I change the font? Thanks in advance.

Comment by Welch — March 26, 2009

hello and thank you so much for the tutorial, i tried this on my bro in laws website i built for him for a portfolio for work and incorporated the blog tonight. the website is http://www.clauderhodes.com and for some reason when i put the code it for the side bar it pushed the blog part down below it. instead of even like it was. i changed no code only put that php part in the sidebar like u said. i am wondering if i was to change something else, if anyone has ideas thank you

Comment by Johnny Walker — April 4, 2009

wow, so 1. not sarcastic thank you for not replying fast it gave me time to sit back and problem solve, it turned out that i had the sidebar coded before my main col for the blog and i just accidently put 2 instead of the just 1 needed and for some reason that pushed my blog content past my container and below my sidebar so it is solved problem fixed. clauderhodes.com/blg is up and running thanks to you.

Comment by Johnny Walker — April 5, 2009

Thanks for the great tutorial. Worked perfectly first time.

Comment by mcred — April 23, 2009

I have scoured the web for instructions on how to implement this idea, and you tutorial, sir, is by far the best. Well written and professionally presented. I went through the process and got the gist of it all. Granted, I have much tweaking to do, but you are the only one thus far who has managed to get me off the ground by explaining the process in clear terms. Thank you for all the time you put into the tutorial. We’re reading and learning from it!

Marc

Comment by Marc — April 28, 2009

Hi thanks for the tutorial.

I have a dir like this
/docroot/mysitedir/blog/ with wp inside that will manage the post feature.

Now I need to add another subdir
/docroot/mysitedir/travel-diaries/ that will be managed by the wp pages feature.

How can I do that without installing a second wordpress into /docroot/mysitedir/travel-diaries/ ?

What I need is just the right dir name for site navigation:
http://mysite/blog/...
http://mysiste/travel-diaries/...

Thank you in advance.
Dana

Reply by: swolock
June 17th, 2009

Dana… Are you saying you want your blog to be in the directory travel-diaries instead of blog?

Comment by Dana — May 21, 2009

I followed all the directions and find them very helpful, but when i insert my side bar, it does not stay “floating” to the left. Can you take a look at my site and my site source to see what the problem is? Thanks.
http://www.eliterhino.com

What do you mean by ‘floating’. Your site looks fine to me!

Comment by kris — June 11, 2009

Hi – Thanks, this was great! I was successful following these steps for my client’s site:

http://www.expectthebestpregnancy.com/blog

BUT — I want to delete the “meta” list in the sidebar. This is a WIDGET which comes in the Classic template, but it is not listed in the Widget page in WP admin. HOW DO I GET RID OF THE META LIST? I’m talking about the list that says “site admin” “log out” “rss” “comments rss” etc.

THANK YOU!!

Are you saying that you didn’t see meta in the admin area under appearance > widgets?

Comment by Welltech — June 17, 2009

correct. Under “current widgets” there’s just one in the dropdown, called “sidebar1.” when that is selected, it says, “You are using 0 widgets in the sidebar.”

I’m not sure about this but I believe the links you want to get rid of are coded in sidebar.php. In sidebar.php look for li id=”meta” or php _e(‘Meta:’); . Right under that you’ll probably see some wp links plus some regular HTML links to validator.w3.org, gmpg.org, and wordpress.org depending on what you want to do you can either delete the whole block beginning with li id=”meta” and ending with the closing li or delete the 7(?) lines above ?php wp_meta(); ?. If you delete the whole block the whole meta thing will go away. If you delete coded links (the 7(?) lines) and leave ?php wp_meta(); ? you’ll still have the meta block but be able to control through wp-admin. Your files might be a bit different but that should get you rolling. I removed the < and > from this post because wp doesn’t like them. I hope this helps.

You are ABSOLUTELY RIGHT ON. Thank you a million! I don’t understand how this was “disassociated” from the Widgets… well it’s probably better to have Code Control anyway. THANK YOU THANK YOU THANK YOU!!!

thanks for putting up the tutorial I have follwed your instructions and it seems to be working fine although I do have two minor issues that I could do with some help with,

1, It seems to be missing the one image from the navigaation menu and the mouseover images I have checked the paths and ri-inserted them but I can not seem to fix

2, How can I change the text size and weight ive gone through the style sheet and change all font references but it does not seem to be making any difference.

Any help would be appreciated

Many thanks

Gazelle

Reply by: swolock
June 29th, 2009

Hi Gazelle.

This is most likely due to in incorrect path to the image or a missing image. The paths seem OK but I’m guessing the mouseover images are missing.

Looking at your source, I didn’t see a link to any stylesheet. Make sure there’s a link to whatever stylesheet you’re referring to. Also, make sure the < ?php wp_head(); ?> is in your header.php file.

I noticed that you have the source code for a blank html page at the end of your page, you might want to clean that up.

Comment by Gazelle — June 29, 2009

Hi thanks for the info

you were right I had uploaded the wrong image folder which is why I could not see the images.

I have attached style sheet which works fine aprt form the sidebar which is now been chucked out of of the frame and sits tight to the right hand side

any thoughts

regards

Reply by: swolock
July 1st, 2009

Make sure you clear the float for your blog content div and the sidebar div. I like to create a class like .clearboth { clear: both;} then assign it to a br like br class="clearboth" . The important thing is to make sure you put br class="clearboth" after the closing tag of the content div or the sidebar div, whichever comes last. I usually deal with that by putting br class="clearboth" before the closing tag of the div that contains both the content div and the sidebar div. Does that make sense?

Hi, Love the tutorial, just what I was looking for, this is the first time I have done a self-hosted wordpress blog and for some reason cant get it to work… I have followed the guidelines but when I preview online the file doesnt have the style sheet for my main site attached – it is in the header.php () but when previewing diplays without it… I have done the steps 3 times now and still no joy… any ideas? I just have a very simple one column page (no sidebar as yet as stripped that out for now)

Reply by: swolock
July 13th, 2009

It might be helpful if you provide a link to your blog. Also, see if putting the link to the CSS file just before the ending head tag helps.

Comment by Jon — July 13, 2009

I got everything down, designed my theme & template, I see my header & footer–I’m just totally lost on:

“7. Copy the middle section—everything between …area of yourthemename/index.php.”

Can you explain it more thoroughly? In other words, where am I to replace that php code you provided for us? I guess that’s the ONLY thing that’s confusing me. Other than that, I’m pretty ok.

Reply by: swolock
July 15th, 2009

Eva,

Sorry if this is confusing. Doing these things can be that way. Hence this tutorial.

You should have an area in yourthemename/index.php where the content is going to go. Do you have a div that holds the main content? What you need to do now is copy the code from classic/index.php into where you want the blog posts, etc. to go. Copying and pasting the code in step 7 should work fine but you may need to tweak it depending on your page’s structure. Does this help?

Comment by Eva — July 15, 2009

Ahh I think I got it! I wasn’t complaining if I said it was confusing. In fact, this was the ONLY tutorial that has helped me with Wordpress, after days of googling. Thank you so much Swolock, you’ve been extremely helpful! You don’t mind, if I have any problems with Wordpress, I could comment here & ask you?

Reply by: swolock
July 16th, 2009

I’m glad I could help. Ask away, if I can help I will.

Everything’s going smoothly, thanks once again Swolock!
I also reviewed my coding, it seems I was the one who made it confusing.
Thank you so much

Comment by Eva — July 21, 2009

Wonderful tutorial for begginers to wrodpress like me! very simple and straight! I am trying to build a website, I have initially created a html based site that is still not launched and now I want to integrate wordpress blog. But, I have couple of questions:
1. I want to know whether I need to merge the stylesheet from my theme into the main stylesheet (of my website)?
2. After going through your steps, I was able to integrate the blog\index.php into my existing site. But the initial “Hello World” blog link in the content area is broken. Am I missing something? Do I need to go to wordpress admin page to set things up?

Regards
Sri

Reply by: swolock
August 21st, 2009

Sri,

1. I want to know whether I need to merge the stylesheet from my theme into the main stylesheet (of my website)?

No, you don’t need to merge the theme stylesheet with your website’s stylesheet. You can, of course, it in the head section if you want to.

2. After going through your steps, I was able to integrate the blog\index.php into my existing site. But the initial “Hello World” blog link in the content area is broken. Am I missing something? Do I need to go to wordpress admin page to set things up?

The Hello World post should show up if you followed the tutorial if you didn’t delete it. You may be missing something in index.php but it’s hard to know without seeing it. Try creating a test post in the Wordpress admin and see if that shows up.

Comment by Sri — August 20, 2009

Thanks for the reponse! I guess I made some mistake, as I went through all the steps again, it worked. I am now able to add new comments, see all the blogs but when I add new comments (from the blog site) to an existing blog, I still see comments count as (1). Not sure why?

Sorry for asking so many questions

Reply by: swolock
August 24th, 2009

I’m not sure either. Make sure you refresh the page and trying logging out then viewing the page. It should be fine unless you changed the code where it states the number comments.

Comment by Sri — August 21, 2009

I have completed this tutorial multiple times and have followed the instructions carefully, everything looks great for me until I begin to manipulate the header.php and footer.php. Once I paste the get_header(); in the index.php I get a “Fatal Error: Call to undefined function: get_header() in…” Is there something I’m missing. You can view the url here. http://www.vis.uky.edu/Vis_Center_Site_NEW/blog/wp-content/themes/my_theme/

Reply by: bob
October 7th, 2009

I have exactly the same problem. I even de-installed wordpress and went through all the second steps again, but still no luck: “Fatal Error: Call to undefined function: get_header() in…”

See the website here: http://www.rietjens.nl/blog/wp-content/themes/rietjens_theme/index.php

Did you find out what we’re doing wrong?

Bob

Reply by: bob
October 10th, 2009

Me again.

I was wondering what would happen if I would try to skip the part where i put the header and the footer in different files. I just kept all the code (including header and footer code) in the index.php file and removed the links to the external header and footer files.

After that I copied and pasted the code under point 7 of “Put it back together and add the WordPress parts” in the index.php file with the exception of the last line of code.

This didnt work either. I get the following error on the page: “Fatal error: Call to undefined function have_posts() in /usr/home/deb16951/domains/rietjens.nl/public_html/blog/wp-content/themes/rietjens_theme/index.php on line 34″

Line 34 in my index.php file reads:

Any thoughts anyone? Im close to giving up!
B.

Comment by ACE — August 24, 2009

Just wondering if you could help me figure out why my footer is not along the lower portion of the screen unless I make enough blog posts to get it to move down? Also, My original index file had a border around the lower area of the sidebar and it has now disappeared…can’t seem to get it back. I used the http://www.wellnesscenters.com/about.php page for my original (without the text and such) and I my blog site address is http://www.wellnesscenters.com/wordpress Any help would be awesome as I have been trying to figure this out for a day now. Thanks!!!!! The overall tutorial was GREAT! just wish I could figure these two things out and I’d be ready to start blogging

Reply by: swolock
August 31st, 2009

I suggest you take a look at your HTML. Visit your blog page, view source, then copy the source and paste it into a new PHP document in your HTML editor. You’ll see that you have some basic errors in there like 3 body tags and 4 head tags. I’m guessing that if you clean that up your problems will be resolved.

Comment by mary — August 30, 2009

Hello!

Really great tutorial – I got it (kind of) right the first time round. This is definitely one of the clearest tutorials for a WP newbie like me!

Just wondering if you could help me with the white background from content downwards that has disappeared? I’m really wracking my brain and can’t figure it out!

Thanks!

Reply by: swolock
September 3rd, 2009

Hi BQ,

I’m not certain what’s going there but I did notice a couple of HTML errors on your page. 1) You seem to have 3 closing divs with no corresponding opening divs. And 2) you are missing your closing body and html tags. Like I said, I don’t know if that’s your problem but it may be. Also, make sure you clear your floating divs if you haven’t already.

Comment by bq — September 2, 2009

Thank you,

Great tutorial, did exactly what it said on the tin !!

Comment by Gary — September 8, 2009

Hello, thanks for the great tutorial. I have a question about the backend of this. Where would be the admin panel where you post new blogs and delete or approve comments? I have built a admin page for my website where I can edit my event calender and other things. can I build in the admin for the blog into my already built admin page? This way I can maintain my website from one page…

Hope to hear back soon!
thanks!

Reply by: swolock
October 1st, 2009

Hi Beliy

I’m pretty sure you have to use the Wordpress backend to manage Wordpress although I’m not sure. I suppose you could put a link in your site admin to the Wordpress admin.

Comment by Beliy — September 30, 2009

Hi,

This tutorial helped a lot, but i am facing some problems. the blogs are not coming up on my website while its there on wordpress website. can you please help me out to solve this issue?
Below is the link for my blog.

http://etsbpo.com/BLOGS/

thanks.

Comment by Farooq Malik — November 6, 2009

Can you be a little more specific?

Comment by swolock — November 9, 2009

hi! i followed your tutorial and seamlessly integrated a beautiful looking blog into an already existing site. thanks so much for the great instructions!

the only part i’m having trouble with is integrating the sidebar feature. when i put in a tag cloud, for example, all the aesthetic attributes were gone and all you could see was a boring list of words. it was so ugly i took it down. do you have any idea how to get around this?

thanks!

thea

Reply by: swolock
November 23rd, 2009

Thea

It sounds like you don’t have styles for sidebar widget like the tag cloud in your stylesheet document.

Reply by: thea
November 25th, 2009

Thanks! That sounds about right. I’m sorry…I’m new to this. How do I get those styles in my stylesheet?

Reply by: swolock
November 30th, 2009

Hmmm. Complicated question. I’m not sure this is the best answer but what I would do is in a browser view and copy the source of the page that isn’t working right, then copy the source into a new Dreamweaver page. There you can see exactly what styles are being used around the sidebar and widgets. Then you can add or modify those styles in your theme’s style.css.

Comment by thea — November 20, 2009

Thank you for such a detailed introduction to adapting WP to my site.

I have the same problem as the guys on Comment #39:
Fatal error: Call to undefined function: get_header() in /…/…/…/…/…/APPLEGARDEN/wordpress/wp-content/themes/classic/index.php on line 6

which I can’t find a solution for.

Any help in figuring this out will be tremendously appreciated.

Mikka

Reply by: swolock
December 3rd, 2009

Mikka, I can’t say for certain but make sure you have the get_header() include tag at the right spot, probably just under the @package WordPress php block. Make sure you have a header.php file and see what’s on line 6.

Comment by Mikka — December 3, 2009

Thanks a ton for this tut, I’ve at least got a starting point and have the wordpress blog “up” within my site. My problem is the actual wordpress blog section of my theme seems to be inheriting my websites’ css for text styling and everything else, overriding the theme’s style.css. At first this didn’t really bother me, but unfortunately it seems to remove all styling applied when using wordpress’ backend to create posts.

In the post I have up for example, I specified in wordpress when I created the post that the photo should be right aligned, yet when I publish, it’s aligned left. If I change the theme back to the default, it goes back to it’s proper right alignment.

The only successful styling I’ve applied to this section is the h2 tag, (which i specified in my main css file) to have any h2s in my wordpress div to have a certain styling (you can see it being used on the post’s date)

So I guess my question is, where do I specify (and in what file) that the wordpress section should be taking it’s styling info from the theme’s css file and not the website’s main css file? My header and footer are fine, it’s just the main loop or whatever that’s not behaving.

I’m a complete newb when it comes to wordpress, so I’m sure I missed something. I’m completely aware that the sidebar is at the bottom, I just stuck it there for now until I work out the rest of the kinks.

Thanks in advance!

Chris

Reply by: swolock
December 10th, 2009

Chris, This is a pretty complicated answer, sorry. I suppose the first thing to do is make sure there’s a link to the Wordpress CSS file in header.php. Look for php bloginfo(’stylesheet_url’). Then try moving that code before or after the link to your site’s CSS file. FYI, the last style in order will override one before. So if you load an H1 from a CSS file that come before another CSS file the later H1 will override or add to the previous H1. Get it? If it still doesn’t work make sure your CSS file links are right. You may need to CAREFULLY merge small parts of the 2 CSS files a little at a time. Sometime I’ll make a 3rd CSS file for overrides and merges so I don’t mess up the other CSS files. Make sure it comes last in head.php. CSS can be a battle but don’t give up.

Comment by kurisub — December 10, 2009

Thanks so much for the prompt reply, it worked!
Just put that @import url( ); line in the header after my site’s css and all the styling of the orignal theme shows up just fine!

Maybe you should make a note in the tutorial that if people want the orignal blog’s styling to remain intact to leave that line of code in the header.

My only problem now is that the sidebar didn’t seem to want to sit inside the sidebarwrap div I put it inside. After mucking around with the style.css and giving it a float:right I was able to get it where I wanted, but it just seemed weird to me that after I removed the default absolute positioning that it would end up on the left in my wordpresswrap div instead of my sidebarwrap div.

Anyways, things seem to be behaving for now
Thanks again!

I did your tut… it all worked very well. Only problem is I cant get anything to be centered where my content is. Its driving me up a wall. Any help would be much appreciated. my site is hiphopoth.com, but the problem is on my wordpress test site at http://hiphopoth.com/blog/

Comment by Bryan — December 17, 2009

Yep, that pretty much covered it. Thanks a bunch.

Comment by Mark Mc — January 27, 2010