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.

You’ll create two images, throw a little CSS code in the mix, and end up with a very flexible system that will grow with almost anything you throw at it. You can use the already present colors to help your lists tie in with the design. I’ve used this on a project and the client really liked how it turned out. So continue reading and I’ll guide you step by step on how to add this customization to your toolbelt. Your clients will love you for it.

View the demo.

Step One: Create Two Images

Open up your image editor of choice and create a new file 16px wide by 100px tall, or however tall you think a single list item will be in your situation.

You can get a little creative with it, but I drew a simple 1px line. Setting the background transparent will keep your images future-proof if you ever want to change the background color of the site.

So you will end up with two images, one relatively tall with the horizontal bar at the top and another relatively square with the horizontal part ending where it meets the vertical.

Step Two: Write the CSS Code

Now open up your code editor of choice. I’ve used Dreamweaver forever, but I’m starting to use Notepad++ more often.

Clear All Inherent Styling

The first part of the CSS code is extremely important because Internet Explorer still has the majority of the browser share. It is good practice to have a reset file like this one. If you’re not going to use a reset.css file, you must clear the layout of your list.

ul {margin:0;padding:0;}

Create The Menu Container

This is optional, in case you already have a home for your menu. But all subsequent code assumes that the ’submenu’ class is applied to your list’s parent.

.submenu {
	width: 200px;
	border: 1px solid #555;
	font: normal bold 12px Verdana, Arial, sans-serif;
	padding:10px;
	color: #3877C4;
	}

UL Code

This code will format the unordered list. Add a little top and bottom padding for spacing. The left padding offsets the list from the header text.

.submenu ul {
	padding:10px 0 10px 20px;
	}

LI Code

The first line puts in a little breathing room if/when your text expands into multiple lines. Setting the ‘list-style-type’ to none gets rid of the stock icon. To end up, we apply a little bottom padding for visual goodness.

.submenu li {
	line-height:15px;
	list-style-type:none;
	padding:0 0 8px 0;
	}

Second Tier UL Code

We are now into the second level of the menu. A little top padding pushes this UL down from its LI parent. The left padding indents the UL and can be modified to your taste.

.submenu li ul {
	padding: 5px 0 0 18px;
	}

Second Tier LI Code

Now we’re into the good stuff. Most of your second tier list items will use this piece of code. Make sure you use the correct path to your image file. This is the tall graphic I had you create earlier. Of course we don’t want it to repeat. And the left padding pushes your LI text over so we can see your shiny new image.

.submenu li ul li {
	background-image:url(ul-long.gif);
	background-repeat:no-repeat;
	padding-left:18px;
	}

Second Tier LI Code – Last LI

So up until this point we have only used a single class, the one applied to the container. To be compatible with all browsers we must employ a class to put the endcap on the list. Now we use the smaller graphic of course. We reset the bottom padding to zero because the second tier UL code does this already.

.submenu li ul li.end {
	background-image:url(ul-end.gif);
	padding-bottom:0;
	}

Second Tier LI Code – :last-child

This code is not suggested for deployment. This is only for demonstration purposes.

So as you might know, Internet Explorer likes to employ its own dialect of CSS. One piece of very useful code that is missing in all IE flavors is the :last-child pseudo class. To be fair, :first-child works fine. When not in demonstration mode with three different menus you’ll want to use the code below. To facilitate the demo of :last-child alongside two other menus I have dropped a ‘lastchild’ class on the second tier UL on the demo page, third box.

Open the page in Firefox, Chrome and Safari. You’ll see no difference in the far right menu. Open in IE and you’ll get the standard LI code with the tall graphic on the last LI. Maybe they’ll add it in IE 8.1?

.submenu li ul li:last-child {
	background-image:url(ul-end.gif);
	padding-bottom:0;
	}

View the demo.

Final Thoughts

Try out some of these ideas to spruce up my simple design.

• Arrow on the right side of the images
• Curve the vertical line into the horizontal line
• Use an animated gif to make your list more dynamic
• Use a single sprite instead of two images.

If you’re going to use alpha transparency in your image, you’ll want to save as a PNG-24. Doing this will skew your colors slightly in Internet Explorer. This is because of the gamma correction saved in the image. Every browser except IE disregards the gamma value. I’ll show you how to correct this in an upcoming article.

Let me know how you liked this tutorial. Any comments and suggestions are welcome.

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

After installation, just do the typical ‘inspect element’ action and you’ll see the new ‘Reference’ tab. Click the tab and you’ll see information about the element you chose plus any attributes that are defined for that element. You’ll see information about the element, what browsers support it, and a ‘more’ link to the reference section on SitePoint’s website.

I have always respected SitePoint for being a leader in almost everything related to web development. They have published books on a wide variety of internet technologies and continually push out new content. I’m sure this new plugin will help spread their knowledge to more web developers.