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.

Create a signature graphic or logo using a graphics program or scanner.

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.

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:

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.

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:

&lt;? php the_content(); ?&gt;

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:

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:

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.

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 &#34;, 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 &#34; is actually divided up into the three elements, the ampersand (&amp;), number sign (&#35;), and numbers with the semi-colon at the end (34;). The end result is written as:

&amp;&#35;34;

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.

6 Comments

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.

If you type PHP code into a WordPress post on any type of WordPress blog, it will not be executed as if it were PHP code. I don’t know what the text conversion filters will do to it, but they sure as heck won’t execute it. The only way to get PHP code inside posts to run is with one of several plugins (whose names I don’t know off-hand), whhich WP.com obviously doesn’t have installed.

This might be a newer feature… But if you open the “kitchen sink” when creating your post, copy your code from anywhere and “Paste as Plain Text” it will display as it should. Just did that with one of my own posts.

45 Trackbacks/Pingbacks

[…] lorelle on WordPress one of the most valuable resources available on the web for wordpress has a beautiful, professional signature displayed at the end of her posts. However it is a case of copy and paste everytime post is […]

[…] You can also use the Tagging Bookmarklet for WordPress and WordPress.com Users I developed for my own signature, which also adds tags, copyright, and other information at the bottom of my blog posts. I describe this method more indepth in WordPress.com Blog Bling: Signatures and Writing Code. […]

[…] Previously I used different techniques to write code in my post like putting a space inside the tag so that it isn’t considered a valid tag like < strong > but when people would copy the code, the space will be in there too and it wouldn’t work on their side. It’s when Lorelle gave me a post that I was enlightened into the proper way of writing code. […]

[…] Blog Posts: Blogosquare writes about the proper way to write code in your blog posts and features my tips with the character entity code conversions list to help you turn code into content on your […]

[…] convert the slashes after http: which can turn to hyperlinks in some instances, using the Character Entities list I keep in a text file on my computer. Or I will use one of the online conversion services such as […]

[…] 1)Signatures and Writing Code- Lorelle writes an amazing article on posting code in your WordPress.com blogs, listing the most common character codes (character entities) used in HTML/XHTML, PHP, and other programming languages. Also you need to check her other post “WordPress Plugins That Help You Write Code” sharing some of the WordPress Plugins that help you write code and equations in your blogs. […]

[…] Inclusion of related posts within the post content area is also important. Links within the content that connect back to previous posts you’ve written on the subject help, as do related content links at the bottom of the blog post content, acting like a directory of the information the reader needs to know to catch up and uncover more of the story. There are a variety of WordPress Plugins to add related posts to the bottom of your blog post, however you often have little control over what posts appear, and from where. Related posts are so important to me as a way to help my blog readers, I insert them manually into my blog posts. […]

[…] Type the link text and highlight the words, then click the Links toolbar icon to activate the link options. The internal linking feature allows you to search keywords from within the post title and content to find the post to link with a single click and apply. The link is a perfectly formed HTML anchor tag with the title attribute, a big improvement from the older linking system. There is an option to add an attribute to open the link in a new tab or window. Please refrain from using that as it is deprecated and violates web standards for accessibility and really pisses off power users who want to control how their links open. I love this new feature, one I’ve requested from the beginning as I waste a LOT of time searching for past posts to include in my content and manually created related posts feature. […]

[…] I share how I manually create my related posts at the bottom of my blog posts in Which WordPress Plugins Does Lorelle on WordPress Use?, Adding a Signature To Personalize Your Blog Post, and WordPress.com Blog Bling: Signatures and Writing Code. […]