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

© 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.

That’s the first step, and it’s got an easy solution — just install the Exec-PHP plugin, and all PHP within Posts and Pages will run as you’d expect it to.

The second requirement I have for my blog is that, such as in this WordPress Tip, I want to display PHP code as part of a tutorial, within a <code> tag. Entering the PHP code as is will simply run it, which is no good. Perhaps you could replace the questions marks with ‘&#63;’ (the HTML code for the question mark character)? Elsewhere, that would be fine, but a <code> tag will display its contents exactly as you enter them, so you’d get that HTML code showing up.

The workaround I came up with is to install the Custom Fields Shortcodes plugin, which lets you display the contents of a Custom Field within a Page or a Post (I’ve gone into more detail in this post). Then you create a new custom field called, say, ‘PHP Example‘, and enter the code into it, replacing the question marks with the above HTML character.

<&#63;php echo "This is some PHP code" &#63;>

You can call this into your post with the [cf] plugin tag. So, in this example, you’d type:

<code>[cf]PHP Example[/cf]</code>

That will draw in the contents of the specified custom field, and show the code exactly as someone would need to enter it into their own code editor.

© Rob Barrett Design.

I don’t claim to be a PHP coder, so while it does work, it could be that this can be shortened somewhat. Feel free to use it as a base for making it more efficient, if you’d like (and if you can, I’d love to see what you come up with!).

OK… Somewhere within the Loop, before the area you want to customise, enter the following:

<?php $postdate = the_date('Y-m-d','','',false) ?>

That tells WP to find out the publication date of a post and to assign it to the function, $postdate. You can then call that function later in the post. For example:

<p<?php if ($postdate < date("2008-12-29")) { echo ' class="old"'; } ?>>

That snippet of code will check to see if the post was published after 29th December, 2008. If not, it will be assigned the “old” class, and you can style that however you like through your stylesheet.

Of course, it’s not limited to CSS styling — you can place whatever you like within the if statement, so you could, say, choose to show full posts after a certain date, and excerpts of posts written earlier.

© 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.

I’ve been playing around with Flickr the past few days, and I came across an account that I set up months (possibly years) ago and have never used (actually, I discovered two accounts of mine, one last updated in 2005, but I’ve deleted that one now).

As I’ve been back at the parents’ house with my laptop which I rarely use, I thought I’d have a scan through and see what I’ve got lurking on it. It turns out I had quite a few illustrations that I’d started in Illustrator, but never quite got around to finishing, so I’ve spent the last couple of days polishing those off, and making a new one to go along with them, and I’ve uploaded them all to my ‘new’ Flickr account.

You can see my illustrations here:
http://www.flickr.com/photos/robbarrett/

Feel free to add me as a contact there. I may well add the rest of my portfolio pieces up there at some point, and integrate Flickr into the overhaul I’ve got planned for this site, so if you’ve any suggestions on useful Flickr plug-ins for WordPress, I’d be grateful to hear them.

I hope you all have fun on New Year’s Eve in a few days’ time! See you in 2009!

© 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.

Jacob posted his article just as I was putting together this version of my website, and it helped me a huge amount in finding the right plugins to do what I wanted my site to do.

In that spirit of helping, I thought I’d follow suit and publish my own list of must-haves. So, without further ado, here’s a list of resources that I found helpful in putting the Rob Barrett Design website together…

Tutorials:

• So you want to create WordPress themes huh?
  Wpdesigner.com’s helpful tips on how to build a WordPress theme from scratch. It does assume you know almost nothing about web designing, which is obviously helpful for many, but there’s a lot in there that can be skipped over — just make sure you don’t miss the important parts.
• How to highlight author comments in WordPress
  Pretty self-explanatory — how to set a specific CSS class for any comments made by the post author.
• The Ultimate Guide to WordPress Conditional Tags
  Very useful for serving up different content for different pages, while keeping the number of page templates to a minimum. For instance, I use conditional tags to highlight the navigation tabs when you’re on the relevant page.

Plugins:

• Better Comments Manager
  Admittedly, as I’m writing this, I don’t yet have any comments (can you hear the violins?), so this plugin hasn’t helped much yet, but from various recommendations I’ve read, and the little playing around I’ve done, it’s apparently very useful for following and managing comments when they start to rack up.
• cformsII
  A quick and easy way to create custom forms. You create the form in the backend, set the style you want (I disabled this and used my own CSS stylesheet), and then you simply have to referenced the form number to place that form on a post, page or template.
• Dagon Design Sitemap Generator
  Very simply create a user-friendly and search-engine-friendly sitemap of all pages and posts on a WordPress site.
• FeedBurner FeedSmith
  This plugin makes sure that no matter how users might try to access your RSS feed, they’ll always be forwarded onto your FeedBurner feed, making it useful to track subscribers and for any future redirection.
• Google XML Sitemaps
  A very easy, one-click plugin to create and submit an XML sitemap to Google, MSN Live Search, Ask.com and Yahoo!
• NextGEN Gallery
  The pop-up lightbox that I use for the images on my Portfolio. I don’t quite use it with out-of-the-box functionality though. This plugin auto-creates thumbnails by resizing the image — I didn’t want that, so I show a load of thumbnails uploaded to a different directory, and add the following code to the link to make it pop-up.

<a href="/wp-content/gallery/portfolio/FULLSIZE-IMAGE-NAME.jpg" id="thumb6" class="thickbox" rel="portfolio"><img src="THUMBNAIL-LOCATION.jpg" border="0" /></a>

Note the id=”thumb6″, class=”thickbox” and rel=”portfolio” — that’s what makes it work with this plugin (in this case, 6 is the Gallery image number; this needs to change for each image).

• NoFollow Free
  This enables me to enable the rel=”follow” attribute on links, which means search engines are able to follow them… Which means any commenters get rewarded with a search engine boost!
• One Click Plugin Updater
  Makes updating WordPress plugins a great deal easier.
• Ozh’ Admin Drop Down Menu
  This makes the WordPress admin backend a lot more user-friendly, in that I can access various options with one click instead of two or three.
• Preserve Code Formatting
  A bit of a legacy plugin, but I find it useful when displaying code (like the section above for NextGEN Gallery), so that it doesn’t get auto-formatted by WordPress.
• Search Unleashed
  The search box I’m currently using. Has more functionality than the standard, in that it allows wildcards, logical operations, and highlighting across posts, pages, comments, titles, URLs, and meta-data.
• Subscribe To Comments
  Another pretty self-explanatory one — allows commenters to receive email announcements of any subsequent comments.
• Twitter updater w/ TinyURL
  Makes an automatic announcement to my Twitter about any new posts that I publish.
• Ultimate Google Analytics
  A massive hassle- and time-saver! This plugin not only automatically adds the Google Analytics tracking code to every page, it also adds the tracking script to every link, allowing me to track downloads and outgoing links as well.
• wp-cache
  This caches the dynamically generated output of my WordPress site, reducing strain on my server, and reducing the load time for my visitors. It’s got a handy snippet that you can add to a page to exclude sections from the cache (I use this on my Twitter feed in my sidebar).
• WP-PageNavi
  A quick and easy way to add a more functional multi-page navigation, as seen at the bottom of my homepage.
• WP Dash Note
  Adds a handy ‘Post It Note’ section to the WordPress Dashboard — handy for keeping a To-Do list for my site! I’m not a fan of the default appearance, but it’s easy to change if you know a little CSS.
• Wordpress Automatic Upgrade
  Why go to the hassle of downloading, unzipping, overwriting and reuploading your WordPress files just to upgrade, when this plugin takes out all of the hard work?

That’s the lot that I use at present. I’m sure as my blog grows that list will very likely change, if not grow as well.

Whether you’re just starting out with your WordPress site, or you’ve been going for a while, I hope you get something helpful out of the list.

I’d be interested to hear what essential plugins and/or resources you use for your site, and if you’ve got any suggestions for improvements on my chosen few!

Update (12/11/2008):

There’s been a few additions and changes to my Plug-Ins list recently, so here’s what’s different:

• Gravatar
  Adds gravatar support for my site’s comments.
• Platinum SEO Pack
  Allows me to set the meta descriptions for each page, to boost the likelihood of getting picked up via search engines.
• RSS Feed Signature
  Specify content to be shown at the bottom of each RSS feed entry — for instance, a site banner, contact details, etc.
• Twitter Tools
  A replacement for the Twitter announcer that I was using previously, which had the problem of immediately announcing posts upon clicking ‘Publish’, even if the publish date was set to the future. This alternative plug-in waits until the post is public, plus with a small modification to the code, I’m able to point people to my Design Float account at the same time.

© Rob Barrett Design.