WordPress.com Blog Bling: Signatures and Writing Code

Wow! If you wanted some WordPress.com blog bling bling, we’ve covered a lot, haven’t we? I’ve shown you how to add graphics and photographs and video, lines and smilies, fonts, blockquotes, social bookmark links, blogroll bling and sidebar widgets, and…have I forgotten anything?

Ah, yes. How to display code bling in your WordPress.com blogs, and most importantly, “how the heck does she do that fancy signature and tag thing at the bottom of every post!”

Let’s start with the signature and tag bling.

Adding a Signature and Tags to Your WordPress.com Blogs

Many people love the signature I add to each of my posts. You can add a similar signature, graphic, logo, or any image you would like to your posts at the bottom.

I explain in great detail how I do this using a browser bookmarklet script in “A Technorati Tag Bookmarklet for WordPress and WordPress.com Users“. Basically, I use the bookmarklet to create a list of site search tags for each article, along with a format that includes my signature and the 9Rules logo. When I’m done writing each post, before publishing, I type in the keyword tags into the bookmarklet and copy and paste it to the bottom of my post.

Here is a summary of how it works.

1. Create a signature graphic or logo using a graphics program or scanner.
2. Upload it to your WordPress.com blog and save the file location address.
3. When you are finished writing a post, copy and paste the graphic link and/or tags, or use the bookmarklet you customized with your new graphic, into the last line of your post.
4. Click Save and Continue Editing or Publish and it’s there.

You can feature a signature, custom logo, favorite photograph, picture of yourself, or whatever you want to customize and create a unique sign-off on your blog posts. It can also include a biography, credits, copyright statement, comment policy, or any information you would like to feature at the bottom of your blog posts.

Just remember, if your WordPress blog uses full posts on the front page or other multi-post page views of your blog, the signature will be repeated on every post on the screen. I recommend you keep the signature block small and comfortable on the eye.

You can use the Tag Bookmarklet to just add tags to your WordPress.com blogs without having a graphic image or signature, too. Keep it simple or use your creativity to make your WordPress.com blog be your own.

What Do You Use to Create the Related Articles List?

At the bottom of many articles I write, I feature a list of related articles. While there are WordPress Plugins which do this for you automatically on full version WordPress blogs, no such luck with WordPress.com. This is done manually.

I keep a record of the links for all the articles on my blog in a text editor file. When a new one comes out, I copy the link and paste it into a link list under the appropriate category of links in the text file, such as articles about comment spam under the “Comment and Comment Spam” section. By grouping like articles together, it makes it easier to create my Related Articles list.

I also use the search form on my blog to search for keywords related to the article I’m about to publish. Sometimes I’ll miss an article or two that applies to this new article. I add them to my Related Articles list.

I use the <h4> heading to start the list, and then add a bulleted list of the related posts below it. It basically looks like:

---

<h4>Related Articles</h4>
<ul>
<li><a href="https://lorelle.wordpress.com/2006/07/29/what-do-i-do-with-my-new-wordpresscom-blog/" title="What Do I Do With My New WordPress.com Blog">What Do I Do With My New WordPress.com Blog</a></li>
<li><a href="https://lorelle.wordpress.com/...</a></li>
<li><a href="https://lorelle.wordpress.com/2005/11/21/designing-a-rainbow-sexy-hot-colors/" title="Designing a Rainbow - Sexy Hot Colors">Designing a Rainbow - Sexy Hot Colors</a></li>
</ul>

---

It’s hard work, and can be time consuming, but bringing you the most helpful information on this site is important to me. If this post doesn’t have the answer, maybe one of the related articles might.

No tricks. No WordPress Plugins. Just manual labor and coding.

Posting Code Bling

While not considered blog bling, posting code in your WordPress.com blogs is a typical visual effect many bloggers want to add to their blogs. Posting code in WordPress.com can be a bit complex as WordPress wants to strip or convert your code, making it a mess.

There are two HTML tags you can use on WordPress.com blogs to showcase programming code or languages so they look more “typewriterly”, as a friend describes it. They are <code> and <pre>.

Both tags make the text look like it was written with an old fashioned typewriter in a font typically known as “Courier”. However, each HTML tag handles the text inside of it a little differently.

The <code> works within paragraphs to change the look of the text in a sentence for emphasis. It also can work in its own paragraph and allows the lines of code to wrap when necessary on spaces.

The <code> HTML tag looks like this:

---

Using the <code> HTML tag, what I type will wrap around to a second line depending upon the width of the column. With the <pre> HTML tag, the text will not wrap unless I hit the return key and force a new line.

---

The <pre> HTML tag doesn’t work within paragraphs. It forces the text within the tags into their own paragraph. The formating is “forced” and will be formatted exactly as posted.

This is what the same code looks like using the <pre> HTML tag:

Using the <code> HTML tag, what I type will wrap around to a second line depending upon the width of the column. With the <pre> HTML tag, the text will not wrap unless I hit the return key and force a new line.

Notice a difference in the look of the two HTML tags? Some WordPress Themes have a design style for each different tag. On my blog, the PRE tag features a colored background. When using the CODE HTML tag for more than a line or two of code, I put a horizontal line before and after the programming code to separate it from the rest of the content.

Check your own WordPress Theme to see what these will look like.

Colorizing Code

Many people want to color code or sections of code to highlight a specific instruction or bit of code. Using a little font bling, you can add color or emphasis to your code in WordPress blogs.

---

the_content(__('(more...)')); ?>

---

The above code highlights the the_content() WordPress template tag in red. The code is surrounded with a font HTML tag:

<?php <font color="red">the_content(__('(more...)'));</font> ?>

You can use different colors to emphasize different bits of code or to make code sections stand out.

---

<h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>

— @

---

Converting Code to Publishable Code on WordPress Blogs

While the two HTML tags make the code resemble typewriter text, WordPress.com changes code symbols and characters.

By default and for security reasons, WordPress.com blogs convert codes into characters, otherwise the code would perform as code. You want it to display as code, not act as code.

WordPress.com changes codes such as <, >, &, ", and ' into characters. For example, if you type:

<? php the_content(); ?>

It will be completely erased from your blog when you save the post. Or it will try to turn the codes into character entity codes, which can really mess some things up. Not much help, is it?

To make this WordPress template tag code appear, the code must be converted into character entities:

<? php the_content(); ?>

Another problem WordPress.com blogs have when reproducing lines of code is the “pretty” quote and apostrophe marks. When people copy the code with pretty quote marks, the code will not work when pasted into a WordPress Theme template file or programming file. Quote and apostrophe marks must be converted into a text format in order to be “read” by the programs.

For example, the following code is written with no regard to the quote marks:

---

">

</div>

---

Notice how some of the quote marks and apostrophes slant? If you copy and paste that code into a WordPress template file or any other programming script, it will break it. The quote marks and apostrophes must be turned into “text”, non-graphic marks.

If I replace all the quote marks and apostrophes with their character code, then the code looks like this:

---

">

</div>

---

See the difference?

Under the hood, the properly encoded code looks like this:

---

<div id="header">
<h1><a href="<?php echo get_settings('home'); ?>">
<?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>

---

It looks like a mess to us, but your browser and WordPress.com recognizes all this gibberish and converts it to something the reader can read as well as copy and paste into their own template files or code scripts.

There are several utility programs that will help you change code into something that WordPress.com blogs can display properly, though not all will convert quote marks and apostrophes.

• WordPress Encode HTML Entities
• HTML Code Converter
• Tamba2’s Simple Code Converter
• HTMLizer Data
• FoxInternet – Keyboard HTML Character Entities Converter
• Forret HTML Character Entities Converter

Using a text editor, you can manually search and replace character codes into something browsers will reproduce accurately.

Here is a list of the most common character codes (character entities) used in HTML/XHTML, PHP, and other programming languages:

• " – Quote Mark "
• ' – Apostrophe '
• © – Copyright symbol ©
• : – Colon :
• &#59; – Semi-colon ;
• < – Less than <
• = – Equals sign =
• > – Greater than >
• ? – Question mark ?
• @ – Commercial at @
• # – Number sign #
• &#247 – Divide ÷
• ÷ – Divide ÷
• ! – Exclamation mark !
• # – Number sign (pound) #
• $ – Dollar sign $
• % – Percent sign %
• & – Ampersand &
• & – Ampersand &
• ( – Left parenthesis (
• ) – Right parenthesis )
• * – Asterisk *
• + – Plus sign +
• , – Comma ,
• - – Hyphen –
• . – Period (fullstop) .

Displaying Character Entities to Display Character Entities in Code

Let’s take this another step forward.

In the above example, I wanted to show you the character codes that display the symbols. Because WordPress.com and your browser converts these character codes into symbols, how do I display the code that makes the code?

A character code is made up of ascii symbols such as an ampersand, number sign, numbers, and a semi-colon. To reproduce these on a WordPress post, you must convert the symbols into character codes.

To reproduce the quote mark as ", you need to turn the ampersand (&) and number sign (#) into character codes. So the character code for a quote mark inside your post which turns into " is actually divided up into the three elements, the ampersand (&), number sign (#), and numbers with the semi-colon at the end (34;). The end result is written as:

"

It’s not easy, but if you are trying to convey code on your WordPress blog, it takes some work to get past the text conversion filters.

For more information on writing code on your WordPress or WordPress.com blog, see Writing Code in Your Posts in the WordPress Codex.

Want More Blog Bling?

These are just a few of the many blog bling things you can do to your WordPress.com blogs. Now, I’d like to hear what blog bling things you’ve come up with to decorate your WordPress.com blog.

Related Articles

• What Do I Do With My New WordPress.com Blog
• Designing a Rainbow – Sexy Hot Colors
• Buttons, Bows, and Badges for Your Blog
• Free Photos for Your Blog
• Adding Images to Your WordPress.com Blog
• More Website Design Mistakes
• HTML, CSS, PHP, and More Cheat Sheets
• WordPress Design Details
• Free Text Only Editors for Templates, PHP, HTML, CSS, and More
• Tags and Tagging in WordPress and Everywhere
• A Tagging Bookmarklet for WordPress and wordpress.com Users
• Attention WordPress Theme Designers: Designing Themes for WordPressMU
• Designing Themes for WordPressMU – Fill In All The Details
• WordPress Theme Designers: Slapping You Upside the Head
• The Battle Between Image Width and Column Width
• Creating Effective, Attention-Getting Headlines and Titles
• One Year Anniversary Review: Web Design
• One Year Anniversary Review: Designing WordPress Themes for the Public
• One Year Anniversary Review: Designing WordPress Themes
• Free Photos for Your Blog

---

Site Search Tags: signature, post signature, tags, adding tags to posts, tagging bookmarklet, blog signature, blog sign-off, blog bio, tagging, wordpress tags, site tags, site search tags, writing code, publishing code, writing code in blogs, writing code in posts, blog bling, wordpressdotcom, wordpress.com, wordpress.com tips, wordpresscom, decorate your blog, blog design, blog design elements, wordpress blogs, wordpress themes, wordpress theme design, post design, post design elements, writing posts, blog writing, writing tips, post graphics, free photos, graphics, images, blog graphics, blog images, blog design, design elements, writing blogs, pretty blogs
Copyright Lorelle VanFossen, member of the 9Rules Network

This entry was written by Lorelle VanFossen and posted on February 4, 2007 at 2:38 am and filed under WordPress, WordPress Tips, WordPressDotCom with tags blog bling, how to use wordpress, wordpress, wordpress help, WordPress Tips, wordpress tutorials, wordpress.com, WordPressDotCom. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

« WordPress.com Blog Bling: Blogroll and Sidebar Bling

WordPress Plugins Battling Evil »

6 Comments

45 Trackbacks/Pingbacks