Want to host a blog at your own website without redoing your whole site? You’ve come to right place. Here you’ll learn how to add a WordPress 3 blog to your existing website. There are a few conditions: you should be using PHP, CSS and XHTML and, although it isn’t essential, you should be using includes for common parts of your site like the header, menu and footer.
This is not a tutorial about making a standard WordPress theme and it doesn’t adhere to the standards set in Designing Themes for Public Release. It is intended to seamlessly incorporate a WordPress 3 blog into your existing website.
Also, it uses a simplified file structure instead of a WordPress child theme. Child themes are great and should be used whenever you can, but I’ve found that for many people overriding the CSS in the parent theme can be too much of battle and just isn’t an efficient use of time.
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.
Check out the finished example PHP website with a WordPress blog.
By the way, one might consider the option of redoing the whole site completely in WordPress. It works great.
Prepare WordPress
Download and install WordPress
- Download the latest version of WordPress. Some web hosts offer easy installation options from the website control panel.
- Install WordPress on your server in a new directory. Call it something user-friendly like blog or articles. For this article let’s call it blog. Follow these 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 activate the Akismet plugin to help keep spam at bay.
Create the folder for your own theme.
- FTP into the themes folder in your WordPress installation (blog/ wp-content/ themes). Remember, we’re calling the WordPress installation folder blog.
- Create a new folder in themes to hold your theme files. We’ll call it mytheme but you can call it whatever you like.
Create the two can’t-do-anything-without-them files, index.php and style.css.
- In mytheme, add a new empty file with the name of index.php. We’ll come back to this one later.
- Also in mytheme, create a new file called style.css. This file is necessary for WordPress to recognize your new theme.
- In style.css add the following code. Obviously, change what’s necessary to make it your own.
/* Theme Name: My Theme Theme URI: http://yourwebsite.com/ Description: WordPress theme for my existing website. Author: Your Name Version: 1.0 */
Change the current to My Theme.
- Login to your WordPress installation. In this case it would be at blog/wp-login.php.
- Click on Appearance then Themes if you aren’t already there.
- If all went well so far, you should see your theme, My Theme, the version number, your name and the description. Click Activate. If it tells you the theme is broken or similar, go back and check style.css.
- Preview your theme to make sure there are no serious errors. All you should see is a blank page.
Visit us on Facebook
Visit us on Twitter
Hi
Thank you so much for the step by step method of description in the tutorial, it is very clear and I wish I had found it sooner.
I couldn’t have done it without your great instructions.
I got stuck up with css styles …
Kindly help me out with minor changes.
1)In header.php, which url has to be provided for bloginfo(‘stylesheet_url’) in the code as below:
<link rel="stylesheet" type="text/css" media="all" href="” />
2) Functionality of the code below:
<link rel="pingback" href="” />
Thanks in advance.
Hi Pummy
Sorry I’m just getting back to you. For question 1, < ?php bloginfo( 'stylesheet_url' ); ?> is the URL that goes there. It’s WordPress talk for getting the child theme stylesheet. Check the WordPress codex for more info. I refer to that page all the time.
Regarding question 2, to be honest I’m not sure of it’s specific function. It obviously has something to do with pingbacks. Maybe someone else reading this can enlighten us.
Pingback: Using PageInvasion On A Non-WordPress Website | PageInvasion
Hi
Thank you so much for the fantastic tutorial, it is so clear and I wish I had found it sooner.
I adapted your tutorial slightly and used it with the templates I had already made for my website and it has worked very well, just a little more styling to do and then it will go live.
I couldn’t have done it without your great instructions.
Thank you.
Hi swolock,
Great tutorial and exactly what I am looking for as not many like this on the web. I am however having some styling issues with the main content area and the sidebar. I have followed the instructions exactly but I seem to get the sidebar on the far right of the screen and the blog entries on the far left but way below the sidebar. They are not on the same level horizontally if that makes sense? I have used the twentyten theme as the basis. Do you know what I am doing wrong? I have imported my own style.css as well. I also noticed that the twentyten theme has the sidebar call inside the index.php file not the header.php. What file should I calling in the loop as well?
Many thanks!!
Sifi
Hi Sifi,
It’s a little hard to tell what’s going on without seeing it and the CSS, but it sounds like it has to do the div that constrains the page width. The content is floating all the over to the left and the sidebar to right. Maybe the CSS for the div that sets the page width is not set at the right amount. It’s hard to say without having a look.
An additional problem is that the content is below the sidebar. That can happen because the width of the either the sidebar or the content or both is too wide and is pushing the content underneath the sidebar. Try adjusting the content and sidebar widths.
Or it could be that you aren’t ‘clearing’ the two divs. This is a little complicated to explain with just words but to clear them try putting a br with style=”clear:both;” in it just before the closing /div tag that contains both the content div and the sidebar div. This should clear both the content and sidebar divs. I can’t tell you exactly where to put it because I have nothing to look at.
Feel free to post your URL and I can have a look. Good luck.
Thank’s very much. I’ll certainly give that a try tonight. I’m working on it locally so can’t post up a link im afraid. I can email you the code if that helps?
Hi,
This is a great tutorial, thanks for putting it up. Do you have some ideas on what I should do to get the blog site look which is at http://www.shaldipur.com/blog to match the regular website look which is at http://www.shaldipur.com?
Among the problems I have are two headers and two footers, a nav that has the contact link push down when viewed in Firefox as well as a search box that I would like to remove. If you have any suggestions I would be very grateful.
Thanks.
Hi Sachin,
Here’s a suggestion you may not like very much, do your whole sight with WordPress. There’s no reason you can’t get the same look using a child theme of Twenty Ten or Twenty Eleven. FYI, although Twenty Eleven works well and is HTML5 (it can do some very cool stuff), I almost always use Twenty Ten as my child theme parent. This tutorial is good for people who already have content AND are using PHP includes AND don’t want to start from scratch. Sometimes, and I think this is one of those cases, it’s more efficient to start from scratch. WordPress can be an admirable content management system. This site, http://www.tru-block.com/ and http://zanyaspasalon.com/ are examples of Twenty Ten child themes. Here’s a good article on WordPress child themes. I hope all goes well.
Thanks Swolock , I’ll give that a try.
Pingback: spikeRush now has a BLOG! | spikerush
Greetings!
Thanks for a great tutorial.!
My attempt to follow along is pretty close to working, but I can’t seem to get over the finish line. I have the include calls working, including my placeholder nav flyouts, I’ve updated the PHP files and checked things over, but I’m off on something … probably looking right at it and missing it.
Could you kindly take a look at http://todcohen.com/blog/ and see if anything jumps out at you? It looks kinda like the CSS is broken, but I’ve tried a couple of tests and the page reacts to the tests, yet the contents are just not where they’re supposed to be.
Thanks in advance!
Chuck
Aha … I had some bad CSS going on, including a bad call. Mainly hadn’t matched my div names in header.php to the ones I’m using in style.css.
I’m getting it to behave ….
Thanks!
Chuck
Hi Chuck
I’m glad you’re getting your CSS to cooperate. It can be a bear sometimes.
HI, I appreciate this tutorial. Ive gone through it and have my header and footer working perfectly, but I am now having trouble with the final css editing of the body.
My “mainContent” (the area where posts are shown) is stuck below the sidebar, instead of being next to it. I can’t figure out how to fix it.
Also the body text is white, and therefore invisible against white background!
I can’t figure out what css tags to fix, ive been trying everything i can think of. Any advice would be appreciated.
ok, i figured out the text colour, but my main issue seems to be that i don’t get how the layout works for this theme; content, container, mainContent, …*$&^%$….
Hi Matt
There’s an INDISPENSABLE tool for figuring out CSS. It’s a Firefox extension called Firebug. It let’s you inspect and try out modifications to the CSS on a webpage. I use it all the time. You can get Firebug or similar for other browsers but it works best with Firefox.
As for your misaligned body parts, it’s probably the width of one or the other or both. Try reducing the CSS width, for example change
width: 650;towidth: 400;to see what happens. If your parts pop back into place then begin making them wider.First, thank you for your tutorial!
However, after following instructions on the first page and setting up the new files in the appropriate places at my website, when I click “preview” I do not get a blank page but rather the 2011 theme. Any suggestions?
John
Ah! Nevermind. I made the mistake of saving the file as a Textedit HTML. My bad. Redone and now properly blank!
John
First, I want to say this is a great tutorial, its very clear step by step explaination, Thank you for taking time writing this:
Second….On Page 2 “Prepare your navigation or menu file”:
“Open your current menu or navigation include file. For the demo site it’s nav.php and is in the website’s includes folder, so includes/nav.php.”
x————————————————–x
I can only see “nav-menu-template.php” and “nav-menu.php” inside wp-includes folder. Or am I at the wrong folder? what’s a demo site?
APrather, I think you maybe looking in the wrong spot.
First, the demo site is the site I created for this tutorial. Check it out. It’s mentioned on page 1 of the tutorial. It’s a regular PHP website that has a WordPress blog added to it.
So… includes/nav.php is the nav or menu file used in the original PHP site, not the WordPress blog. That step is only asking you to add a navigation link to the blog-to-be in your currently used navigation file. You’ll save that file to your theme’s folder in later on page 3.
FYI, I never change anything in the WordPress installation’s includes directory, it’s called wp-includes, not to be confused with your PHP site’s includes folder.
This is very good tutorial. What I need to know is, if we can use another theme instead of twenty ten or not. What can be the issues if we use some other themes.
Thanks for the great tutorial.
Nitin
Hi Nitin,
You can definitely use other themes if you want to. But be warned that the code in other themes will almost certainly differ from the examples used in the tutorial. I’ve made child themes from themes other than twenty ten but always seem to go back to twenty ten. It’s straightforward and very flexible.
As I look through several sites about how to integrate a WordPress blog into an existing website, yours has been the most comprehensible (is that a word?). But what I don’t understand yet is if I am copying my site files (header.php, nav.php, footer.php, etc.) into the WordPress themes folder and editing them, when I change the site files in the future, do I have to change them in both places? Does my question make sense? For example, if a phone number is listed on site’s footer and it changes, now I just change it in that one file and it’s updated for the whole site. Would I also have to change it in the Worpress-enabled files under /themes/? Thanks.
The short answer is yes, you do have to edit them in both places. I know that’s awkward and not ideal but it’s the most expedient way that I can think of. It’s unlikely you’ll be changing them too much. Just be careful what you call them so it’s easy to distinguish the files used for your existing site from the new files AND that you don’t overwrite an important WordPress file like header.php or footer.php.
Thanks for putting together another great tutorial! One thing I found easier was to simply copy one of the style.css files from the theme in the latest version of WordPress. Add that to your own theme rather than referencing the original style sheet. Means you can have totally seperate style sheets then. Made it easier for me anyway!
Hi Megan,
Thanks for your suggestion. That method certainly could work. I guess it just seems more efficient to accomplish the same thing with one simple line of code.
Steve