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.

Why do I put the milk in first? Well, as you’re waiting for the kettle to boil, the tea is already infusing into the milk, which means your cup of tea is ready that little bit sooner. Plus you don’t end up with burnt milk and little floaty bits on the surface.

What’s this got to do with design? Well, just try and see me get some work done without a cup of tea inside me, then you’ll know…

Title image by spjwebster

© Rob Barrett Design.

In a few minutes that I had spare, I doodled a couple of birds to offer up for use, and sent across the best of the two for consideration. It didn’t get taken up, so rather than let a sketch go to waste, I decided I’d illustrate it for a tutorial of how I like to use Illustrator.

This is also the method that I used to create the cover images for the Adam Eason CDs.

Step 1:

Firstly, I took a photo of the sketch and loaded it into Photoshop (I’ve not installed my scanner yet since I reformatted my PC, hence taking a photo and not a scan). This first image is the sketch that I submitted.

Step 2:

I wasn’t quite happy with a few bits in the first draft — the tail was too short, and the eyes made the bird look stoned! So, adding a couple of new layers in Photoshop, I used white and black brushes to paint over the parts I wanted to edit. At this stage, I also decided to group the sketch layers and set that to Multiply, so that I could throw down some colour underneath, to get a feel for the final look.

Step 3:

Happy with the last stage, I loaded up Illustrator and placed the sketch into the bottom layer. I locked it and set it to 50% opacity, so that I could work over the top of it.

I then began to use the Pen tool to loosely draw the bird. I say ‘loosely’ here — it’s best to be as accurate as possible from the start, but at this stage there’s still lots of time for refinement. Just getting it drawn is the first priority.

As you can see, I made quite a few changes to the sketch here. I didn’t like the feet clutching onto a branch — I thought it would make a stronger and more versatile image to have the bird standing on the ground, reaching out to pass the heart, so I reworked his feet. The eyes were an accidental discovery — I created the circles for the basis of the eyes, and then decided that I preferred the look of them being wide open, so it stayed like that. The mouth got tweaked a little as well, to look less awkward.

Step 4:

Here’s the lengthy part. This is where I take my basic lines, tidy up the curves, so that everything flows nicely, and then where I make the nice, varied line-widths.

So, using the white arrow Direct Selection Tool (press A) and the Convert Anchor Point Tool (Shift-C), modify any lines that look like they’ve got any unintentional angles and points within them, so that they curve smoothly.

Next, to create the variable width line, lock all objects and layers except the specific line you want to work on. Select it (Ctrl-A / Cmd-A), copy it (Ctrl-C / Cmd-C), and paste behind (Ctrl-B / Cmd-B). You now have two copies of that line, one on top of the other. Using the Direct Selection Tool, select one end of both lines (so you have two anchors in your selection. Join them with Ctrl-J (or Cmd-J) and select ‘Corner’.

Now you’ve turned the two lines into an outlined shape. Invert the fill and stroke with Shift-X to set black as the fill. Now if you move any other anchor points on the object, you’ll see the shape of the line begin to emerge. This takes a fair bit of work, playing with the curves, to get the line to look smooth throughout, but that’s the simplest and easiest technique that I’ve found for varied widths. If you don’t want the line to come to a point, simply seperate the end anchors before joining.

Step 5:

At this point, just before adding colour, I then take a look at all of the lines and, using the Knife tool, slice off any segments that are overlapping — i.e. if a line should be receding behind another, then that is the one that’ll get chopped up (TIP: Hold Alt/Option when you start to use the Knife tool, and you’ll get a straight line).

Then just delete (or hide, if you like) the sections of line that you won’t need to show in the final image.

Step 6:

Not much work to go now! I now create a new ‘Colour’ layer beneath the ‘Lines’ layer and roughly block out the main sections of colour as set out in my Photoshop sketch (it doesn’t need to be neat, as the edges of these block are hidden behind the black lines).

Step 7:

Time to add the finishing touches… Create a new ‘Shadows’ layer above ‘Colours’, and select shades of your main colour blocks. Draw out the shapes of the shadows as sketched in Step 2. You can also add a ‘Highlights’ layer, as I did for the heart. Depending on the number of shadow/highlight depths you want, this can either be a very short step or an incredibly long one.

To add the final touches, I drew the stripes on the bird’s legs in a dark brown, and set the edge of the tongue in a dark pink, to take some focus away from it.

Final image:

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

Taking my ‘Blog’ link as an example, you’ll see that the link is repeated three times in the same image — firstly, there’s the basic state; secondly, the rollover/hover state; and thirdly, the ‘current’ state (which shows when you’re viewing that page or section). Because they’re combined into one image, it means that all three states load at the same time.

Sure, it does mean a slightly longer initial loading time, but personally I prefer to wait that extra second while the entire page is loading and then have everything ready to view. In this particular case, we’re talking about adding 2 or 3 KB onto the total size, so it’s near enough to negligible.

For the basic link, I insert the following HTML (Using conditionals, the first code is shown on all non-Blog pages, and the second is shown on Blog pages):

<a href="#" class="blog"><span style="display:none">Blog</span></a>

<a href="#" class="blog current"><span style="display:none">Blog</span></a>

Then, I add this style to the stylesheet:

a.blog {
  background-image: url(../rb-images/nav-blog.gif);
  background-repeat: no-repeat;
  background-position: left top;
  display: block;
  margin: 0px;
  padding: 0px;
  width: 48px;
  height: 59px;
}

The link height is set to one-third of the entire image height (177px), and the background is set to align to the top-left of that box.

This way, the white and orange states are hidden out of view, but still loaded onto the page. So then, all you then have to do for the hover and current states is move the alignment of the background, like so:

a.blog:hover {
  background-position: center;
}
a.blog.current {
  background-position: bottom;
}

Simple! Three different link styles, one image, one quick load!

© Rob Barrett Design.

I whipped up a couple of fast demos of the technique in the image below — the first shot is the stock photo I started with, the second is the result after the technique is applied, and the third is a play-around with a photo of myself.

Obviously there’s no substitute for good photography, so the stock image works somewhat better than the photo taken of me with my friend’s mobile phone.

Anyway, you can see the tutorial here:
Visual effects in the style of 300

© Rob Barrett Design.