I provided an interface for CMS functions, customised a slideshow for the home page, all the while making sure it was fully integrated with WordPress Mu.

With the Photoshop designs in hand, I set about cutting and marking them up with XHTML and CSS. With the basic interface complete, work was started on the server side. This involved coding a number of scripts in PHP to search for and display properties, all accessed through a MySQL database.

Once a property’s selected from the results list, the user’s taken to an individual proprty page, as above. In order to upload properties to the website, an admin section was built behind a password protected log in.

The code and database design for this project are bespoke, as a content management system for the entire site wasn’t needed. Had it been, and had a property blog been stressed, the project would have been WordPress based. To sum up, I coded the entire site, but did not carry out the design work.

We have a horizontal menu with a fitting ID of ‘menu’, nestled in a ‘content’ DIV. Within the menu there’s a DIV named ‘service-options’ which is a sub menu of ‘services’. Unordered list ‘service-options’ is hidden and only drops down upon clicking the ‘services’ link. Now for the JavaScript:

<script type="text/javascript">
$(document).ready(function() {
// hides the sub menu as soon as the DOM is ready, just before page load)
$('#service-options').hide();
// shows sub menu, service-options, when clicking the 'services' link
$('a#show').click(function() {
$('#service-options').toggle('slow');
return false;
});
});
</script>

Looking at the JavaScript, as soon as the DOM’s ready (once the browser’s reviewed the HTML), the ‘service-options’
ul is hidden using jQuery’s .hide() method. Next, an event handler is assigned to the ‘services’ link which has an ID of ‘#show’. $(‘#service-options’).toggle(‘slow’) attachs the ‘toggle’ method to the sub menu; this toggles it between two states, hidden and not hidden (not hidden being jQuery’s show() method). Incidentally, $(‘#service-options’) is jQuery’s method of selecting an element. That’s it, the event has been assigned to the ‘services’ link ready to toggle the sub menu in and out of view.

Download the file to play around with the script. Of course, you’ll need the jQuery library.

For updating the site via a mobile when out and about, a Twitter feed was incorporated and placed prominantly at the top. When needing to post results live from a competetion, short sharp Tweets are perfect.

SEO figured highly in the remit; like any other business, it’s important to reach new members through appropriate search terms. For ‘bjj surrey’, Nova Forca has climbed to third position on page-one of Google beneath the local business listings. It’s not long before they’ll adorn the top spot. For ‘bjj london’ – a very competitive search – they’re at the top of page-two and climbing.

As the site’s coded well and utilises a semantic CMS such as WordPress, it’s well poised to do well in the search rankings under a variety of seach terms. Naturally, the site’s SEO process requires ongoing analysis of keywords related to their industry, and its data from Google Analytics. Additional inbound links will serve as a bonus.