Making Wordpress page headings different from the menu items

By Tim Priebe on May 17, 2010 at 7:48 am in Development, Technical

PHP and WordpressJust a quick Wordpress tip this time for theme developers, or people who just want to customize a Wordpress theme they’ve purchased.

Sometimes there are reasons to make a menu item slightly different from the title of the actual page. Perhaps your menu space is limited, but you have plenty of room in the content area. A typical example is using “FAQ” in the menu, but then the page heading actually shows “Frequently Asked Questions.”

A great way to accomplish this is the Custom Fields in Wordpress, combined with a bit of theme customization.

Normally, you would insert the title of a page like this:

<?php the_title(); ?>

Instead, you can create a custom field. We’ll call it “custompagetitle” for this example. On the FAQ page, you would enter ‘FAQ” as the title of the page, then a custom field called “custompagetitle” and enter “Frequently Asked Questions” there. Then, instead of the previously mentioned code, insert this code:

<?php

// See if there's a custom field custompagetitle,
// and if so, use it as the page's title

$realtitles = get_post_custom_values('custompagetitle');

if (is_array($realtitles)) {

$realtitle = implode($realtitles);

}

if ($realtitle)

echo $realtitle;

else

the_title();

?>

Not only does this code use your custom heading, but if there is no custom heading, it will default to the actual page title.

Preventing jQuery conflicts in WordPress

By Sean Sanders on March 30, 2010 at 4:36 pm in Development, Technical

jquery

Okay, it’s programming pet peeve time. Well, specifically web programming pet peeves. And really just one, so forget the plural there. Here goes nothing.

If you do any kind of web programming at all, you’ll have heard of jQuery, which is (according to this source: http://trends.builtwith.com/javascript/JQuery) the most popular Javascript library in use today. It’s got several things going for it. It’s powerful. It’s flexible. It’s easy to use. It’ll even clean your house and do your dishes if you ask nicely. OK, maybe not that last one, but I’m sure it will be in a future release.

Being as powerful as it is, it comes as no surprise that a large number of WordPress plugins use jQuery for all kinds of things. If you are a theme or plugin developer chances are you will frequently make use of jQuery in this development process.

The problem with so many developers using jQuery is using the traditional method of including it can cause conflicts between versions. Typically, you would load jQuery in one of a couple of ways.

If you have a local copy:

<script type="text/javascript" src="_js/jquery.js"> </script>

Or if you prefer Google’s CDN (Content Distribution Network) version:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>

The problem with directly placing these in your theme’s header, or using the add_action function as a plugin writer, is yours is likely not the only part of the end-user’s WordPress installation which will want to use jQuery. If you have multiple places in the website trying to load jQuery you end up with at best redundancy in your code and at worst a conflict which breaks your website.

Fortunately, if you want to use jQuery without causing conflicts then WordPress will do of the work for you. WordPress already includes its own version of jQuery, so if you’re happy with using the included version, all you need is this php function:

<?php wp_enqueue_script('jquery'); ?>

WordPress inserts all the queued scripts during the wp_head hook, so you need to call this function before that hook runs. If you’re a theme developer, it’s sufficient to insert this function call anywhere in your head section (assuming you follow the practice of always placing wp_head() at the end). If you’re a plugin developer, you’ll need to make use of the init hook.

<?php
	function my_init_method() {
		wp_enqueue_script('jquery');
	}
add_action('init', 'my_init_method');
?>

This will make sure the script is queued before wp_head is run. Now say you don’t like WordPress’s included version and would instead like to use a different version. Here is how you would change it to use the CDN version:

<?php
function my_init_method() {
	wp_deregister_script( 'jquery' );
		wp_register_script(   'jquery',
		'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');
	wp_enqueue_script(‘jquery’);
}
add_action('init', 'my_init_method');
?>

One last thing to note: WordPress loads jQuery in “no conflict” mode. A good description of the details of this mode are available here: http://api.jquery.com/jQuery.noConflict/. What this means for most users is just you’ll want to use the jQuery alias instead of the normal shortcut of $. This is to prevent conflicts with other scripts which use the same shortcut. Instead of looking like this:

$(‘.lameClass’).addClass(‘awesomeClass’);

Your code will look like this:

jQuery(‘.lameClass’).addClass(‘awesomeClass’);

You can see that WordPress has built in the capability to handle pretty much any scenario you could come across; you can even load different versions of jQuery and give them different aliases if you really need to. So now that everybody knows, I’m not going to see any more jQuery conflicts in WordPress. Right? Please?

You can find more information on queueing scripts and a list of plugins WordPress has handles for in the WordPress codex at http://codex.wordpress.org/Function_Reference/wp_enqueue_script.

Firebug in IE

By Sean Sanders on October 20, 2009 at 6:50 am in Development, Technical, css, html

firebug-logoI’m Sean Sanders, one of the relatively new programmers here at T&S. Our former programmer Nick Little blogged previously about tools to help with web development, and one of those tools I find incredibly useful is the Firebug plugin for Firefox. There are some situations when having the ability to look at the CSS in other browsers the way you can in Firefox is helpful.  This is especially true with IE. Because of the way IE chooses to (not) display CSS rules, we often have to create style sheets just for IE to make it display our sites properly. A few days ago I found myself in a situation where I was trying to debug a site in IE7 and wanted to figure out exactly which rules were being applied. I looked into seeing if there was a way to use Firebug in IE.

What I found was a short bit of Javascript the people behind Firebug had written to be able use some of Firebug’s functionality in other browsers. They call it Firebug Lite.  This isn’t the full addon for Firefox, so you can’t change CSS on the fly the way you can in Firefox, but it’s still useful for being able to see how the rules you’ve created are getting applied. The following is the script for adding it to your website:

<script type=”text/javascript”
src=”http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js”></script>

Also, for ease of use I wrote a bit of PHP to quickly turn the Firebug Lite script on and off.

<? if ($_GET['firebug']=="1") { ?>
<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>
<? } ?>

Now all you have to do is view the webpage normally when you don’t want to see the Firebug information, and add the parameter ?firebug=1 to the end of the url if you want to turn on Firebug. (Or, if there are already URL parameters, &firebug=1) I mentioned IE earlier, but if you are having trouble with your website in other browsers, such as Safari or Opera, it works equally well.

Moving business processes online

By Tim Priebe on September 10, 2009 at 10:28 pm in Development

boyideaA website is unique from other marketing mediums (even social networking) in that it can actually handle some of your business processes in addition to being a marketing tool.

But how do you find processes you can move onto your website?

The best way is to go through your business processes with one of the following types of people (listed in order of preference):

  1. A web professional
  2. A friend who isn’t that familiar with your business
  3. Yourself

Regardless of who goes over it with you, make sure that you list every single process out that you can think of. Start at the marketing process, how you get leads or potential customers. Then move to the actual sales process. If you’re in a service-based industry, this will likely involve sales meetings. If you’re in retail, it will probably involve the potential customer actually shopping in your store.

After that, discuss the purchase process. Then if you’re creating something for the customer after the purchase, walk through that process, including both internal communication and communication with the customer. Finally, go through what happens when the project is complete. Through everything, describe the processes as completely as possible.

As you go through all those process, keep an eye out for processes that are calculable, or ones that are the same each time. Look for things that you’ve already see online. Forms, automatic calculations, disseminating information or anything that can be put into video form would be perfect.

You should be able to find a process or two that you can move online. Since your processes probably change over time, make sure you reevaluate every year or so.

Finally, make sure you don’t force a customer to go online if they try to call you for the information. Go with the flow Whatever method they want to use, go ahead and use it. Many people will prefer the website, but if one particular customer wants to just call you, let them.

Display the top level category in Wordpress

By Tim Priebe on July 16, 2009 at 12:00 pm in Development, How-To, Technical

Wordpress LogoThe is just a quick Wordpress code snippet for those Wordpress programmers or code dabblers out there.

Recently we needed a page in Wordpress to display the top parent page title rather than the current page’s title as the heading on the page. Here’s the code we used to accomplish that:

<?
$currPost = $post;
while ($currPost->post_parent) {
  $currPost = $currPost->post_parent;
}
$title = get_the_title($currPost);
?>

<h2>[ <?php echo $title; ?> ]</h2>

Manipulating Wordpress strings that print directly

By Tim Priebe on July 13, 2009 at 9:00 am in Development, How-To, Technical, html

Disclosure: This post is for tech-inclined Wordpress users, who like to code, or even do it out of necessity. If that doesn’t interest you at all, or you have no idea what I’m talking about, feel free to ignore this post.

We’re big fans of Wordpress around here. Unfortunately, many of Wordpress’s functions directly print out text and HTML instead of returning a string that can be manipulated directly.

Fortunately, there is a way around that limitation, ob_start. You can feel free to read the  documentation of ob_start, but the short version is that it buffers your output temporarily so you can save it as a string and manipulate it before outputting it.

Let’s look at an example. We’ve added some meta data to a post to display some dates and locations on a page. (Click to enlarge)

Wordpress meta data

Now let’s look at the code.

<?php the_meta(); ?>

The above code outputs the following HTML:

<ul class='post-meta'>

<li><span class='post-meta-key'>July 14, 2009:</span> Marketing Rxpo</li>

<li><span class='post-meta-key'>July 7, 2009:</span> Client Mixer</li>

</ul>

We want two changes. First, we don’t want the colon (:) after the date. Second, we want the spans to have a class of Date instead of post-meta-key. With the code as is, Wordpress just displays the info, with no way to change it. So let’s use ob_start instead:

<?php
ob_start();
the_meta();
$out = ob_get_clean();
$out =  str_replace(':</span>', '</span>', $out);
$out =  str_replace('post-meta-key', 'Date', $out);
echo $out;
?>

Here’s the output we get now:

<ul class='post-meta'>
<li><span class='Date'>July 14, 2009</span> Marketing Rxpo</li>
<li><span class='Date'>July 7, 2009</span> Client Mixer</li>
</ul>

Naturally, any string manipulation that can be done in PHP can be performed, this is just a simple example.

Embed a YouTube Video in a Wordpress Blog, part 1

By Tim Priebe on February 23, 2009 at 11:38 am in Development, blogging

There’s a couple of ways to embed videos in a Wordpress blog. The first is a simple copying and pasting of code. The second actually allows you to post them directly from YouTube’s website, but it’s slightly more complicated to setup initially.

Copying code from YouTube’s site

First, watch the video you want to put on your blog. For our example, we’ve picked the video we did on linking to your Facebook profile.

youtube-embed-1

In the screenshot above, you can see an area highlighted to the top right of the video. Simply copy the code in the Embed field.

Next, visit your blog and create a new post or page.

youtube-embed-2

In the screenshot above, you can see a couple of highlighted areas. To the top right of the post’s content area, click on the HTML tab. Then, paste the code into the content area. Click the publish button, and you’re good to go.

Next time I blog, we’ll take a look at the slightly more complicated (but better in the long run) way to post videos to your blog directly from YouTube.

The Fireworks Advantage

By Dave Roach on January 22, 2009 at 4:14 pm in Design, Development, Reviews

Adobe Fireworks CS4 BoxFireworks is often overlooked. Many (most) web designers today use Photoshop to design their websites, and a lot of them have never considered or (*gasp) even heard of Fireworks. Adobe Fireworks is made for creating websites. That is what it was built for, and it does it well. Fireworks enables you to rapidly prototype and design for the web. With it you can create a clickable PDF that will act as a prototype. Also, you can quickly create export and optimize slices (Fireworks is better at optimizing images than Photoshop).

Now don’t get me wrong, Photoshop is an extremely powerful tool and is amazing; it has way more features than Fireworks, but if all you are doing is designing websites, then you should use software that was specifically made for doing just that. Another excellent feature to note about Fireworks is that it is compatible with Photoshop. For the most part, you can open a psd in Fireworks, and it will recognize all of your layers and styles, and with CS4, compatability between Adobe’s programs have been further improved.

If you are a web designer and have not looked into using Fireworks, you should at least try it out and see for yourself how efficient it really is. There are hundreds of other excellent features Fireworks has to offer, read more about them at Adobe’s site.

Rounded Corners vs. Rounded Corners in Fireworks

By Dave Roach on January 13, 2009 at 6:26 pm in Design, Development, How-To

When designing a site in Fireworks, I have found that working with rounded corners can be a bit tricky if you don’t know some specifics. First off, there are two main ways to make rounded corners, the rectangle tool, and the rounded rectangle tool.

tools

When using the rectangle tool, you can round the corners by using the ‘rectangle roundness’ slider on the properties panel. Yes, this creates pretty rounded corners, but a couple problems can arise when using this method.

slider

First off, the rectangle roundness is relative to the size of the rectangle. If you have two rectangles of different sizes, both at 50 rectangle roundness, they will not appear the same.

roundness-50

Someone using this method to try and match corners will end up being off by a couple pixels, which can be crucial when it comes to coding.

So this is where the rounded rectangle tool comes in handy. When you create a rounded rectangle, you can just use the yellow handles to resize the entire rectangle and to adjust the roundness, even specific corners. Even better, resizing the rectangle via the yellow handle will not affect the roundness (unless you make it super tiny).

handles

Sounds easy enough, right? Well yes, but there are unseen issues here. When designing a site, pixels matter. For this reason, I like to type in the width and height of my rounded rectangle in the properties panel. The problem with this is that if you type values for a rounded rectangle it stretches it. It does not matter which method you use, the rectangle will stretch, and your corners will stretch as well. Luckily, there is an excellent solution to this problem!

numeric

What you need to do is to convert your rectangle into a symbol. You can make as many states of a symbol as you want, and then all you need to do is change one symbol and they all will change accordingly. Let me walk you through it.

First off, make a rounded rectangle with the rounded rectangle tool. Doesn’t matter the size or color.

Next, select the rectangle, and hit F8. Name the symbol whatever you want, make the type a graphic, and check the box that says “Enable 9-slice scaling guides” and click OK. Congratulations, you have made a symbol.

symbol

Now you need to double click on your symbol to go inside of it and edit it. In the window that pops up, you can resize, recolor, change the roundness of your  rectangle, apply filters, whatever you want. Then what you need to do it set up the 9-slice scaling guides. These guides allow you to resize your rectangle (outside of the symbol editing window) without distorting the corners. Just align the guides so that the rounded edges are outside of the guides.

guides

Now you can exit the symbol editing window and resize your rounded rectangle with the transform tool or by typing in the values in the properties panel. The only thing you need to watch out for is making the rectangle too small. If you shrink it so the corners meet, then they will distort like before.

The great thing about using symbols for rounded rectangles is that you can duplicate them and then edit one symbol’s corners and all instances of that symbol will change, no matter what size they are. This is especially useful if you change your mind later in the design process. Using symbols is really easy once you get used to them, and can streamline the web development process.

symbol-sizes

Don’t take your own website photos

By Tim Priebe on January 9, 2009 at 6:30 am in Design, Development

CameraIf your business is like many other small businesses, you’re probably on a relatively tight budget, even when creating a website. You’ve signed a contract with a web design company, and they’re wanting your content for the website, including photographs. Money is tight, so you opt to take them yourself.

Big mistake.

Taking the photographs yourself will, 99% of the time, result in ruining the visual aspect of the website you’ve just paid big bucks for. It’s like paying for a commercial during the Superbowl, then trying to shoot it yourself with a $200 camcorder.

But I have a nice, expensive camera

“But Tim,” you might say, “I just paid big bucks for this fantastic camera. My photos are going to look great!”

While a fantastic camera along might work for family photos or vacation memories, it doesn’t mean your pictures are going to be good enough to pass muster for your website. After all, if better equipment was all that was needed, couldn’t anyone perform brain surgery?

Okay, okay, so that’s a pretty extreme example. Let’s look at something a little closer to home for the average small business. What about printing your own business cards with a nice new printer? After all, printers have come a long way from the old days. But let’s face facts. Business cards printed on your printer are still not going to look as good as a professional printer.

It’s the same exact thing with photography.

A picture’s just a picture

“You’re just making a mountain out of a mole hill,” you might respond. “My photos aren’t going to make that big of a difference.”

Really? Studies performed at the University of Aberdeen asked website visitors to rank the credibility of an article. The first group had a good photograph of a doctor, the second a poor photograph of a doctor, and the third had the article with no photograph at all. The highest ranked version in terms of credibility was the one with the good photograph, the second the one with no photograph, and coming in last place was the one with the poor photograph.

I’m under no illusions that this will convince all small business owners to pay a professional to take photographs for their website. But there are plenty of options better than doing it yourself. You can use stock photos, hire a student, or hire a hobbyist. There are plenty of inexpensive options available.

Older Posts »