I suggest you pick up this book if you’re new to WordPress or if you’ve been using it for a while. Chris is great at explaining how web-related concepts work at CSS Tricks. He joins Jeff Star in this project, and the professionalism in the product is stunning.

Features

Listed on the book’s site are the following features:

• How to get things set up right
• Building themes and how they work
• Keeping sites secure and optimized
• Using WordPress as a CMS
• Integrate things like Twitter and Delicious
• Making the most out of WordPress

Peek Inside!

From CSS Tricks, Chris offers a peek inside the book. I really like how much color and engaging images they’ve included. This is a welcome change from all the black-and-white instructional books I know you’re used to.

Buy the Book

You can buy the PDF now and get the print version at a discount later. You will also have access to updated versions via a download link in your email when they’re released. Free upgrades for life are always awesome.

So go on over and pick up Digging into WordPress now!

WP-Table Reloaded will let you import a table from a CSV, HTML or XML file. You can enter the cell data directly into the admin page. You can swap column or row order with minimal effort. You can hide or show columns or rows.

Extra Features

But then there are extra features that really make this plugin shine.

• Alternating row colors: Every second row will have an alternating background color.
• Use Table Headline: The first row of your table will use the <th> tag.
• Print Table Name: The Table Name will be written above the table in a <h2> tag.
• Print Table Description: The Table Description will be written under the table.
• Use Tablesorter: You may sort a table using the Tablesorter-jQuery-Plugin.

I’m currently using this plugin on a website for a sprinkler company in Houston, Texas. Everything you see on the page is pretty much stock settings. There is one table for the service fees, since I didn’t want zebra stripes on a 2-row table. Then another table for the rest of the services.

I just wanted to give a quick nod to this well-rounded and very functional WordPress plugin for implementing HTML tables. Thanks go to the author of this plugin. (Apparently this is his first WP plugin!)

Related Blogs

• Virgin America selects HTML over Flash, re-ignites the Flash vs …
• Bleach, HTML sanitizer and auto-linker | Coffee on the Keyboard
• Google Goes More Local, Social With Results Page | Small Business …
• Create an FAQ Page For Colleagues and Clients – WebWorkerDaily
• NBC Mobile Olympics Takes Gold With 87M Page Views : Mobile …
• Set Up Your Off-Page SEO With a Bang | SEO Consult – Certified …
• Why an Effective Landing Page is Needed to Complete Your Internet …
• Former 'X-Men: First Class' Writer Josh Schwartz Explains His Exit
• Answers and Questions » Blog Archive » Firefox, Safe From Plugin …
• Vim Plugins You Should Know About, Part VII: ragtag.vim (formerly …
• 7 Must Have WordPress Plugins For Every Blog | Graphic and Web …
• John Hawkins: Building a WordPress Plugin « WordPress.tv
• Mad Mimi Plugin for WordPress | Denver SEO Blog
• WordPress SEO Simplified With Scribe Plugin
• thomas.apestaart.org » N900 Facebook plugin problems
• Plugin Picks 2: Google Analyticator | WordCast – BBlogging news …
• Custom PHP Lifestream Script Built Atop WordPress Plugin …
• Battlefield.Bad.Company.2-RELOADED
• Gadget Reviews: longhorn reloaded logon for vista | Gadget Reviews -
• Alone In The Dark RELOADED

The goal is to get rid of the generic-looking display of each article’s date. The visitor to most sites would want to know when the article is written to see how relevant the ideas, data or techniques are. A bold display of the date lets the user quickly scan and find the publish date.

Step One: The Image

For quickness, you can download the png file I’m using here, download the full source file at Graphic River, or build your own. Just make note of the dimensions since we’ll be using it as a background image.

You can use most anything as a date icon. Common metaphors include a calendar like I’m using or the piece of paper that Web Designer Wall uses.

Step Two: The WordPress Code

We have to create a few new elements to house the date code. This will take the place of the stock date implementation so we can put or own spin on the look and feel. The following is how I’ve done it here at Mesmer Lab. I’ve modified the code in the Main Index Template (index.php).

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

<div class="post">

<p class="date">
     <?php the_time('M'); ?>
     <span><?php the_time('d'); ?></span>
</p>

{your post code goes here}

</div>

<?php endwhile ?>

I’ve created a DIV with the ‘post’ class inside the loop. There’s a tiny bit of CSS applied to this div and I’ll explain it in a few minutes.

I’ve used a paragraph element for the main container. The paragraph seemed to work better than a typical DIV, in regards to ease of modification and cross-browser compatibility. This is where I put the month for the article.

The span element works perfectly inside the paragraph tag, simply because I added the ‘display:block’ designation. It seemed to play along better instead of a DIV. The numerical date (with leading zero) resides here.

Step Three: The WordPress CSS

.post {
position:relative;
}

The wrapping DIV is set to position relatively. This allows absolute positioning inside for the paragraph element. If you don’t do this, all the dates on the home page will be on top of each other. Don’t just copy and paste this code into your theme files. If you’re not using my specific image, your results will not look right.

.date {
background:transparent url('your-image.png');
position:absolute;
left:-80px;
top:8px;
color:#fff;
width:56px;
height:61px;
padding:14px 0 0 18px;
font:bold 12px Arial;
}

Next you’ll need to link the image to the paragraph and position it absolutely inside the div.post element. The padding and width/height are tied together in the box model. You’ll have to adjust the width and height depending on how much padding you need for the text to show up properly. Typical font styling is present.

.date span {
display:block;
width:100%;
text-align:center;
margin-left:-7px;
margin-top:1px;
line-height:26px;
color:#000;
font: italic bold 24px Georgia,"Times New Roman",Times,serif;
}

To push the numerical date on a second line, I’ve employed ‘display:block’. Span by nature displays its contents inline. The margin code is for simple positioning. The line-height is so IE will display the whole number. And we round it out with typical font styling.

Step Four: Adding to Single Posts

The next step is relatively easy. Open the Single Post (single.php) file and repeat the code you used in Step Two. This goes in the same place, so it should be easy for you to find.

Conclusion

Customization will make your WordPress site unique. You can add a sense of branding by efficient use of colors, icons or other visual elements. By adding a custom date graphic to your WordPress site, you are on your way to standing out in the crowd.

I hope you enjoyed this tutorial. Comments, suggestions and how you’ve implemented this on your site are welcome.

The plugin was updated yesterday with many more admin features along with options for Digg This, Plunk This and Ping This links. You can see all four at the bottom of this article.

A very welcome addition is customization of how the text is sent to Twitter. The default is ‘[URL] [TITLE]‘ but I followed John Chow’s lead and modified mine to ‘Reading @mesmerlab [TITLE] [URL]‘. I had to modify the plugin code itself when I first installed it.

Thanks go out to Richard X. Thripp for this great upgrade!

Fast-forward about 10 years. There have been great strides in font technology on the web. The first well-known solution was sIFR, a Flash-based solution that converted your text into a .swf file which is viewable by most modern browsers. Adding a custom font became a little easier. However, the coding required made these sites a little sluggish and needed javascript and Flash to be enabled.

Of course most of the good stuff on the web these days requires javascript, but that still meant sIFR needed Flash. An alternative that uses pure code and no proprietary filetypes came along, called FLIR. Now this solution lets your site break free of the Flash requirement. It does however require PHP to be installed on your web host. This isn’t a huge obstacle since most commercial host companies offer PHP scripting.

Now to the good stuff concerning WordPress users. The guys over at HostScope.com have developed a plugin that achieves FLIR goodness in an easy admin interface. I use this plugin to carry over the custom font in my logo to the sidebar headings on the right.

Step 1: Installation

Download, install and activate TTFTitles.

Step 2: Uploading Fonts

Navigate to the Appearance section of your WordPress admin. You’ll find the TTF Titles section under this heading. Go to the Fonts link and upload your custom font.

Step 3: Creating Styles

Navigate to the Styles section of the TTF Titles admin. You can adjust how your custom font will be viewed from here. I have a specific style for my sidebar and one for the ‘Leave a Comment’ element that is in the content section. I believe the plugin uses PNG-8 because you must designate a background color. The green background of the sidebar style did not look appealing on the white of the content section. I’d love for the author to update the plugin to use PNG-24, allowing for a style to be used anywhere.

Step 4: The Code

Applying the styles to your site is relatively easy, even for those who don’t know PHP. For instance, in the second sidebar on the right, the title code used to be…

<h3>Recent Articles</h3>

To render the title with my font I simply wrap the text with a little PHP like this…

<h3><?php the_ttftext("Recent Articles"); ?></h3>

Use the following code when adding the functionality to a WordPress variable.

<?php get_bloginfo('name'); ?>
... turns into ...
 <?php the_ttftext(get_bloginfo('name')); ?>

The previous implementations assume you’re using the style set as default. To use a different style like I have for my comment section you would code as follows.

<?php the_ttftext("Leave a Comment", true, "Opus on white", ""); ?>

This pulls in the name of your custom style in the third parameter. The last parameter is for alterations to the style, similar to inline styles in CSS. I can designate a different color, font size, or any other available attributes.

So now you can have more control over the user experience by adding custom fonts. Let me know how you’ve implemented this on your site.

Related Blogs

Trouble Ahead

One small problem came up when I was clicking on the submenu items. It seemed Firebug showed an error once I clicked, yet it went away when the page moved on. Ok, so this is a very tiny flaw that would only be visible to a quick eye and only bother perfectionists like me. So I dove right in. A quick punch of the stop button snared the error for further investigation. Off to Google with…

'^=': function(nv, v) { return nv.startsWith(v); },

A Lighthouse in the Distance

Most of the hits were versions of the Prototype script itself. But a post on the Ruby On Rails development site had exactly what I was looking for. Prototype Element.match returns TypeError nv: null when selecting for an attribute that is not present. It seems that they had found and fixed the bug back in March of 2008.

Moving into Port

So I go back to the prototype.js that is installed here and find the outdated 1.6.0 version. I got the latest 1.6.0.3 version from the source and updated the file on my server. Now the fleeting error notice is gone and everything works perfectly.

Safely Ashore

To ensure the safety and sanity of other hunters of minuscule bugs, I posted a request to update Prototype on the DreamHost suggestion tracker. Waves of euphoria are rushing right now; similar to when I make a spelling correction on Wikipedia.