There are many reasons why you would want to write or include additional code in your WordPress posts. You might need to show advertisement, apply unique styling to certain sections of your website, or simply mark out some text or content to draw attention. Still, you might add code to achieve various visual effects to offer better user experience.
All these and others are valid reasons, but no matter what you are looking to achieve with custom code, the process of writing code can be nerve wracking or outright challenging! In this tutorial, we will cover the following areas:
- Adding code that looks like code but doesn’t behave like code (incase you are looking to showcase lines of code or improve the appearance of your website)
- Adding code that is intended to behave like code e.g. Scripted ads such as Google Adsense Ads
Under these two categories, we will delve a little into programming code such as HTML, CSS, Javascript and touch on adverts and the beauty of the <div> container. Now, without further fanfare, let us get down to business and write some code.
Adding Code That Looks Like Code But Does Not Behave Like Code
If you would like to showcase code (perhaps you are a web designer or developer) that your users can copy and paste, it’s important to do it right because even a single line break can mess up the code, hence all of your work. The way your code will be interpreted by WordPress depends on whether you use the HTML or Visual Post editor. Entering your code directly into the visual editor will not have the effect you wish to create, as the visual editor considers the code to be normal text, meaning web browsers will not interpret your code as “code”, but as ordinary text.
On the other hand, the HTML Post Editor will recognize any HTML or CSS markup you use, meaning they will be interpreted by the web browser, a thing that might result in messed up layouts and funky looking content. For instance, <div> in the visual editor will be interpreted as ordinary text and the result will be just <div>. However, <div> in the HTML editor will be interpreted as HTML markup and the result will be the creation of a container.
A HTML Exercise
It’s an exercise in futility really, but you can try it for a clearer picture of what I mean. Just open your HTML editor, type <div> and save it as a draft. Once your draft is saved, click “Preview Post” to see your mangled website. Don’t worry, it’s not permanent and you can just trash the draft. Now back to business.
Generally, you can use code in two ways. Firstly, you can use code within a line (or paragraph) to clarify a point about your code. Secondly, you can write, highlight and put your code in a block like this:
<html>
<head>
<title>Writing Code in WordPress Posts Tutorial</title>
<link rel="stylesheet" type="text/css" href="somefile.css"/>
</head>
<body>...</body>
</html>
To achieve the above effect, we use the code tag written like <code> …our code goes in here </code>. Substitute arrows (< >) with square brackets ( [ ] ) depending on your WordPress site and the post editor you are using (visual or HTML). The code which you wish to display must go between the opening tag, <code> and the closing tag, </code>. For example, to use code within a paragraph:
The code tag makes non-HTML text look like code, but it does not tell the web browser to interpret HTML markup or strip it from the post. This means that a browser can still encode your HTML markup making it difficult to showcase HTML tags in your code. However, you can overcome this problem by using extended characters or character entities to represent the < > characters, which will fool every browser. For example…
…will create a new container (thanks to <div>) and a heading ( <h1>), which will mess up your web page. But if you use character entities to replace the < > arrows, you will avoid this behavior and output your code as desired. The above code will, therefore, look like this:
Create a Highlighted Block of Code
If I would like to highlight a block of code (or even text) to get something like;
I start by putting the code (or text) in a container like so:
Then I add style using CSS either directly (as in the image above) or through the style.css file found in your theme’s main folder.
Style Your Code Tags
The code tag will use the font-size from the <body> and put the text in a monospaced font by default. You can change all that though to have your code looking just the way you want. All you have to is add…
code{font-size:1.2em; color:#000; font-weight:normal;}
…or something similar to your style.css. There are unlimited styles and everything depends on your personal preferences, so don’t hold back – style away.
Adding Code That Behaves Like Code
This section is especially useful if you would like to display adverts or other scripts e.g. Javascript snippets within your posts. While there are plugins, such as Quick Adsense, that will help you manage adverts in your posts, you might be interested in installing standalone scripts that you have complete control over.
If your advert is a simple image and a link, you can add the ad into your post through the uploading utility. Just upload the image and enter your link (and perhaps a caption) and your work is done. This method is limited though as you can only align your advert to the left, to the right, or in the center – just like a typical image. Alternatively, you can create a container within your post using the HTML editor.
Example:
<div id="ad1">
<a href="ad_link"><img src="image_location" height="yy" width="xx" alt="Ad_title"/>
</a>
</div>
Create this container exactly where you want your advert, meaning you need to have the post ready before you add the ad. Once the container is ready, you can style it however you want. You can move it around using your style.css by using the position property. If you wish to run a Google Adsense ad within your posts, you can still use Quick Adsense – the plugin – or create a container and place your ad code like this:
<div id="ad1">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-1289628145978703";
/* vistamediainc1 */
google_ad_slot = "7102844977";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
Note 1: Google adverts are Javascript based, and can be interpreted by all major web browsers provided the user has enabled Javascript on their machines.
Note 2: You have to choose the right Ad dimensions for your website to avoid messing up your posts as well as website.
If you would like to add a permanent ad that will appear across all your posts (current and future posts) without any extra work, you will need to edit the Single Post template (single.php). I placed a 468px by 60px advert at the top of all my posts by adding the following code to the single.php immediately after < – – END post-entry-meta – ->.
<div id="ad1"> <script type="text/javascript"><!--
google_ad_client = "ca-pub-1289628145978703";
/* vistamediainc1 */
google_ad_slot = "7102844977";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
Of course, you have to use your own Google Ads 🙂 This is how the Google Adsense ad appears on my blog:
To find single.php, go to your Administration Panel –>> Appearance –>> Editor –>> single.php. Once single.php is open, use the search bar (Ctrl + F) to locate < – – END post-entry-meta – ->.
You can leave the container as is or style it using style.css as you deem fit. And remember to save all changes. The <div> container is really useful, and when you couple it with CSS and an ounce of creativity, you can achieve so much with your WordPress site. It can help you place any code (or anything really) anywhere on your website.
The Toolbox
If you would like to learn more about writing custom code in your WordPress posts, please feel free to check out the following resources:
- Writing Code in Your Posts
- Fun Character Entities
- Using Javascript in Posts
- Using HTML in WordPress Posts
- Writing Secure WordPress Code (Slideshare)
Well, that’s about it. We’ve managed to cover the areas we outlined at the beginning. But if you don’t understand any concept in this post, or you would like to add your suggestions or views, please share your thoughts in the comment section below!