I blog about the technical side of blogging, about WordPress, WordPress Plugins, WordPress Themes, HTML, CSS, web design – code. I often blog about code. And people ask me code questions. I’ve become an expert in writing code so it looks like code on web pages.
The time may come, or you may have already experienced the moment, when you, too, will have to publish code of some kind in an article or comment. This blog exercise is to teach you about how to do that without breaking your site.
I’ve had people desperate for help with their WordPress Theme or Plugin post code repeatedly in the comments, trying time after time to get it right so I can read it, resorting to desperate measures like telling me that # means < making things even more confusing for both parties. Learn how to do it right and save yourself and others time and energy.
It is the job of WordPress and all publishing platforms to publish what you put into it. Publishing platforms are also collections of code, coded instructions that manage the input and output of content with the database and server to generate each web page.
If I write <?php the_title(); />, WordPress will request and display the post title at that point. Since it has already done that in the post title as set by the WordPress Theme, WordPress is designed to convert that code into something readable not executable to protect you from yourself. The result might be completely filtered out and erased or look like this:
Not what I intended.
I could write it correctly, wrapped with the
<code> HTML tag so it looks like code:
<?php the_title(); />. It can now be copied and read easily.
WordPress and other publishing platforms process your post content through a filter to clean up inadvertent or purposely use of code that is not allowed within the post content area and comments as it could damage the site. This cleaning process makes it difficult to publish readable code.
By typing in the HTML Character Entities for the parts of the code recognized by WordPress as code, or using a WordPress Plugin to publish code such as a syntax highlighter, or if you are on WordPress.com, use the code shortcut to create a block of code such as the example below. If you publish much code in your posts, consider using a Plugin to make the process easier.
I explain how to do this more in depth in “Writing and Publishing Code in Your WordPress Blog Posts” on the Blog Herald, and in an article in the Blog Bling series for adding signatures and writing code on your site.
Your blog exercise today is to learn how to write publishable code on your site.
The time will come when you will need this skill, so experiment and learn the basics now. If you want to blog about WordPress, blogging, code, or anything technical, you will need this. If you wish to develop your own website, you must need to know how to do this in order to properly ask for help on the WordPress and web design forums.
I recommend that you start with a draft post. You do not have to ever publish the post. Experiment by saving drafts and previewing the results. There are many methods to display code in WordPress. Experiment with all of them including manual. Learn how to create the < symbol manually to force WordPress to ignore the code that follows and print it as text.
Use the following example to experiment with if you don’t have another. Hover over the code box and select from among the copy choices in the upper right corner of the box.
<div id="author-info"> <div id="author-avatar"> <?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentyeleven_author_bio_avatar_size', 68 ) ); ?> </div><!-- #author-avatar --> <div id="author-description"> <h2><?php printf( __( 'About %s', 'twentyeleven' ), get_the_author() ); ?></h2> <?php the_author_meta( 'description' ); ?> <div id="author-link"> <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author"> <?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'twentyeleven' ), get_the_author() ); ?> </a> </div><!-- #author-link --> </div><!-- #author-description --> <div id="unique"> <p><a href="http://lorelle.wordpress.com/" title="Lorelle on WordPress" rel="tag">Lorelle on WordPress</a></p> </div>
The first part of this is from the Twenty-Eleven WordPress Theme and incorporates HTML, PHP, and WordPress template tags. The last part, titled “unique,” is a link to this site to help you practice with a properly formed HTML Anchor link, the most common HTML tag.
Next time you post a question for help with coding on a forum or site, you will be ready to do so without messing it up.
If you blog about this, remember to include a hat tip link back to this post to create a trackback, or leave a properly formed link in the comments so participants can check out your blog exercise task.