Skip navigation

Blog Exercises: How to Publish Code

Blog Exercises on Lorelle on WordPress.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:

the_title(); />

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.

Blog Exercise Task from Lorelle on WordPress.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">&rarr;</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.

You can find more Blog Exercises on . This is a year-long challenge to help you flex your blogging muscles.


Feed on Lorelle on WordPress Subscribe Feedburner iconVia Feedburner Subscribe by Email

Copyright Lorelle VanFossen.

4 Comments

  1. Posted February 25, 2013 at 2:17 pm | Permalink

    Your concern for my reblogging can be explained. As a newbie, I don’t always know where to put articles of interest to me. I have not set up a front page yet, and few people find my jumbled blogs after the second month of having a domain. I have no mentors locally, so I follow people like you, Lorelle, seeking guidance. I currently am awash in Google+ Places, Maps, Picasa and a boatload of new graphics programs from Frostwire. My Paintshop Pro is 2005 and archaic, compared to online CollageMaker or Corel.
    You have honored my struggles with your comment to me. Only one other in Thailand has shown specific interest in my hundreds of hours of self-teaching and blog testing.
    I am photographing all public and business buildings in Cheyenne, using a 25′ extention pole. Good exercise on the bike or foot for me. Google has verified my home, so I can be a verifier of other’s locations. Did I tell you I can place 10 photos with my site info and 10 videos on any Google Map site ? So can you. This is a poor man’s business investment, as I have lots of winter time at the keyboard.
    At 63, this is my final career along with home repairs.
    Thanks again, Lorelle

    • Posted February 26, 2013 at 2:57 pm | Permalink

      Thank you for the kind words. I do my best to set an example.

      It sounds like you are living your passion which is fabulous. There are some fantastic coffee table books honoring town landmarks, mostly unique and interesting buildings and statutes, from recent history. Who knows, one or more of your pictures could someday show up in such a book, or be a part of a book honoring the architecture of the area.

      I assume you are getting owner permission of the business buildings on private property. That is required if you are to do more with the photographs than keep them in your files. If you publish them and attempt to make any money or take benefit for the images, you must have written permission from private property owners. Gads, I hate all this legalese, but it is the law, not an opinion.

      I’m using a graphics program that is about as old and this is my business, and most of the tools I use for my business are open source and free, so it doesn’t matter. If it works for you, fine. Just take care that your operating system is up to date as there are viruses and worms around the web looking for out of date software and operating systems and exploiting their security leaks. It is for this reason that I update everything immediately as a habit, though I still have some old stuff hanging around on fairly secure servers.

      To the point, in keeping with these blog exercises, here is some advice.

      If you find an article that is irrelevant to your site’s content but worth of note, use Delicious, Evernote, or another online bookmarking tool to keep “notes” so to speak. If you wish to publish them later, they often feature easy-to-use tools to help you do so.

      If the purpose of your site is home repairs, photographs of buildings and such off-topic content can confuse those seeking your services. Serve your clients first, hobbies separately, unless you can come up with some novel way of connecting them. It’s been done, but it is seriously hard work.

      Make all your published articles relevant and your voice. You have a news report on the local Walmart that is copied out of a newspaper. That is plagiarism and copyright infringement and can get you into trouble if caught, so write an article about your feelings and thoughts on the store coming into the area and let people get to know you. Point to the newspaper article as a reference for facts.

      WordPress.com is free. You can add a new blog easily, putting all your business images on there in a photoblog style WordPress Theme. Have fun with it, but unless you can directly tie it into the home repair work, keep it separate.

      Remember, people will hire you because of you. Let them get to know you, and don’t try to combine hobby with business unless the hobby is your business. Be professional, but most of all be you!

  2. Posted March 2, 2013 at 7:48 pm | Permalink

    /*
    An Excellent if not great post! Learning code is not an easy task, however, once you’ve gotten the hang of it, it’s a cinch – i.e., ‘C+Plus, C++, Visual Basic, Fortran, COBOL, etc…

    Keep em coming Lorelle of ‘WORDPRESS!’

    Peace and Love,

    Greg.
    */

    • Posted March 3, 2013 at 2:00 pm | Permalink

      Learning code is not easy, but writing and publishing code on websites is even harder, LOL! Thanks.


One Trackback/Pingback

  1. […] Blog Exercises: How to Publish Code […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,972 other followers

%d bloggers like this: