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.

Initialize the Wordpress API

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.

The Wordpress Feed Loop

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.

Wordpress stylesheet

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


Related Articles

Top 10 must have plugins for Wordpress website

If you are using a Wordpress website or planning to create a Wordpress website, then this article may be useful for you. Here we have discussed a list of top ten essential plugins which makes your wordpress website better.

WordPress wins the best CMS award

Here is a good news for the WordPress users: WordPress has been selected for the Members Choice Award from CodeProject as the best CMS solution for content management. Learn more about the best Content Management System award for WordPress.

What to do after installing a WordPress blog

Read this article and get to know what you must do when you install a WordPress blog. This article discusses about what to do just before installation, setting up the basic configuration and other details.

Why WordPress is better when compared to Blogger

If you are new to blogging and want to start a blog either on Blogger or WordPress you must read this article. Read on to know why WordPress is better when compared to Blogger for new bloggers who don't have knowledge in coding.

More articles: Wordpress

Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: