Category Archives: Tutorials

A Date Badge for Thematic Theme

A PHP and CSS Tutorial

A PHP and CSS Tutorial

Create a date badge for WordPress

Thematic is a great theme and I’ve been using it for about a month now on this blog and I love it. I’m slowly designing a child theme for it and I thought I’d share the code for the date badge I’ve create for my posts.

date-clip
Because Thematic uses lots of filter-hooks it’s possible to create the badge without editing any of the template files. We can just add a filter function and some CSS.

First we need to make a copy of the thematic_post_header function. This can be found in the Thematic template folder library/extensions/filter-hooks.php and looks like this.

function thematic_postheader() {
    global $id, $post, $authordata;

    // Create $posteditlink
    $posteditlink .= '<a href="' . get_bloginfo('wpurl') . '/wp-admin/post.php?action=edit&amp;post=' . $id;
    $posteditlink .= '" title="' . __('Edit post', 'thematic') .'">';
    $posteditlink .= __('Edit', 'thematic') . '</a>';
    $posteditlink = apply_filters('thematic_postheader_posteditlink',$posteditlink);

    if (is_single() || is_page()) {
        $posttitle = '<h1 class="entry-title">' . get_the_title() . "</h1>n";
    } elseif (is_404()) {
        $posttitle = '<h1 class="entry-title">' . __('Not Found', 'thematic') . "</h1>n";
    } else {
        $posttitle = '<h2 class="entry-title"><a href="';
        $posttitle .= get_permalink();
        $posttitle .= '" title="';
        $posttitle .= __('Permalink to ', 'thematic') . the_title_attribute('echo=0');
        $posttitle .= '" rel="bookmark">';
        $posttitle .= get_the_title();
        $posttitle .= "</a></h2>n";
    }
    $posttitle = apply_filters('thematic_postheader_posttitle',$posttitle);

    $postmeta = '<div class="entry-meta">';
    $postmeta .= '<span class="author vcard">';
    $postmeta .= __('By ', 'thematic') . '<a class="url fn n" href="';
    $postmeta .= get_author_link(false, $authordata->ID, $authordata->user_nicename);
    $postmeta .= '" title="' . __('View all posts by ', 'thematic') . get_the_author() . '">';
    $postmeta .= get_the_author();
    $postmeta .= '</a></span><span class="meta-sep"> | </span>';
    $postmeta .= __('Published: ', 'thematic');
    $postmeta .= '<span class="entry-date"><abbr class="published" title="';
    $postmeta .= get_the_time(thematic_time_title()) . '">';
    $postmeta .= get_the_time(thematic_time_display());
    $postmeta .= '</abbr></span>';
    // Display edit link
    if (current_user_can('edit_posts')) {
        $postmeta .= ' <span class="meta-sep">|</span> ' . $posteditlink;
    }
    $postmeta .= "</div><!-- .entry-meta -->n";
    $postmeta = apply_filters('thematic_postheader_postmeta',$postmeta);

    if ($post->post_type == 'page' || is_404()) {
        $postheader = $posttitle;
    } else {
        $postheader = $posttitle . $postmeta;
    }

    echo apply_filters( 'thematic_postheader', $postheader ); // Filter to override default post header
}

Copy and paste this code into your child theme’s functions.php file, of course it has to go between the php open and close tags (i.e. <?php  code goes here ?>). Next we need to change the name of the function to make it our own. You only need to make a couple of changes to the first and last line like this:

The first line, change from this.

function thematic_postheader() {

to this.

function wpdc_postheader() {

and the last line, change from this.

echo apply_filters( 'thematic_postheader', $postheader ); // Filter to override default post header

to this.

echo apply_filters( 'wpdc_postheader', $postheader ); // Filter to override default post header

Basically I’ve just changed  ‘thematic’ to ‘wpdc’ but you can change it to anything you want, I’ve just used wpdc because it’s the initials to this blog.

Next we need to find these lines.

    $postmeta .= __('Published: ', 'thematic');
    $postmeta .= '<span class="entry-date"><abbr class="published" title="';
    $postmeta .= get_the_time(thematic_time_title()) . '">';
    $postmeta .= get_the_time(thematic_time_display());
    $postmeta .= '</abbr></span>';

Cut them and move them up and past them underneath this line.

   $postmeta = '<div class="entry-meta">';

So after that, this area of code should look like this.

    $postmeta = '<div class="entry-meta">';
    $postmeta .= __('Published: ', 'thematic');
    $postmeta .= '<span class="entry-date"><abbr class="published" title="';
    $postmeta .= get_the_time(thematic_time_title()) . '">';
    $postmeta .= get_the_time(thematic_time_display());
    $postmeta .= '</abbr></span>';
    $postmeta .= '<span class="author vcard">';

We then need to change it to this.

    $postmeta = '<div class="entry-meta">';
    //$postmeta .= __('Published: ', 'thematic');
    $postmeta .= '<span class="entry-date"><abbr class="published" title="';
    $postmeta .= get_the_time(thematic_time_title()) . '">';
    $postmeta .= '<span class="month">' . get_the_time('M') . '</span>';
    $postmeta .= '<span class="day">' . get_the_time('d') . '</span>';
    $postmeta .= '<span class="year">' . get_the_time('Y') . '</span>';
    $postmeta .= '</abbr></span>';
    $postmeta .= '<span class="author vcard">';

What we’ve done there is to comment out the ‘published’ line because we don’t need it for our date badge. Then we’ve removed the ‘get_the_time(thematic_time_display());’ and broken it up into ‘get_the_time(‘M’)’ the month, ‘get_the_time(‘d’)’ the day and ‘get_the_time(‘Y’)’ the year and we’ve wrapped it in some span tags so we can select it with some css.

Finally we need to add the actual filter which replaces the Thematic header with our header, like this.

add_filter('thematic_postheader','wpdc_postheader');

Paste that code into your functions file directly underneath your header function. All we have left to do is save function.php and add the css code to you style.css file.

.entry-date{
 border:1px solid;
 display:block;
 font-family:georgia;
 margin-bottom:10px;
 text-align:center;
 width:60px;
 float:left;
 margin:10px 15px 20px 0;
}
.entry-date span{
 display:block;
}
.entry-date .month{
 font-size:12pt;
 padding-top:3px;
 text-transform:uppercase;
}
.entry-date .year{
 background-color:#666666;
 color:#FFFFFF;
 font-size:12pt;
 line-height:1em;
 margin:10px 0 0;
 padding:3px;
}
.entry-date .day{
 font-size:24pt;
 line-height:.8em;
 font-weight:bold;
}
.post .entry-title{
  float:right;
  width:460px;
}

So That’s it all done. You can download the full code if you want and just copy and paste it into your files. You may have to adjust the css depending on what changes you’ve made to your styles already.

Get sIFR to work

sifr-header

Get's fonts on the web

I tend to only ‘get things’ when they are explained to me in the ‘right way’. Too simple and I get bored, too complex and I switch off and try something else. The main reason I use WordPress is because a I ‘got it’ after 5 minutes. Something about the code, the documentation and the UI just seemed to be on my level and that was something that was missing in other CMS’s  I tried.

Which brings me to sIFR.  sIFR is away of replacing web fonts with practically any font you have on your PC! Sound good, well it is good but for some reason, for a long time I just didn’t get it. May be it was something to do with JavaScript, which is not one of my strong points, or the fact that sIFR changes text to a flash movie, which sound unthinkable to a web standards geek. But probably the biggest hurdle for me was the documentation, it didn’t really explain it in a way that I understood.

So for anyone who’s on a similar wave length to me, here’s my explanation of how to get sIFR to work: –

The reason you would want to use sIFR to replace text is because you can embed fonts into flash movies which aren’t universally supported on the web and the reason it is better than straight forward image replacement is that sIFR replaces text ‘on the fly’.

Take the title of this post for instance, it’s been replaced by sIFR, the font  being use is ‘Bau Super Italic’. You might not have that font on your computer but that doesn’t matter, you still see the correct font and I didn’t have to create the title in Photoshop. I just put a normal title in my WordPress post and sIFR did the rest, silently in the background.

Download the latest version of sIFR and unzip it,  There’s a whole bunch of files in there but there is really only 3  files that you need to get it to work: –

  1. sifr.js
  2. sifr-config.js
  3. sifr.css

You also need the .swf font files but I’ll talk about them later, firstly I just want to mention the 3 file above. sifr.js is the main work horse. You don’t need to look at that file, just attach it to your html document like this: –

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

The next file, sifr-config.js, basically activates your fonts, selects the html element you want to replace and styles the flash text with something that look suspiciously like CSS but isn’t. The files got a bunch of code in it already but it is just for the demo so just change it as you need.

Firstly you will need a variable so you don’t have to type the full path to your font every time you want to use it. It will look something like this: –

var bau_super = { src: 'http://www.yoursite.com/sifr/bau_super.swf' };

In the code above ‘bau_super’ is the name of your variable, it can be anything you want but it’s best to keep it the same as the name of your font file for consistency. The next part of the code is simply the path to your .swf font on the web. Now you can use your variable name instead of the full path

Next you need to activate your font.

sIFR.activate(bau_super);

That was easy. Finally we need to add the replace statement that selects the font you want to use, selects the html element you want to replace and styles the text in the flash file. The code is going to look something like this

sIFR.replace(bau_super, {
  selector: 'h3',
  css: [
        '.sIFR-root { text-align: left; font-weight: normal;}'
        ,'a { text-decoration: none; font-size:16pt;}'
        ,'a:link { color:#a00096; }'
        ,'a:hover { color:#a00096; }'
      ],
  wmode: 'transparent'
});

Basically the code above specifies bau_super (that’s your variable name) as the font you want to use, then after  ‘selector:’  it selects the element that you want to replace. In this case it’s all  h3  element but it could be any CSS selector such as a class or an id. Next, after the ‘css:’  we style the text in the flash file, it’s not really CSS but it looks and works in a very similar way but not all CSS rules are valid. The ‘.sIfr-root’ is the element you selected but If  element in your web page contain a link inside, you’ll need to style that next, this happens in the next 3 lines of the code and again you are going to use the faux CSS rules. The only other thing to mention in the above code is – wmode: ‘transparent’ – , if you’ve used flash before you’ll recognize wmode, basically it puts the flash movie on a transparent background. I believe you can also use background:transparent in the css statements on the sIFR-root, which may be preferable because some browsers don’t support wmode.

finally there is sifr.css this is just a normal CSS file that hides your original text and styles the flash object, not the text inside the flash file. You’ll need to attach it to you html document like this: –

<link media="all" type="text/css" href="sifr/sifr.css" rel="stylesheet">

So that’s JavaScript, CSS and HTML taken care of, now we just need our font. If you have Adobe  Flash installed on your computer you can simply open sifr.fla, which is in the flash folder. Once opened you’ll see a blank movie clip on the stage, double click the movie clip and you’ll see some text appear, simply delete the text and type a single letter in the movie clip, it doesn’t matter what the letter is, the important thing is that you change the text to the font you want to use. If you want to use font variants then you will need to type another character and click the bold or italicize button. Once you have a single character for each of the font variants you want to use, click file and export the movie clip. The resulting .swf file is your font, this is what you need to upload and specify in the variable you created in the sifr-config.js file. If you don’t have flash on your pc you can download a whole bunch of sIFR font , for free at isarie.com

Well that’s an introduction to sIFR. I’ve read a couple of articles this week one about font replacement at sitepoint.com and one at the A List Apart about web fonts both are definatly well worth a read.

Multiple RSS Feeds on your Facebook Profile

rss-headerA quick and easy feed aggregator

Quick Solution
(Chimp feeder has stopped Working) 🙁

Another Solution (Yahoo Pipes still Works well)

Simple and Working Solution (Feed Stitch)

I’ve been using facebook for a relatively short period of time but straight away I liked the the idea of being able to post articles from my blog on my facebook wall, automatically. This can be achieved easily with facebook notes, the only problem is facebook only allows you to link one RSS feed to your notes. At the moment I post articles on ambercouch.co.uk, in the news section and on wordpress-design.co.uk and I want both to appear on my facebook wall. I spent sometime looking for a facebook app that would do this but nothing really fitted the bill so I did a Google search for “Multiple RSS Feeds on your Facebook Profile” and I found some convoluted ways to do this using yahoo pipes, here’s an 8 minute video explaining how to connect multiple RSS using yahoo pipes but it seemed like to much effort for me, for something that should be simple. I haven’t used pipes before and I didn’t want to spend time looking into it. Then I stumbled across Chimpfeedr and ‘CHOMP!’ the problem was solved. Just enter the RSS feeds you want to combine click the ‘chomp chomp!’ button and your done.

Step by step this is what I did:-

What you need: –

  1. More than 1 RSS feed that you want put on your facebook wall eg. a couple of blogs
  2. A facebook account
  3. The facebook notes application ( which i think is installed by default)

What to do:-

  1. Go to www.chimpfeedr.com
  2. Paste the URL of your first RSS feed into the box
  3. Click the “+Add Feed” button
  4. Repeat the first 2 steps for all your feeds
  5. Click the ‘Chomp Chomp!’ button
  6. You should then get a pop up box asking you to  ‘Name Your Mix’, Just type in a name and click the ‘Start mixing button’
  7. You’ll now go to a page that says ‘Your mix can now be accessed at:’ followed by the URL of your feed. Copy the is URL. Keep it safe because there’s no way of retrieving it for Chimpfeedr.
  8. Go to www.facebook.com and logo in
  9. Click on your profile
  10. Underneath the ‘whats on your mind’  box click the settings button
  11. Click Blog/RSS
  12. Paste the URL your chimpfeedr URL in the ‘Public URL’ flield and click the ‘Import’ button

There you go, Multiple RSS feeds on your facebook wall the easy way.