Adding code in your WordPress posts may be a challenge at times for many users. Adding code to the wrong post editor or just one single line break can mess up your code, leaving your post’s layout looking like a mess and creating a bad experience for your users. When done right, adding code to your WordPress Posts can be used to apply unique styling to your posts or even showcase code for users to copy and paste.
In this article we will discuss how WordPress Interprets code, the two ways code can be added to your WordPress posts, and when each one should be used to successfully to create a better experience for your users.
How WordPress Interprets Code
WordPress interprets code depending on whether you’re using the visual post editor or the HTML post editor. In the visual post editor, WordPress will read all code as ordinary text by encoding all characters into character entities so the web browser does not interpret them. One way you can avoid this behavior is by using the HTML post editor. The HTML post editor does not encode these characters, it allows the web browser to interpret your HTML and CSS. Choosing the right editor is important and can make or break your post.
Adding Code to Your WordPress Posts
Now that we know the difference between WordPress’s visual editor and HTML editor we can discuss the two ways to add your code. The two most common ways of adding code is by using the<code></code> and <pre></pre> tags.
Using the <code> Tag
The <code> Tag is mainly used within paragraphs to highlight or make a point about the code being discussed. If you noticed I’ve used the <code> multiple times within this paragraph to highlight its importance. Below is an example of how you would write it in your HTML post editor.
<p>
This is a paragraph that uses the <code> tag to highlight important code within a paragraph.
</p>
Using the <pre> Tag
The <pre> tag is popular with developers to showcase their code so others can copy and paste it easily into their own work. Code within <pre> tags generally form their own code box that the browser reproduces everything inside of it exactly how it is written. Below is an example of <pre>.
$(window).on("scroll", function () {
HeaderAnimation.checkPosition()
});
In Closing
Although adding code to your WordPress posts may be a challenge at times, when done right, it can create a great experience for your users.
