The client wanted the option to have the option of having a unique jQuery slider on each page of the website. Whilst I’m sure that there are slider plugins that can do this pretty easily, I thought why not try something different. So that’s what I did. I used WPAlchemy to handle the metabox in the backend, and I’m pretty happy with how it turned out. Watch the video below as I walk you through how I created it.

I’ve also included the code below for you:

functions.php

/*
 * Include WPAlchemy Scripts
 */
include_once 'metaboxes/setup.php';
include_once 'metaboxes/simple-spec.php';


/*
 * Enqueue Scripts
 */
add_action('get_header', 'my_load_scripts');
function my_load_scripts() {
    wp_enqueue_script('jquery.slideshow', CHILD_URL.'/lib/js/jquery.slideshow.js', array('jquery'), '1', TRUE);
}


/*
 * Start the slider
 */
add_action( 'wp_head', 'homepage_slider' );
function homepage_slider() { ?>
	    
	<?php if(is_page()) {		
		
		global $custom_metabox;
		$custom_metabox->the_meta();
	
		if ($custom_metabox->get_the_value('show-slider') == 'yes') { 
	
	?> 
		
		<script type="text/javascript">
		jQuery(document).ready(function($) { 
		$('.slideshow').slideshow({ timeout: 4000, speed: 400 }); 
		})
		</script> 
	
	<?php 
		
	    } //close IF() statement
	
	} //close IS_PAGE() statement 
		
}//close function


/*
 * Show the slider
 */
add_action( 'genesis_before_post_content', 'inner_page_slider' );
function inner_page_slider() {?>

	<?php if(is_page()) {
	
		global $custom_metabox;
		$custom_metabox->the_meta();
				
		if ($custom_metabox->get_the_value('show-slider') == 'yes') { ?>
		
			<div class="slider">
				<ul class="slideshow">
					<li><img src="<?php $custom_metabox->the_value('image-1'); ?>" /></li>
					<li><img src="<?php $custom_metabox->the_value('image-2'); ?>" /></li>
					<li><img src="<?php $custom_metabox->the_value('image-3'); ?>" /></li>
					<li><img src="<?php $custom_metabox->the_value('image-4'); ?>" /></li>
				</ul>
			</div>
		
		<?php 
		}			
	}		
}

/metaboxes/simple-meta.php

<div class="my_meta_control custom-bf-slider">
 
	<p class="intro">If you want to show off some work, use a slider. Upload the images you want <strong>[500px wide / 200px high]</strong> using the WordPress Media Manager, and paste the link to the images in the fields below.</p>

	
	<?php $selected = ' selected="selected"'; ?>
 
	<p>
		<span>Show the Slider?</span>
		<?php $mb->the_field('show-slider'); ?>
		<select name="<?php $mb->the_name(); ?>">
		<option value=""></option>
		<option value="yes"<?php if ($mb->get_the_value() == 'yes') echo $selected; ?>>Yes</option>
		<option value="no"<?php if ($mb->get_the_value() == 'no') echo $selected; ?>>No</option>
		</select>
	</p>
 
	<p>
		<span>Image 1 URL:</span>
		<?php $mb->the_field('image-1'); ?>
		<input type="text" name="<?php $mb->the_name(); ?>" value="<?php $mb->the_value(); ?>"/>
	</p>
 
	<p>
		<span>Image 2 URL:</span>
		<?php $mb->the_field('image-2'); ?>
		<input type="text" name="<?php $mb->the_name(); ?>" value="<?php $mb->the_value(); ?>"/>
	</p>
	
	<p>
		<span>Image 3 URL:</span>
		<?php $mb->the_field('image-3'); ?>
		<input type="text" name="<?php $mb->the_name(); ?>" value="<?php $mb->the_value(); ?>"/>
	</p>
	
	<p>
		<span>Image 4 URL:</span>
		<?php $mb->the_field('image-4'); ?>
		<input type="text" name="<?php $mb->the_name(); ?>" value="<?php $mb->the_value(); ?>"/>
	</p> 

</div>

By default, this is what WPAlchemy’s /metaboxes/setup.php looks like:

<?php

include_once WP_CONTENT_DIR . '/wpalchemy/MetaBox.php';
 
// global styles for the meta boxes
if (is_admin()) wp_enqueue_style('wpalchemy-metabox', get_stylesheet_directory_uri() . '/metaboxes/meta.css');

/* eof */

Now the issue here is that get_stylesheet_directory_uri() returns:

http://yourdomain.com/wp-content/themes/yourtheme (Function Reference/get stylesheet directory uri).

As we know, when working with Thesis, all your custom Thesis files reside in the /custom/ directory, and therein lies the problem. Changing the code to the following worked for me:

<?php

include_once WP_CONTENT_DIR . '/wpalchemy/MetaBox.php';
 
// global styles for the meta boxes
if (is_admin()) wp_enqueue_style('wpalchemy-metabox', get_stylesheet_directory_uri() . '/custom/metaboxes/meta.css');

/* eof */

Notice the inclusion of the custom directory in the code. It now loads the stylesheet to format the metaboxes elements. Win.

But there’s one more issue – the same code is used to call the content of your metabox. The same principle needs to be applied here, but with a slightly different change. If you open up metaboxes/simple-spec.php, then you’ll see this as the default code:

<?php

$custom_metabox = $simple_mb = new WPAlchemy_MetaBox(array
(
	'id' => '_custom_meta',
	'title' => 'My Custom Meta',
	'template' => get_stylesheet_directory() . '/metaboxes/simple-meta.php',
));

/* eof */

Notice that /custom/ is missing. The function get_stylesheet_directory() returns something like so:

/var/www/html/myblog/wp-content/themes/my_theme (Function Reference/get stylesheet directory)

So simply amending the function like so to include the /custom/ directory like so makes it work:

<?php

$custom_metabox = $simple_mb = new WPAlchemy_MetaBox(array
(
	'id' => '_custom_meta',
	'title' => 'My Custom Meta',
	'template' => get_stylesheet_directory() . '/custom/metaboxes/simple-meta.php',
));

/* eof */

And there you have it, WPAlchemy should now be working with Thesis for you.

On a final note, I’m only using the simple-spec.php file here. If your using any of the other metaboxes files, i.e. one of these:

include_once 'metaboxes/full-spec.php';

include_once 'metaboxes/checkbox-spec.php';

include_once 'metaboxes/radio-spec.php';

include_once 'metaboxes/select-spec.php';

then your going to need to repeat the process of appending the custom directory to the array as shown above.

Now, you could go down the classic route, and add conditional stylesheets to the header like so:

/*
 * function custom_conditional_statements()
 *
 * @desc: Conditional IE Statements
 *
 */
function custom_conditional_statements() {
?>

  <!-- IE6 Only -->
  <!--[if lt IE 7]>
          ... IE6 Styles ---
  <![endif]-->

<?php
}
add_action( 'wp_head', 'custom_conditional_statements');

And this is great, but there have been rare situations where there have been small issues in other browsers, like opera and firefox. For this I turned to body classes. I first came across this article on artofblog showing you how to add custom classes to the body tag. I used this article as a basis. I also looked through countless stackoverflow threads for tips on getting the user agent. Now I did come across some other websites with a similar solution to mine – and my code is based upon that written by Thesis Blogs. Their solution deals with the Internet Explorer family, and I extended it to grab other user agents.

/*
 * function custom_body_classes()
 *
 * @desc: Add custom classes to the <body> tag
 *
 */
function custom_body_classes($classes) {

  $browser = $_SERVER['HTTP_USER_AGENT'];

  if (preg_match('/mozilla.*rv:([0-9a-z\+\-\.]+).*gecko.*/si', $browser)) {
  	$classes[] = 'firefox';
  }
  elseif (preg_match('/mozilla.*opera ([0-9a-z\+\-\.]+).*/si', $browser) || preg_match('/^opera\/([0-9a-z\+\-\.]+).*/si', $browser)) {
  	$classes[] = 'opera';
  }
  elseif (preg_match("/MSIE/", $browser)) {
  $classes[] .= 'ie';
    if (preg_match("/MSIE 6.0/", $browser))
	  $classes[] .= 'ie6';
    elseif (preg_match("/MSIE 7.0/", $browser))
	  $classes[] .= 'ie7';
    elseif (preg_match("/MSIE 8.0/", $browser))
	  $classes[] .= 'ie8';
    elseif (preg_match("/MSIE 9.0/", $browser))
	  $classes[] .= 'ie9';
  }
  return $classes;
}
add_filter('thesis_body_classes', 'custom_body_classes');

Now this method isn’t 100% foolproof as you can spoof your user agent. But for most situations, it should suffice. You’d target the browser like so in your custom.css file:

/* IE6 Specific Menu Styles */
.ie6 .menu {
  background: #fafafa;
  color: #444;
  }

I’d be interested in hearing how you target other browsers in – please leave a comment below sharing your method.

I’d write a post. Sometimes it would publish, and other times I’d be shown the WordPress 404 error page. Strange? I thought so too. At first I thought it was something to do with with my code – and as I use the Thesis theme, I checked the custom_functions.php file. Nope, nothing wrong there.

I disabled my plugins, one by one, and nothing changed either. I installed the WP-Optimize plugin thinking there were too many post revisions and autosaves – it didn’t change anything. I’d still be randomly thrown the 404 error page when posting, saving, or previewing post/page.

Google to the rescue. It threw up several links to the WordPress support forums (here and here). It suggested some kind of issue with mod_security. More searching led me to this post by Matt Rudge, detailing what was happening and how to fix it. I’d highly recommend you submit a support ticket with your webhost to see if they can fix the issue if it arises. Also, I’d recommend you check Matt’s the article out if WordPress gives you a 404 error when your trying to post or publish something.

Phew. Now the shameless begging is over, let me share with you why I’m writing about this topic.

First and foremost I’m a Thesis Developer – if your unaware what this means, I make awesome things with the Thesis WordPress theme. What I like about Thesis is that the files I need to work with (custom.css and custom_functions.php) are a blank canvas – it lets me do whatever I want, however I want.

I’ve been commenting code pretty much since I started on the web (anybody remember WordPress 1.6?), but I really started taking notice of commenting when I started University. As you may or may not know, I studied for a BSc in Business Information Technology, and a whole heap of the course revolved around programming. We were pretty lucky to have some really good lecturers who kept on drumming in the importance of documenting and commenting your code.

I document and comment my code for various reasons.

1. What happens if I want to make changes to my code some time down the line. No way is it still going to be fresh in my mind what each line does. Comments & documentation solves this problem.
2. What happens when I hand over the files and the client finds a new developer down the line. Their going to be confused and probably won’t be happy having to dig through somebody else’s code. Comments & documentation solves this, as they have something to reference when they are working with my files.

Now this blog post comes about after some recent Thesis projects I’ve worked on for clients. The client themselves are awesome, but the code not so much. In one project, we’re talking about 780+ lines of CSS and 450+ lines of PHP – unformatted and with a handful of comments thrown in for good measure. It doesn’t sound so bad, but when you start looking into the code, you soon start thinking what have I got myself into? Im pretty sure that in some situations I’ve actually spent more time trying to figure out what the code did than I spent coding.

How I deal with code I don’t know

But there are ways I’ve found to help with this. I use Chrome’s inspector tool and CSSEdit when I’m developing, and it allows me to get right into the code and see what is what.

In Chrome’s case, the inspector tools let me click on the HTML I want, and it will show on the right hand side the corresponding styles it finds in the stylesheets associated with your website. The beauty here is that you can play around with the CSS in a non-destructive manner, meaning you can make changes in the inspector tool and see them applied in real-time on the website. Extremely handy.

CSSEdit is a tool I use in much the same way as Chrome’s developer tool. It lets me load up a website, and extract any stylesheet I want, and modify it. Any changes are instantly reflected in CSSEdit, making life much much easier. The main difference between these two tools is that CSSEdit shows the website itself, allowing you to click on elements, and it then shows you where in the CSS files the corresponding code is as opposed to clicking on the HTML in Chrome’s inspector tool. This makes it a good tool for those new to CSS or those who prefer a more visual approach.

How I document my code

I feel that it would be stupid to rant and talk about why I want more people to take note of how they comment and document their code without actually showing or sharing how I do it. Now I’m not saying that my way is right – far from it to tell the truth. This is how I do it, and it works for me. Heck, if clients who don’t normally code can understand and know where to make basic changes I must be doing something right.

An example of how I’d comment my CSS code would be:

/**************************************************
 *
 * This would be a section comment
 *
 **************************************************/

/*
 * I might also comment a section like so
 * ----------------------------------------------*/

/* I'll use something like this for a small, sub-comment */

And a PHP example:

/*
 * @name: function_name_here();
 *
 * @desc: function description would go here
 *
 */

// I might use an inline comment every now and again

As you can see, it’s nothing fancy but it does the job.

In the case of CSS, I’ll normally use a large comment to define each major website element (i.e. header, navigation, content, sidebar, footer) and use smaller comments then to clarify things even further.

I take the same approach when it comes to PHP. I separate each function with a comment, giving the developer the function name, a description of what it does, and if I need to include anything else, like variables, I’ll add it in the comments there as well. I’ll also throw in some comments throughout the code to highlight what’s going on.

Too much of a good thing can be bad

Although it might seem contradictory, too much commenting can be a bad thing. I have seen some people comment every other line in their code, and it hampered trying to read through the code. It’s up to you to find the right balance of comments vs code, and when you find it, stick with it.

Please let me know in the comments below what you think about working with un-commented code and how you go about this process yourself.

No matter what a company produces, it’s important that the company has a good image within its retrospective industry. In this case, Optimum Nutrition have won a range of supplement awards and sponsor several winning teams and athletes, including such teams as Heineken Cup champions Leinster and WBFF winner Rob Riches.

Taste

Since I started using 100% Whey from Optimum Nutrition, I’ve gone through 4 different flavours:

• Strawberry
• Double Chocolate
• Rocky Road
• French Vanilla Creme

My personal favourite so far is the last one – french vanilla creme, and I’m currently on my second tub of it. Taste-wise, it’s something I actually look forward to taking after working out. When mixed with water it has a vanilla ice cream flavour, reminding me of Carte D’or vanilla ice cream.

Score: 9.5/10

Mixability

Mixability is pretty important to me no matter what supplement I take. I mix my protein straight up with water – I put a scoop in a shaker and shake for around 20 seconds and it doesn’t clump at all. There’s nothing worse than drinking your shake and having lumps of protein powder in your mouth. Even the texture is nice, it’s not too thin yet not too thick.

Score: 9.5/10

Cost

Now on to what some might consider the most important factor. On Optimum Nutrition’s UK website, a 908g tub will set you back £19.79 (currently on sale at the time of writing), and will give you 29 servings per tub if you stick to the 1 scoop serving. Therefore it works out at about 68p per serving – not too bad in my opinion.

Sure there are cheaper powders available, but at the end of the day, you get what you pay for. Optimum Nutrition has won several awards during the past few years, including several over at bodybuilding.com (2010: Best Protein Powder & Best Supplement honours).

Score: 9/10

Overall I’d give this product a solid 9.5/10. The reason it’s not a full 10 is because I haven’t tried all the products on the market – but I’m sure that none will come close.

With this, I think it’s time to focus more on my blog. I have some plans for it, including:

• Documenting my progress whilst writing my final year report
• Writing about business related topics
• Reviews

With regards to reviews, I have several products that I will review, including the supplements I’m taking to help my transform my body.

I’m also planing to start looking into Internet Marketing, as I have a decent understanding of how it works behind the scenes. The journey has already started, as I have some web properties set up for this sole purpose. I’m also an Amazon affiliate, so I’ll be looking to increase my knowledge of Amazon marketing. I also landed my first commission with the DIYThemes affiliate program.

The site refresh is neraly complete too – it’s built on top of the awesome Thesis framework for WordPress, I’d definitely recommend checking it out. The design is done, I just have a few things left to tweak on the site, such as the logo e.t.c.

I’m writing this post about the Accommodation that Aberystwyth has to offer. Although I will be mentioning the University’s accommodation practices, this will only be brief, as the bulk of this article will focus on the private accommodation that’s available.

To start off with, there are two types of accommodation at Aberystwyth. These accommodation types are:

• University Accommodation: This is accommodation that is managed by the University
• Private Accommodation: This is accommodation outside of the University, for example by Landlords or Letting Agents

OK, so now we have the definitions out of the way, let’s talk about accommodation practices.

First Year Accommodation:

Aberystwyth University has in place an accommodation guarantee This basically means that if you you are a going into your first year, and apply before a certain date (August 1st), then you are guaranteed anaccommodation place within the University. This is helpful for new students as they are on campus, and can build new friendships with new people, some of whom you may go on to share accommodationwith in the 2nd year.

It is not unheard of for first year students to find private accommodation – indeed this was the case with one of my friends, who started University a year after myself and shared a house with me in when I was in my 2nd year.

Second Year Accommodation:

When you are in your 2nd year, it is common practice for students to find private accommodation. There are two main types of private accommodation available in Aberystwyth, and they are:

• Letting Agents
• Landlords: This is where you deal directly with a landlord, cutting out the letting Agents.

Accommodation Costs:

Costs for private accommodation can vary at Aberystwyth. This section gives an overview of these costs.

The basic weekly rate:

For example, in this academic year, our contract with a Letting Agent sets us back £65 per week, excluding bills. This is the basic rate for student accommodation, and is set to rise for the next academic year to £70 per week.

The amount a student pays when they take a house directly with a landlord is usually the same price, but can be a bit lower, or higher.

Utilities:

Utilities is a cost that you must factor into your budget. You should check to see whether your contract comes with utilities included, or whether they are separate.

From personal experience, it would seem that there is a higher chance for utilities to be included when a contract is taken out with a landlord as opposed with a letting agent.

Deposit:

No matter whether you take a contract out directly with a Landlord, or with a Letting Agency, you will be required to pay a deposit. The deposit is normally around the £300 mark for letting agencies, whilst it may be lower if you go with a Landlord.

All Letting Agents & Landlords should immediately place your deposit with the DPS (Deposit Protection Service):

As part of the Housing Act 2004 the Government is introducing tenancy deposit protection for all assured shorthold tenancies (ASTs) in England and Wales where a deposit is taken. From April 6th 2007, all deposits paid under an AST have had to be protected within 14 calendar days of receipt by the landlord.

The legislation aims to ensure that tenants who have paid a deposit to a landlord or letting agent and are entitled to receive all or part of it back at the end of that tenancy, actually get it.

Always check your contract to see what you will have to pay.

Summer Rent:

Summer rent is, simply put, a rent you have to pay to pay to keep the property over summer. It currently stands at 50% of your monthly rent, but is set to increase this year. Always check your contract to see what you will have to pay.

Accommodation Quality:

The quality of private accommodation in Aberystwyth can and will vary. The earlier you typically find your accommodation, the better the quality of your accommodation.

Most houses come with the basics, such as:

• Bedroom: Bed, desk, chair, wardrobe, cabinet.
• Kitchen: Basics, but you might need to provide your own kettle, toaster, microwave, dishes & utensils.

You can find out all of these details when your talking either with the Landlord or with the Letting Agent.

You should also remember that the Landlord or Letting Agent are bound by legislation to keep the let (house, flat, whatever you want to call it) in a decent state. If they do not keep their word, then you have the right to take things further. The Citizens Advice Bureau or Student Guild can help you with any issues you may have.

Finding Accommodation:

Finding your accommodation at Aberystwyth is not really hard. No matter which street you walk down, you will be in sight of either an Estate Agent or some form of student let house.

Estate Agents will normally have signs up in their windows notifying when student property lists are released, and when all the properties they have are let out.

If you are interested in pursuing the landlord route, then there are several ways of doing this. The easiest way is to just walk around the town, looking in windows. Houses will normally have the contact details of the owners, or adverts for student properties in them. The second way is to use a website provided by the University – AberAccom. This website lets you easily search private accommodation, but the emphasis is down to you to contact the owners for more details. I must point out one weakness here, and that is the fact that some properties are still left on the website even when they have actually been let out – so that is something to bear in mind.

Conclusion:

To summarize, question everything. Query how much you will have to pay, question when issues will be fixed (if there are any). Question if they are registered with the DPS and if they are licensed to let properties.

If you feel if I have left anything out, or want to know anything more, then feel free to comment.