When running a WordPress blog, at some point of time, you may feel the need to apply unique styles to certain section of your blog posts to capture users’ attention. You might even need to display advertisement, or highlight an area of text to draw attention.
You can achieve many different types of visual effects, by adding code in your WordPress posts. Perhaps, you may choose PSD to WordPress conversion service to put custom code in your WordPress posts. No matter, what you want to achieve by writing code, the process can be challenging. The biggest challenge you’ll need to deal with is: to add the code in your post in a manner that it appears just like code, but doesn’t behave like it.
But, keep in mind that when displaying code – that your site visitors can copy and paste – be sure to perform the task in the right manner as even putting a single line break incorrectly can make your code messed up. Remember that the manner in which your code in the WordPress post editor will be interpreted relies on whether you’re making use of the visual/HTML post editor.
Putting your code in the visual editor won’t create any effect as you’ve desired, since the visual editor interprets code just like any normal text; and will convert the code in character entity equivalents. This means that web browsers will consider your code as standard text instead of “code”.
In contrary, the HTML post editor won’t convert the code in any of the character entity equivalents. And so, your text will be executed by the web browser in the form of HTML and CSS markup, which will result in making the post layout cluttered.
To avoid such a situation, here a few tips you should follow when writing code in a WordPress blog post:
1. Make “Non-HTML Text” Look Like “Code” Within Paragraphs
You can make the non-html text within the paragraphs appear as code, by simply adding the <code> tag in posts:
<code>Enter your text here</code>
This line of code will make “Enter your text here” look similar to a code sample. However, things can get screwed up when you’ll use some actual piece of code, such as an HTML tag as follows:
In the header.php template file,
look for the <code><div class=”header”></code>
area where the <code><h2></code> heading needs to be changed.
The <code> tag won’t inform WordPress about encoding the HTML markup placed within the tag. And thus, WordPress will consider that you’re using the markup for formatting and won’t make any changes to it. To resolve this issue, you’ll have to convert the actual code into character entities.
Simply put, convert the symbol like ‘<‘ into < and ‘>’ into > as shown in the code below:
In the header.php template file,
look for the <code><div class=”header”></code>
area where the <code><h2></code> heading needs to be changed.
2. Apply Style to Your Code Tags
The code tag, by default, displays the text in the form of a monospaced font. Additionally, it resizes the text based on the font-size defined within the <body> tag. But, what if you would like to style the text in a different manner or would like to change the font-size of the text? You can accomplish such needs, by adding the following line of code in your style.css file:
code{font-size:1.4em; color:#ccc; font-weight:normal;}
You can change the font-size and style of the text to anything you want (in the above line of code).
3. Make Use of the “Tag”
At times, you might need to showcase your code as a block of code that can be easily copied and pasted into any other code block or within a template file. For this purpose, you’ll need to make use of the <pre> HTML tag. This tag the informs browser to use a monospaced font and to display exactly the same text that is written in the <pre> tag. For instance, every long line of text, every space, etc. will be written in the code block in the same manner as it is written in the <pre> tag.
<pre>
body {
font:12px Sans-Serif;
<p>This is a new
<a title=”post on creating a WordPress site” href=”newpost.php”>
WordPress site</a>
}
</pre>
4. Writing URL’s Within Paragraphs
WordPress converts any phrase that starts with ‘https” into a link by default. For example, if you’ve written a phrase that looks something like http://testblog.com/?page_id=2, then WordPress will convert it into a link. But, you can overcome such problem, by using extended characters instead of the slashes “/”, using the below given line of code:
<code>http://testblog.com/?page_id=2</code>.
5. Problems with Quotes
When adding code within a WP post, one common problem that you might encounter is: when using quotes in the text. Your quotes might not be interpreted by the browser, resulting in funky looking text.
But, you can avoid such problem by making use of the <pre> or <code> tags. Another viable alternative is to substitute the quotes with their character entity equivalents. For example, the code as follows:
<div id=”header”>
will need to be rewritten as:
<div id: "header " >
Conclusion
Making changes to your code within the WordPress posts can be a daunting proposition. However, we have listed a few tips that will help you in writing the code in the posts in a proper and correct way.
Author Bio:
Sophia Phillips is a WordPress developer working at WordPrax Ltd- WordPress Ecommerce development company. And she also loves writing blog providing useful information about WordPress best practices and benefits it provides.