My team and I had a problem when posting code snippets on our WordPress site for illustration or tutorial purposes. WordPress by default changes single and double quotes to more stylish, slanted quotes. They may look similar but they are different from the vertical quotation marks that appear in unformatted, plain text. Since they are different characters, they have the propensity to produce errors and even crash your site if used in a PHP file like functions.php.
So we had to find a way around this, but we did not want to use external sources or plugins for that since it creates loading overhead and we’re all about great WordPress performance and load times.
We found a good and easy solution everyone can use, and I will show you how to do it. In our case we’re using the Divi theme on our site (we use it on most all of our professional projects) but you don’t have to have Divi to use this method.
- Open your post/page editor and make sure you are in Visual tab.
- Paste your code where you want to display it.
*Note: We are pasting our code here so that wordpress filters all our special characters for us.
- In the right upper corner switch to Text tab.
- Wrap your code in <code> </code> tag.
- You can also indent it with <blockquote> </blockquote> tag:
<blockquote>YOUR CODE GOES HERE
That’s it, now you have clean preformatted (or rather, UNformatted) code that you can paste on your site without bogging it down with scripts!
Then click on “Highlight” and the online tool will generate a nice html code with inline CSS:
And here’s the live code:
$str = “<h1>This is MemberFix</h1>”;
$newstr = filter_var($str, FILTER_SANITIZE_STRING);
Questions, comments, concerns? Leave your thoughts in the comments below. 🙂