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.

Alternating column colors with jQuery

By Tim Priebe on January 4, 2010 at 7:04 pm in Design, Technical, css, html

jquery-tablesWe recently had one of our designers create a table design for a client with alternating column colors. Instead of laughing at her and not coding it, we instead decided to use a little jQuery goodness to get it taken care of.

We included the following code in our document’s head, using the Google jQuery implementation:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");

google.setOnLoadCallback(function() {
$("table tr td:nth-child(even)").addClass("even-column");
$("table tr th:nth-child(even)").addClass("even-column");
});
</script>

So that’s the code that gives every other table cell, including header cells, the class of even-column. Now we can style those cells however we’d like.

In our case, a little CSS transformed the table pictured below on the left into the table on the right.

screen-shot-2010-01-04-at-64457-pm screen-shot-2010-01-04-at-64510-pm

Of course, putting the following in our google.setOnLoadCallback function will do something similar for rows.

$("table tr:nth-child(even) td").addClass("even-column");

This would result in the following:

screen-shot-2010-01-04-at-64554-pm

While this could have been solved by actually hard-coding the table’s cells with the even-column class, we are using Wordpress on this site. This means the client could add their own table on down the line, having no idea what a class is, much less to add a specific one to every other cell in every row of the table. Plus, that would be a lot of work.

Demo of Wordpress Plugins 1/3

By Tim Priebe on December 16, 2009 at 6:32 am in Technical, Video

Recently at a local Wordpress Users’ Group, I discussed some of our favorite Wordpress Plugins here at T&S Web Design. Check out part 1/3 below, with Contact Form 7. Parts 2 & 3 coming soon…

Tip for IE6 fixes in Dreamweaver

By Tim Priebe on November 27, 2009 at 5:03 pm in How-To, Technical, css

Dreamweaver and conditional IE6 CSSIf you’re a Dreamweaver user and you try to make sure your sites work in Internet Explorer 6, this tip is for you.

When using Dreamweaver templates, one of the things that Dreamweaver does well is automatically correct paths for you. This is extremely helpful, because you don’t have to worry about what directory you’re in when linking to files.

So you might link to a style sheet in your template Templates/main.dwt like this:

<link href="../_css/reset.css" rel="stylesheet" type="text/css" />

Then, when you look at a file index.php one directory up, it looks like this:

<link href="_css/reset.css" rel="stylesheet" type="text/css" />

Or, in a file /misc/news/index.php, it looks like this:

<link href="../../_css/reset.css" rel="stylesheet" type="text/css" />

Internet Explorer 6 often requires several CSS fixes to get your website to look like it does in other browsers. The method I personally prefer (and that we use at T&S) is a separate CSS file for IE6 that’s applied only when IE6 is used.

Here’s what that looks like:

<!--[if lte IE 6]>
<link href="_css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

The only problem when using this technique in Dreamweaver-based sites is that Dreamweaver sees the entire thing as an HTML comment, and therefore does not update the CSS file’s path when it’s in a different folder. So it might work in some files, and not in others.

If your files are PHP files, there’s a workaround. You can use the following code:

<?php echo "<!--[if lte IE 6]>\n"; ?>
<link href="_css/ie6.css" rel="stylesheet" type="text/css" />
<?php echo "<![endif]-->\n"; ?>

And there you go. Now Dreamweaver will skip over the PHP code, and will assume that the IE6 stylesheet is just a normally linked stylesheet. Your browser will interpret the code correctly, but Dreamweaver will still update the path for you.

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.

Free One Page Website Workshop

By Tim Priebe on July 18, 2009 at 10:39 am in Technical, Workshops, freebies

Laptop in Field - One Page Website WorkshopJoin us for this free workshop! In an hour and a half, learn how to create a website and get it online.

We’ll be providing attendees with several one page website templates to choose from. Then you’ll learn how to fill in your template with actual content.

Once your one page website is ready, we’ll show you how to purchase a domain name and hosting, so your website has a place to live online.

Finally, we’ll look at testing and uploading the final website.

We’d love to see you at this event. If you think you might come, please RSVP through our One Page Website Workshop event page on Facebook.

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.

Clear out some apps: your dock will appreciate it

By Emily Spirek on June 26, 2009 at 4:50 pm in General, Technical

People always find it humorous to make fun of me for the excessive amount of applications on my Mac’s dock. Despite the torture,  I have always justified each application’s position because I use every one on a daily basis. Finally, Dave (the other designer), came to my rescue and showed me a wonderful tool that clears my dock. All you need to do is add your most used applications to your Finder window, and you’re golden. Here’s what it looks like:

picture-20

And here’s how it’s done: navigate to your Applications folder in Finder, and drag the desired app next to the “search” field. Hold it there until it gives you the green + symbol and drop it. And you’re done! If you want to open a file in that particular app, just drag the file over the icon and it’ll open right up! No more right-clicking to “open with” a certain application.

If these applications aren’t in use, it frees up your dock and no one will have a reason to make fun of you. And, if you have quite a few windows open, your dock doesn’t squash to a microscopic blob.

Older Posts »