How to integrate Wordpress onto an existing website?
By installing and integrating Wordpress onto your existing website, you can display your blog content and/or the blog feed in a specific section of the site. Please note that a good knowledge of HTML, CSS and a basic knowledge of PHP is essential to understand this article.
Why integrate Wordpress on my website?
Well, the reasons are many. Let's say that you want to have a blog on your own website, you want that blog to look like the rest of the site and you also want the blog to display only in a particular section of the site through a dedicated blog feed. Installing and integrating the Wordpress blog software is going to help you achieve this. You just need to follow some simple steps.
Please Note: A good knowledge of HTML, CSS and a basic knowledge of PHP is essential to understand this article.Process of installing and integrating Wordpress onto an existing website
Let us assume that you have your own site called http://www.mysite.com hosted on the web. For integrating Wordpress on your site, the first thing you need to make sure is that your index file is PHP and not HTML. The reason for that will be evident shortly. Once this is accomplished, you can start the process of installing and integrating Wordpress onto your site in the following way:
Step 1 : Download Wordpress from wordpress.org/download. You get a zipped file. You can extract the contents of this file to a folder on your hard drive.
Step 2 : Create a folder named 'blog' in your site root folder on the hosted server. Upload all the extracted Wordpress files to this folder and then, go to http://www.mysite.com/blog. Follow the on-screen instructions to complete the installation of Wordpress on your site. You can then access your blog directly by going to www.mysite.com/blog and so can the visitors of your site.
Step 3 : Before HTML declaration, open the main index file of your site in an editor and type the code (given below) at the top of the page.
This code initializes the Wordpress API on your page. Please make sure that the 'WP_USE_THEMES' variable is always set to 'false'. This will ensure that the Wordpress blog style does not override the style of your page.
Step 4: Now, you need to define a div container within the body tag of your page which is basically that section on your page where your blog feed will be displayed. In that div, you need to write the code given below.
In this code, I have a div with the class 'centerContentArea'. This basically defines an area of content on my site. Within this div, I have another div with the class 'blogContent' which basically is that area on the page where blog feed will be displayed. You can have a different structure and class name of your choice. Only thing you need is a div container for the blog feed. The code above is what Wordpress calls 'The Loop'. It basically iterates all your blog posts and displays them in a neat stack. The loop is customizable. It can vary from page to page depending on how you want the feed to display. You can refer to the documentation on Wordpress site for more details.
Step 5 : Include the Wordpress style onto your page.
Note: Including this stylesheet it is necessary to style the main blog feed on your site. This stylesheet may change some of the elements you had styled for your site. One way to counter this problem is by including the stylesheet given above in your own stylesheet. Do this as illustrated in the code given above. If this does not help, then you will have to manually make changes to this Wordpress stylesheet.
And that is it. You are done.
You can save the index file and put it back onto your server. Once you open your site, you would see a nice blog feed in the selected section on your site. Whenever you want to make a blog post, just navigate to www.mysite.com/blog, login with your username and publish your post. It will be instantly visible on the main feed. Afterword :
What we have done above will get you started with Wordpress integration on your site at a basic level. You can play around with the settings on your blog dashboard to control how the feed looks. You might or might not want to provide a link on your site to the main blog, thereby ensuring that the visitors to your site read only the main blog feed. From this point onwards, it is all up to you. There are also ways to edit the theme of your main blog which we will see in a future article.
The installation process we outlined above can also be simulated locally on your system by installing Apache and uploading all files to the www folder.
Read Why WordPress is better when compared to Blogger
