Skip navigation

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.

Lorelle’s custom signature block

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.

Signature on blog post with photograph and biographyYou 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?

Related Posts are created manually in WordPress.com blogsAt 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="http://lorelle.wordpress.com/2006/07/29/what-do-i-do-with-my-new-wordpresscom-blog/&#034; 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="http://lorelle.wordpress.com/...</a></li>
<li><a href="http://lorelle.wordpress.com/2005/11/21/designing-a-rainbow-sexy-hot-colors/&#034; 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.


<div class="storycontent">
<?php the_content(__('(more...)')); ?>
</div>


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>
<div class="meta"><?php _e("Filed under:"); ?> <?php the_category(‘,’) ?> — <?php the_author() ?> @ <?php the_time() ?>
<?php edit_post_link(__(‘Edit This’)); ?></div>


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:


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


See the difference?

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


&lt;div id=&#34;header&#34;&gt;
&lt;h1&gt;&lt;a href=&#34;&lt;?php echo get_settings(&#39;home&#39;); ?&gt;&#34;&gt;
&lt;?php bloginfo(&#39;name&#39;); ?&gt;&lt;/a&gt;&lt;/h1&gt;
&lt;div class=&#34;description&#34;&gt;&lt;?php bloginfo(&#39;description&#39;); ?&gt;&lt;/div&gt;
&lt;/div&gt;


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.

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:

  • &#34; – Quote Mark "
  • &#39; – Apostrophe '
  • &#169; – Copyright symbol ©
  • &#58; – Colon :
  • &#59; – Semi-colon ;
  • &#60; – Less than <
  • &#61; – Equals sign =
  • &#62; – Greater than >
  • &#63; – Question mark ?
  • &#64; – Commercial at @
  • &#35; – Number sign #
  • &#247 – Divide ÷
  • &divide; – Divide ÷
  • &#33; – Exclamation mark !
  • &#35; – Number sign (pound) #
  • &#36; – Dollar sign $
  • &#37; – Percent sign %
  • &#38; – Ampersand &
  • &amp; – Ampersand &
  • &#40; – Left parenthesis (
  • &#41; – Right parenthesis )
  • &#42; – Asterisk *
  • &#43; – Plus sign +
  • &#44; – Comma ,
  • &#45; – Hyphen –
  • &#46; – 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 &#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.

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


Site Search Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
Copyright Lorelle VanFossen, member of the 9Rules Network

Member of the 9Rules Blogging Network

6 Comments

  1. Posted February 4, 2007 at 3:34 pm | Permalink

    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.

  2. Posted February 5, 2007 at 12:20 pm | Permalink

    Thanks Lorelle for sharing the ‘Signature Tip’
    Cheers!
    Alpesh

  3. Posted February 12, 2007 at 6:04 am | Permalink

    Lorelle – Is there any chance you can put the “code bling” bit after a “read more” tag or similar? It screws with the navigation in Internet Explorer.

    Ta!

  4. Posted February 12, 2007 at 6:13 am | Permalink

    I don’t use the “read more” tag, so I don’t know what you are seeing and what the heck are you doing using Internet Explorer, Collin? Shame on you. ;-)

  5. Heather
    Posted August 14, 2011 at 3:09 am | Permalink

    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.

    • Posted August 14, 2011 at 6:09 pm | Permalink

      Pasting word processing documents as plain text works for text, it doesn’t work for publishing code. It’s not a new feature.


44 Trackbacks/Pingbacks

  1. [...] 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 [...]

  2. [...] that WordPress doesn’t handle very well. Most of the codes were originally found on Lorelle’s blog, although I did add a few more to the [...]

  3. [...] 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. [...]

  4. [...] 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. [...]

  5. [...] 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 [...]

  6. [...] 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 [...]

  7. [...] WordPress.com Blog Bling: Signatures and Writing Code [...]

  8. [...] For a longer list of conversions check here. [...]

  9. [...] write a lot of code in my WordPress blogs which often includes a lot of [...]

  10. [...] 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. [...]

  11. [...] 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. [...]

  12. [...] 1)Signatures and Writing Code/签名和书写代码- Lorelle写了这篇非常有用的日志,告诉你如何在Wordpress博客中书写代码, 如何在HTML/XHTML,PHP或是其它编程语言中书写字符实体。你也可能想要看一下其它的文章 “WordPress Plugins That Help You Write Code/帮助你书写代码的Wordpress插件” [...]

  13. [...] WordPress.com Blog Bling: Signatures and Writing Code [...]

  14. [...] WordPress.com Blog Bling: Signatures and Writing Code [...]

  15. [...] I have a longer list of conversion examples in Signatures and Writing Code. [...]

  16. [...] WordPress.com Blog Bling: Signatures and Writing Code [...]

  17. [...] Signatures and Writing Code [...]

  18. [...] 1)Signatures and Writing Code/签名和书写代码- Lorelle写了这篇非常有用的日志,告诉你如何在Wordpress博客中书写代码, 如何在HTML/XHTML,PHP或是其它编程语言中书写字符实体。你也可能想要看一下其它的文章 “WordPress Plugins That Help You Write Code/帮助你书写代码的Wordpress插件” [...]

  19. [...] 1)Signatures and Writing Code/签名和书写代码- Lorelle写了这篇非常有用的日志,告诉你如何在Wordpress博客中书写代码, 如何在HTML/XHTML,PHP或是其它编程语言中书写字符实体。你也可能想要看一下其它的文章 “WordPress Plugins That Help You Write Code/帮助你书写代码的Wordpress插件” [...]

  20. [...] 1)Signatures and Writing Code/签名和书写代码- Lorelle写了这篇非常有用的日志,告诉你如何在Wordpress博客中书写代码, 如何在HTML/XHTML,PHP或是其它编程语言中书写字符实体。你也可能想要看一下其它的文章 “WordPress Plugins That Help You Write Code/帮助你书写代码的Wordpress插件” [...]

  21. [...] WordPress.com Blog Bling: Signatures and Writing Code [...]

  22. [...] 1)Signatures and Writing Code/签名和书写代码- Lorelle写了这篇非常有用的日志,告诉你如何在WordPress博客中书写代码, [...]

  23. [...] maybe not. We talk about bling for our blogs, so maybe people are looking for ways to add bling to their writing [...]

  24. [...] 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. [...]

  25. [...] 1)Signatures and Writing Code/签名和书写代码- Lorelle写了这篇非常有用的日志,告诉你如何在Wordpress博客中书写代码, 如何在HTML/XHTML,PHP或是其它编程语言中书写字符实体。你也可能想要看一下其它的文章 “WordPress Plugins That Help You Write Code/帮助你书写代码的Wordpress插件” [...]

  26. [...] Plain text and plain text quote marks are required. Plugin authors often don’t know how to convert quotes to &#34; or apostrophes into &#39; in order for them to become the [...]

  27. [...] Publishing Code: How to publish code in blog posts. [...]

  28. [...] Publishing Code: How to publish code in blog posts. [...]

  29. [...] WordPress.com Blog Bling: Signatures and Writing Code [...]

  30. […] 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. […]

  31. […] WordPress.com Blog Bling: Signatures and Writing Code […]

  32. […] WordPress.com Blog Bling: Signatures and Writing Code […]

  33. […] WordPress.com Blog Bling: Signatures and Writing Code […]

  34. […] text editor and to read Writing Code in Your Posts in the WordPress Codex for full version blogs or Signatures and Writing Code and Math for the Masses for WordPress.com […]

  35. […] You can include the latest weather report from your area, time zone information, cartoons, even signatures, and anything you want in your post meta data […]

  36. […] WordPress.com Blog Bling: Signatures and Writing Code […]

  37. […] WordPress.com Blog Bling: Signatures and Writing Code […]

  38. […] WordPress.com Blog Bling: Signatures and Writing Code […]

  39. […] WordPress.com Blog Bling: Signatures and Writing Code […]

  40. […] I’ve spent the last week covering how to blog bling your WordPress.com blog in the form of graphics and photographs, lines and smilies, fonts, blockquotes, social bookmark links, blogroll bling and sidebar widgets, podcasts, audio, and video, signatures, signoffs, and writing code. […]

  41. […] signature and list of related posts are all created manually. No […]

  42. […] 1)Signatures and Writing Code/签名和书写代码- Lorelle写了这篇非常有用的日志,告诉你如何在Wordpress博客中书写代码, 如何在HTML/XHTML,PHP或是其它编程语言中书写字符实体。你也可能想要看一下其它的文章 “WordPress Plugins That Help You Write Code/帮助你书写代码的Wordpress插件” […]

  43. […] 1)Signatures and Writing Code/签名和书写代码- Lorelle写了这篇非常有用的日志,告诉你如何在Wordpress博客中书写代码, 如何在HTML/XHTML,PHP或是其它编程语言中书写字符实体。你也可能想要看一下其它的文章 “WordPress Plugins That Help You Write Code/帮助你书写代码的Wordpress插件” […]

  44. […] via WordPress.com Blog Bling: Signatures and Writing Code « Lorelle on WordPress. […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 21,004 other followers

%d bloggers like this: