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.

Tip for IE6 fixes in Dreamweaver

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

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.

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,html,Technical

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.

Looking for 40/hr week programmer student worker during summer

By Tim Priebe on April 13, 2009 at 5:11 pm in General

We’re looking to hire on a full-time programmer student worker for this summer, with the possibility of continuing on into the school year. We are looking for someone who learns quickly. Experience in the following is a plus, but IS NOT absolutely necessary:

  • PHP
  • MySQL
  • XHTML / CSS
  • Javascript (jQuery experience would be nice)
  • General IT support
  • Social Networking
  • WordPress
  • Adobe suite (Photoshop, Fireworks, Dreamweaver, etc.)

Again, experience in those areas is not necessary, but would be a plus. We’re looking for someone to start immediately after the semester ends, the very next week.

Email us your resume, any code samples, and URL to any online work you’ve done. Also indicate the date you would be available to begin, and when your summer break ends. If you look like you might be a good fit, we will call or email you to schedule an interview.

  • Location: Edmond, Oklahoma
  • Compensation: $10/hr
  • This is an internship job

Open Source Web Design

By Nick Little on August 25, 2008 at 6:30 am in General,Link Roundup

I have always wondered what open source tools are out there for web design just in case I decide to boycott Adobe or Adobe goes bankrupt or something. It turns out there are some pretty good options for web design. None of them are quite as good as Fireworks or Dreamweaver, but they do get pretty close at least for the classic Apache, MySQL, PHP setup.

The best PHP editor actually turned out to be the best CSS and Javascript editor I could find as well. They are actually plugins to one of the best open source IDEs (Integrated Development Environments) available, Eclipse. Eclipse can be downloaded from www.eclipse.org.The plug-ins for PHP, CSS, and Javascript are PHP Development Tools, CSS Eclipse Plug-in, and JavaScript Editor Eclipse Plug-in, respectively. The PHP Plug-in was designed to work with XAMPP, a cross-platform Apache, MySQL, PHP, Perl distribution.

Last, but not least we have the GIMP. It is by far the most popular open source image editing application. It lacks many of the features of Photoshop, but most can be accomplished using either plug-ins or a combination of steps. Exporting images using slicing is much more difficult than using Fireworks, but it can still be done.

Using open source software would not be my first choice, but if something happened where I did not have access to Adobe products I would still be able to be productive.

Replacing Querystring Values in URLs

By Nick Little on August 6, 2008 at 6:30 am in General,Technical

There are many times in a programmer’s career when regular expressions are extremely useful. Sadly, many programmers do not know regular expressions well enough to use them when the situation requires it. This post shows how easy it is to replace the contents of querystring variables in a URL using regular expressions.

function replaceQueryString($url, $key, $value = NULL)
{
  $url = ereg_replace('[\?&]'.$key.'=[^&#]*(#?)', '\\1', ereg_replace('([\?&])'.$key.'=[^&#]*&', '\\1', $url));

  if ($value === NULL)
    return $url;
  else if (($pound = strpos($url, '#')) === false)
    return $url.(strpos($url, '?') === false ? '?' : '&').$key.'='.urlencode($value);
  else
    return substr($url, 0, $pound).(($question = strpos($url, '?')) === false || $question > $pound ? '?' : '&').$key.'='.urlencode($value).substr($url, $pound);
}

The first line of the function uses regular expressions to remove the existing query string value from the url. Next, the correct point of entry is found for the new value to be inserted. Finally, the new value is inserted into the url. All that in under ten lines of code.

SQL Many-to-Many Relationships

By Nick Little on July 28, 2008 at 10:47 am in General,sql,Technical

Occasionally when working with database relationships one will come across an instance of a many-to-many relationship. This type of relationship can occur, for example, when multiple users can be assigned to multiple tasks with users being assigned multiple times. This type of relationship should be implemented as three separate tables as shown below.

Users

userid username phone …
1 me 867-5309 …
2 you 555-5555 …

Tasks

taskid name description …
1 Blog Write a blog entry and post it on the T&S Blog. …
2 Create a new website. One person design the site. The other person write the html/css for the site. …

Taskassignments

assignmentid taskid userid
1 1 1
2 2 1
3 2 2

Now, it is possible to join these tables in a single SQL statement. However, the resulting set would most likely contain many duplicate entries. There is a way in mysql to get the entries in two SQL statements without duplicating even a single entry. This is done using mysql’s GROUP_CONCAT function. This function is used to return many entries that relate to one entry on a single row. For example:

SELECT userid, GROUP_CONCAT(taskid) tasks FROM Taskassignments GROUP BY userid

would return

userid tasks
1 1,2
2 1

The next step from here would be to change the SQL statement so that it joins with the “Users” table.

SELECT userinfo.userid, tasks, username FROM Users userinfo INNER JOIN (SELECT userid, GROUP_CONCAT(taskid) tasks FROM Taskassignments GROUP BY userid) tasksassigned ON userinfo.userid = tasksassigned.userid

This retrieves the username instead of just the userid. (Now the user can be referred to as “Bob” rather than “User 12″.)

Now that the users have been retrieved from the database, all the associated tasks must be retrieved without duplicating entries. How can this be achieved? All the task ids must be parsed and stored so they can be retrieved from the database. In php this is simply a few lines of code:

$ids = array();
while ($row = mysql_fetch_assoc($result1)) {
  foreach (explode(',', $row['tasks']) as $id) {
    if (!in_array($id, $ids))
      $ids[] = $id;
  }
}

Lastly, all the tasks are retrieved from the “Tasks” table.

if (count($ids) > 0)
  $result2 = mysql_query('SELECT * FROM Tasks WHERE taskid = '.implode(' OR taskid = ', $ids);

And the tasks are correlated to the proper users, so the results can be displayed.

$tasks = array();
if (isset($result2))
  while ($row = mysql_fetch_assoc($result2))
    $tasks[$row['taskid']] = $row['name'];

mysql_data_seek($result1, 0);
while ($row = mysql_fetch_assoc($result1)) {
  echo htmlspecialchars($row['username']).' has the following tasks:
<ul>';
  foreach (explode(',', $row['tasks']) as $taskid)
    echo '<li>'.htmlspecialchars($tasks[$taskid]).'</li>';
  echo '</ul>';
}

“Fancy Font” Replacement

By Nick Little on July 7, 2008 at 4:00 pm in General

Fancy FontsOne of the most time consuming and annoying things I must do when converting a web site from design to CSS/HTML is finding some way to replace all the “fancy font” text with images. I understand that these fonts make the site look much, much better, but there is no way to ensure an end user has the font installed nor anyway to embed the font in HTML. Placing these text images in the design can prove difficult for the following reasons:

  • Some of the text may change at a later point in time, meaning that I will have to open the design, change the text, and re-export the slice.
  • Some text may be added in a “fancy font” region, meaning that I will have to open the design, copy a text region, change the text, create a new slice, and export it.
  • Some of the text may be removed, meaning that I will have to go in and remove the image if I want to keep the image folder clean and up-to-date.
  • Some of the text may overflow its container, meaning I will need to set a min-width in the CSS file which is not entirely cross-browser compatible.

I recently came across two solutions to this problem. The first is sIFR. It uses JavaScript and flash to replace all text in a tag with an equivalent flash object. The replaced tags are determined using a CSS selector. One really nice touch is that the text in the resulting flash object can be selected and copied. However, there are some limitations. It has limited support for linking, each font must be embedded in its own flash file, limited support for font styling, and background transparency is not cross-browser compatible. For these reasons, I decided to go with another choice.

The second solution I found uses images to replace text. Using PHP and a TrueType font file, the script dynamically generates a PNG-8 file with a transparent background which is cross-browser compatible. It divides the words into separate images, so overflowing will cause the images to be bumped to the next line. I also tweaked the code so that a shadow can be generated. It caches all the generated images, so minimal processing time is used when recalling previously generated images. Lastly, it can be used as a javascript replacement technique, or it can be used in-line, without javascript to replace text. The main downside is that the text cannot be selected or copied. Here are the PHP file and the javascript file.

All-in-all I chose the second solution, because it was easier to work with and customize. I could not get sIFR to maintain consistency in the way it resized text. Also, sIFR generated object tags, which proved to be harder to work with than the image tags generated using the second technique.

Encoding HTML Entities with Javascript

By Nick Little on June 18, 2008 at 6:23 pm in Technical

Today I needed to use a bit of javascript to modify the contents of a web page. However, the section of the page I was changing was being updated with user entered content. I wanted the content on the page to show exactly what the user typed, meaning that I had to make sure that if the user entered any valid xhtml code it was encoded correctly. I searched around on google and found next to nothing on the topic, so I decided to create my own.

I used the php function “htmlspecialchars” as the basis for my function. I looked up the replacements that this functions uses. It turns out that only four characters need to be replaced to properly encode the contents: &, <, >, and “. Here is the function:

function htmlEncode(str) {
  return str.replace(/&/g, '&amp;').replace(/"/g, '&qout;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

The only thing I had to watch was that the ampersand character was encoded before the others, since it is used for encoding the others.