Go check it out, and let me know what you think of it!

© Rob Barrett Design.

That’s why it’s been quiet here as of late — I’ve been working away behind the scenes in my spare time to create a new look and feel for my site. One that’s a lot more… me. I’m polishing it off and covering over the scuff marks at the moment, so it’ll be put in place very shortly.

© Rob Barrett Design.

It’s a new project though, and there’s not a whole lot of documentation for it at the moment, so it’s handy when users find solutions to common problems and share them.

In that vein, I’ve been having a problem in that the default WYSIWYG editor for textfields in Pods outputs text with multiple line breaks between paragraphs, rather than just creating new paragraphs as I want.

By adding this Display Helper to a field, the helper searches the field content for any reference of ‘<br>’ or ‘<br />’ and replaces it with ‘\n’ (just a new line, as if someone had pressed Return). Then the wpautop function from WordPress looks for any block of text surrounded by double-new-lines and adds the correct block-level tag around it, such as ‘<p>’.

Here is the Display Helper code:

<?php
$value = str_replace(array('<br />', '<br>'), "\n", $value);
echo wpautop($value); ?>

© Rob Barrett Design.

Where I came a little unstuck was the Search feature in WordPress. No matter which page I searched from, I would be given the relevant results from all Posts, not just the Category in question. So here’s how I went about fixing that…

Firstly, I added the following Search form to my sidebar:

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<input type="text" name="s" id="s" value="Search" size="18" maxlength="96" onblur="if(this.value=='') this.value='Search';" onfocus="if(this.value=='Search') this.value='';" />
<input type="hidden" name="site_section" value="blog" />
<input type="submit" value="Search" class="hidden" id="searchsubmit" />
</form>

Note the third line, with the hidden input (that’s the third line if you paste that into a code editor, not what shows up here). On the sidebar for the blog, I gave that input field a value of ‘blog’; for the sidebar on the articles page, I gave it a value of — yeah, you guessed it — ‘articles’.

Then, create a file named ’search.php’, and paste the following into it:

<?php
/* Template Name: Search Results */
$search_refer = $_GET["site_section"];
if ($search_refer == 'blog') { load_template(TEMPLATEPATH . '/blog-index.php'); }
elseif ($search_refer == 'articles') { load_template(TEMPLATEPATH . '/articles-index.php'); }; ?>

The important part here is, again, the third line. This looks up the value of the hidden input on the search form, and assigns it to the variable, ‘$search_refer’.

After that, the if statement decides, depending on the value of ‘$search_refer’, which template to load. The load_template function will ensure that the referenced page is shown, displaying the results from the search term.

One last thing you’ll need to do is edit the Post index. In this example, I’ll show you what was added to ‘blog-index.php’. This goes directly before The Loop.

<?php if( is_search() ) :
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts("s=$s&paged=$paged&cat=4");
endif; ?>

For now, I’m going to admit ignorance about the second line (and if you can explain it, then please, go ahead!). I don’t fully understand what purpose it serves — I pieced this solution together from a few places — but the third line (what’s with that?!) has the important bit you need to pay attention to.

On this client’s site, the ‘Blog’ Category has an ID number of ‘4′; that’s why the ‘query_posts’ function has ‘cat=4′ at the end — this only includes Posts from that Category in the output.

On the ‘articles-index.php’ template page, ‘query_posts’ has ‘cat=3′, to only show ‘Articles’ Posts. Fairly straightforward, right?

In this particular example (and I thought it best to show it as closely to my working version as is clear), I’ve sent the different results to different template pages because those templates differ to a large degree. However, if your search results templates for the different sections are identical (or nearly), then you could skip out the ’search.php’ file, and this to your index file:

<?php $search_refer = $_GET["site_section"];
if( is_search() ) :
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
if ($search_refer == 'blog') { query_posts("s=$s&paged=$paged&cat=4"); }
elseif ($search_refer == 'articles') { query_posts("s=$s&paged=$paged&cat=3"); };
endif; ?>

That should do the whole lot after the search form in one step! If you’ve come up with a more elegant solution to this, or know a more efficient way to implement this solution, then please leave a comment — we all benefit from sharing tips like these!

© Rob Barrett Design.

OK, it’s just a holding page for the time being, until I build the site (and that probably won’t happen for at least a month or so — March is already filled up with holidaying and moving house), but it’s good to finally have something more substantial than just an idea in my head.

To reflect that I’m trying to involve myself in less web development, and more work involving graphic design and illustration, NHC will be geared towards generating clients requiring need print design, and digital design that doesn’t involve much in the way of back-end coding. I’ll still be working on web development for a number of existing clients, but I’m not going to be actively pushing this service.

This site, Rob Barrett Design, will remain in order to showcase my personal projects and to host my blog (I’m still undecided as to whether I should blog under RBD or NHC, so I’ll keep it here for the time being), and it will likely shift towards a role that supports my search for a full-time design job in London.

I’ve got a nice UPrinting giveaway planned to mark the unveiling of the finished NHC site, so keep your eyes peeled for that!

© Rob Barrett Design.

You might be asking why this would be a useful feature. Well, take my specific example, for instance.

I wanted to include the code for a PayPal ‘View Cart’ button in a Page that I was building for a client, but the Visual Editor was messing up the long code lines whenever I saved. I could have deactivated the Visual Editor from the user profile, or I could have installed the Exec-PHP plugin and referenced in include file containing the PayPal code, but it was important that the page be as easy for my client to edit as possible, so those solutions were far from ideal.

What I really wanted to do was create a Custom Field called “PayPal View Cart Code” and set the code snippet as its value, and call that into the Page — all from within the Edit page.

After a couple of hours worth of searching for a method, I was ready to give up and use a workaround — but then one of my Twitter friends coincidentally tweeted about a page on WordPress Shortcodes, which lead me to the find the ‘Custom Fields Shortcode’ plugin.

Once installed, all you have to do to display the contents of a Custom Field is wrap the Custom Field Name in a [cf] tag. So, in my example:

[cf]PayPal View Cart Code[/cf]

Because the contents of the Custom Fields aren’t subjected to WordPress’ text preformatting, the code works perfectly. Plus should the HTML-unfamiliar client ever need to change his PayPal code, he can easily copy-and-paste the replacement code into this Custom Field instead of searching through the Editor. I think it makes for a pretty elegant solution.

It’s a small plugin, and you could easily take the code and place it in functions.php if necessary (and/or change the shortcode).

© Rob Barrett Design.

So, what’s new?

1. The Blog has been separated from the main part of the site. This is because I initially want my site to be working to get me job offers and project enquiries, and I felt that the previous homepage wasn’t focusing on that target anywhere near enough.
2. Updated homepage with Rob Barrett mascot. I want to get involved with more illustration work in the future, as opposed to the web design which is currently taking up a lot of my time, and it just made sense to have something illustrated to greet visitors to my site.
3. My portfolio layout has been updated. Rather than have a long list of images and descriptions and testimonials, it’s now a collection of images depicting various works within a project, and if the reader wants more information then they can progress to an individual post to read more. I think this allows a reader to much more quickly assess the type of work that I do. I’ve also added in a small gallery of my personal works on Flickr.
4. The two sidebars have been pared down to one compact sidebar. A lot of the previous sidebar content was superfluous — I didn’t need a long list of post categories, or links to social bookmarking sites (those have now been moved to the information panels inside individual posts), and there certainly wasn’t any need for it to be spread across multiple columns as it was before.
5. I’m now making far more use of the footer. It now contains a list of my five most recent posts, along with links to my RSS feed and my other appearances throughout the internet, as well as a secondary list of navigation links.
6. Lastly, I’ve added my Twitterlove Bird to the edge of the page. Well, it seemed a shame to let him go to waste!

I’ve already had a couple of comments from my friends on Twitter about how they think I could make further improvements, which I will get around to in time, but for now I’m happy with the changes. They’re not huge, revolutionary changes, but I think they’re significant enough that it should make a positive difference to the way my site get used. What do you think?

You can see my previous page layouts here: Archived website screenshots on Flickr

© Rob Barrett Design.

Say Internet Explorer 6 is your standard petrol-run car, and Firefox, Opera, Safari, etc, are shiny new LPG-run cars. Most people would agree that a LPG car is better for the environment and more economical, but imagine if every fuelling station in the world suddenly decided that they were only going to supply gas — and were no longer going to supply petrol.

You’d get a standstill. Sure, a lot of people could probably upgrade their car and get along just fine, but what about all the others who don’t have the time, money or simply aren’t able to get a LPG-powered vehicle?

Briefly ducking out of the analogy, take Thailand, for example. The times that I’ve visited, I’ve been to many internet cafés where the PCs were struggling to run IE6 on a barebones Windows XP install, and those often at resolutions still as small as 800×600. Without a costly upgrade to their hardware, it’s quite likely that a browser change would result in their business going from barely usable to something akin to running a marathon on broken legs.

Don’t get me wrong, I really wish the case would be that everyone drives economically-friendly cars (…or uses properly standards-compliant browsers) as they got released, so that the entire industry could make massive leaps forwards — but realisitically, it’s just not gonna happen. Do bear in mind though, that the horse and cart is no longer the civilised world’s primary mode of transport — we’ll eventually get rid of IE6, it’s just unfortunately going to take a whole lot of patience.

A final word to those boycotters… No. Feel free to do so on your own sites and projects — in a rich and informed market (read, tech savvie), you can afford to serve only LPG — but when your clients’ customers roll up into town in their Robin Reliants, they’re going to get stuck. Yes, it’s a pain, but it’s something that we have to live with for the time being, as much as we hate to.

Title photo by tonylanciabeta

© Rob Barrett Design.

This has been partly due to a push by myself towards better self-promotion, but also hugely thanks to a number of great fellow designers, all of whom are quick and willing to help out at a moment’s notice.

This post goes out to them, and the various sites I’ve latched onto to shout about this site — thanks, guys!

Designers who have given advice, support, retweets, floats, etc:

Anca Foster
Twitter: anca_foster
born romanian, married american. known to design cool stuff once in a while. if you think im too random, i probably think you’re very boring. :)

Andrew Taylor
Twitter: Additive
Designer, drummer, type nerd and geek for life.

Robert Basic
Twitter: robertbasic
Web developer and PHP enthusiast

Calvin Lee
Twitter: mayhemstudios
Self-Proclaimed Media Ho, Designer, Blogger, Stunt Double for the Hulk and Nice Guy

Cerven Cotter
Twitter: pixeldeath
design, words, punkrock, SKUNX

Andy Sowards
Twitter: andysowards
I am a professional Web Developer, Programmer (primarily PHP, Javascript and Actionscript), Family man, and All around advocate of all things Technological.

Dor Dan
Twitter: dordan
Here is the part where I say I am a freelance web designer and that I’m jew?

Andrew Beeston
Twitter: niphal
Christian, husband, soccer player, singer, business owner, web designer, and aussie.

Ronald Bien
Twitter: naldzgraphics
Im a graphics Designer aiming to be a succesful blogger too:)

KorbyImagery
Twitter: KorbyImagery
Web Designer and Adobe Trainer

Mary Richardson
Twitter: zurichstudios
GraphicArtist/Designer

Martin Kulakowski
Twitter: notanotherone
Business Partner and Lead Creative at Lunchbox Collective

Navdeep Raj
Twitter: 3drockz
Business Partner and Lead Creative at Lunchbox Collective

A few places I’ve promoted myself:

Brainsites
Brainsites is a website directory and toplist for webdesign related websites with categories for CSS, Resources, Tutorials, SEO, Templates, Photoshop, Wordpress and much more.
(Twitter: sharebrain)

Design Float
A social media site dedicated to the design industry. Design Float aims to collect and organize design-related content from across the web while letting the community float the best articles to the top pages of their categories and sink the most irrelevant one’s to the bottom.

Directory for Designers
The Social Media Directory for Designers, the new launch from the Arbenting Design Blog duo. This directory is meant for designers from all across the globe to be able to share their various social media network information so that the community can keep up with each other.

Just Tweet It
A user directory for Twitter organized by genre to allow for users to easily find other Twitter users to connect with.

Design Forums
Offering a free, friendly community to discuss design. Join Design Forums today and start talking to designers across the UK.

Other shout-outs:

TweetDeck
AIR application for Twitter — if not for this, I don’t think I would’ve gotten into Twittering at all.
(Twitter: iaindodsworth)

Freshbooks
A great web-app for tracking time and billing clients. Friendly support as well!
(Twitter: freshbooks)

© Rob Barrett Design.

But it’s here! I did it, welcome to my new style, new platform website. I’m hoping it will spur me on to write more, to learn more, and to get more involved in the design community.

Why switch to WordPress?

Previously, I was using ExpressionEngine to manage my site, which at the time, I loved. And to be honest, there’s no reason against them that I decided to move away (…OK, except for the awkward URL structuring and workarounds). It’s a great product with a fantastic community and support team behind it.

However, I know that a lot of my upcoming work is going to require WordPress sites, and I knew next to nothing about how to build a site with this system. With the massive community and range of plugins behind it, I figured that it would be a safe bet to switch over — my blog would better integrate into those of other designers, and I’d learn something new along the way as well — win/win!

I’m very happy with it all so far. I managed to put this site together very quickly (well, as usually happens, the main structure went up quickly, and the tiny, barely noticeable fiddly bits took five times as long!), and it looks as though it’s going to be far easier to maintain. One gripe I do have is that given the amount of WordPress users, the documentation for beginners is very lacking. I managed to find a few good learning resources, but I’m drafting those into an upcoming post.

What’s new on the site?

Firstly, a proper ‘About Me’ page. That was somewhat lacking before, and I figured it was about time I properly introduced myself to any visitors and/or potential clients or employers. I’ve also included a select list of Testimonials from previous clients.

My portfolio pages have been compacted into the one page to make it much easier to digest. I think it has far more impact now, rather than when the visitor was forced to navigate through various sections.

Lastly, the blog has been optimised for discussion. Commenting is better than it was before, as is the categorisation and archiving. I’m planning to integrate notifiers to advertise any new posts via Twitter, as well as the usual RSS feed, to alert anyone who wants to know of new content.

Make yourself at home…

So there you have it, take a look around, and feel free to comment on anything. I hope you enjoy the new site! If you’ve any suggestions for me, or any tips for a WordPress beginner, please drop me a note!

Oh, and if anyone’s confused about the title image, check out this brilliant advert!
http://uk.youtube.com/watch?v=zXU9Ur9QznE

© Rob Barrett Design.