Aber LINKS Website – WordPress Integration

A while ago I created a website for my St John first aid society, and recently had an idea to make the site less static and old by adding a news section to the home page (or nearby). This way, visitors such as prospective members, public, possible customers [who may want first aid cover] or people higher up in St John can see that we are active and are taking part in many things right now. News could also cover information on training nights and socials, as well as courses and other events that the society takes part in. This would allow visitors to the site to read about our current activities, and maybe encourage them to join or contact us.

Getting the news in

The solution I chose to get the news onto the site, was to integrate some of WordPress [the blogging software I am using now to write this] into one of our own pages – keeping our style consistent (so as not to confuse users), and to utilise the immense functionality and versatility of WordPress. A major reason for using WordPress is the fact that it has a GUI [Graphical User Interface - buttons and text boxes rather than needing to write code] to allow users to add posts, meaning that non-technical people could add and amends this new news page. I started off by reading about how others have integrated WordPress into their existing pages, and then had to go on to look at how WordPress was coded to understand how I was going to transfer which parts I wanted.

WordPress uses “The Loop“, a PHP loop that prints out the title, post content, author and date etc for as many posts as needed on a page. It turned out in fact to be fairly simple to integrate this code into mine, I just needed a PHP require to pull in some needed WordPress code (wp-load.php or the header, depending on which way you do it). I used the following code:

// Include WordPress
define('WP_USE_THEMES', false);

This code will load the vital code needed, and sets the amount of max posts I want to show to 10.

The next piece of code is The Loop – where each post is printed out. There is different parts (such as title / content / author) that can be put in as you wish, and I would recommend this WordPress article to read about them. [Other recommended reading to help you further down this post].

This was what I ended up with for the loop:

<div id="blog">
	<?php while (have_posts()): the_post(); ?>
		<div class="blogTitle">
		<h2 class="blogTitleText"><?php the_title(); ?></h2>
		<hr />

		<div class="blogContent">
		<?php the_content(); ?>

		<div class="blogFooterInfo">
		<p class="blogFooterInfoText">Posted on: <?php the_time('F jS, Y') ?> by <?php the_author() ?> </p>
	<br />
	<?php endwhile; ?>


This displays the title, the content, and some footer info – the time and author of the post (as different committee members may be posting). I am able to style each part by giving the header of paragraph an id that I can use in the attached stylesheet.

Speaking of the stylesheet – I have put some WordPress PHP and HTML code into my site, but not any of it’s CSS. This meant when I told WordPress to put an image in the middle of a post (centre justify) – it didn’t know how to, and left it on the left. I did somehow manage to later force it into the middle, but for a more reliable way – I needed to use some of the WordPress CSS to style the WordPress elements. I made another post with broken centre-justified images, and used Google Chrome’s “Inspect Element” feature to see which ID/Class WordPress had given to the centre justified images –  ”aligncenter”. I then headed over to my WordPress CSS and found out this element, copied it to my CSS – and bingo! All worked fine. Whilst in the WordPress CSS, I found a section labelled “WP” – WordPress. I decided that the other CSS in that section may be useful too – and copied it to my CSS as well. The code for me is pasted below [may vary with theme - I am using lightword again]:

.aligncenter,div.aligncenter,img.aligncenter{text-align:center;display:block;margin:10px auto;}
blockquote{margin:20px 10px 10px 5px;border-left:4px solid #DDD;padding:0 5px 0 5px;text-align:justify;}
.commenttext blockquote{border-left:4px solid #B6B6B5;}
.wp-caption{border:1px solid #ddd;text-align:center;background-color:#f3f3f3;padding-top:4px;}
.gallery-caption{ border:1px solid #ddd;text-align:center;background-color:#f3f3f3;padding-top:4px; }
.wp-caption img{border:none;margin:0;padding:0;}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;color:#111;margin:0;padding:0 4px 5px;}
.alignleft,img.alignleft{float:left;margin:5px 10px 5px 0;}
.alignright,img.alignright{float:right;margin:5px 0 5px 10px;}
.aligncenter,div.aligncenter,img.aligncenter{text-align:center;display:block;margin:10px auto;}
abbr, acronym, span.abbr{cursor:help;border-bottom:1px dotted #000;}

And here is the finished result!:

Image of blog in Aber LINKS site

A great success! Even the XHTML and CSS validate (after changing some div elements to class ones, as they were being displayed with each post, and divs should only be used once per page). At the moment, the news section is located at a test page, pending further approval: http://www.aber-links.co.uk/indexblogtest2.php . In the future (when you may be reading this, it may be located at the home page (http://www.aber-links.co.uk/index.php) or it may be a separate news page: (http://www.aber-links.co.uk/news.php).



Recommended reading:

WordPress.org : Integrating WordPress with Your Website: http://codex.wordpress.org/Integrating_WordPress_with_Your_Website

The Loop: http://codex.wordpress.org/The_Loop

Template Tags: http://codex.wordpress.org/Template_Tags