thumb

The Anarcho Notepad, Author’s Notepad and Simple Notepad themes are easy to customise using the WordPress Customiser interface, where you can find many useful built-in options such as the option category called “Scripts”. But if you were trying to add a custom HTML/JavaScript code using the “Scripts” option category, you probably found that in the front-end of website the custom HTML/JavaScript code is displayed as plain text. In this article, I will show you how to easily solve this issue.

Why does the "Anarcho Notepad" and "Authors Notepad" themes display user-entered HTML code as plain text?

Themes on the topic:

What causes this problem

Initially, the “Scripts” option category is designed to handle user-entered HTML/JavaScript code. Moreover, there were more options to insert user-entered HTML/JavaScript code. But some time ago these options were purposely limited. Now, when you add custom HTML/JavaScript code using the “Scripts” option category, the custom HTML/JavaScript code is displayed as plain text in the front-end of website. The theme developers had to do this because of the strict rules of WordPress. The people behind WordPress and the theme developers are convinced that the data entered by the user must be validated, sanitised and escaped. In short, it’s all about security. You can read more about this in the WordPress Codex.

Let’s begin

Fortunately, there is an easy solution. If you want the “Scripts” option category to process user-entered HTML/JavaScript code instead of displaying it as a plain text, you have two methods. The first method is using the WordPress Admin Area interface of your website, and the second is using FTP access to your server. Use the one that is convenient for you.

Note! The instructions in the article below require you to make changes directly to your WordPress theme file. I don’t recommend doing this if you are not sure about your actions, because it’s easy to make mistakes and any changes you make will get overwritten when you update the theme.

In this solution we will use the WordPress Admin Area interface of our website. We do not need to download and install anything.

  1. Navigate to Appearance -> Theme Editor in your WordPress Dashbord to open the WordPress Theme Editor interface.
  2. Select the theme from the drop-down list on the right side of the WordPress Theme Editor interface.

    For this tutorial I use the “Author’s Notepad” theme v2.39.

  3. Select the file customizer.php (inc -> customizer.php) on the right side of the WordPress Theme Editor interface.
  4. Find the lines numbered 360, 372, 384 and 396.

    These lines are in the section “// SCRIPTS SECTION”. Make sure you edit exactly the lines you need. In different versions of themes, the needed line numbers can be very different.

  5. Remove the mention of 'esc_attr' (but leave quotes in place), so that you get the following:
    'sanitize_callback' => '',
  6. Click the Update File button.

In this solution we will use FTP access to our server.

  1. Access your server via FTP or SFTP.

    If you aren’t sure how usually your web hosting provider will have instructions somewhere on their website.

  2. Browse to the themes directory wp-content/themes/.

    The location of the folder wp-content depends on your host’s setup. Typically, the folder public_html contains all the files of the website, among which you will find this folder. Please contact your web hosting company to get help if you can’t find this folder.

  3. Navigate to the file customizer.php (authors-notepad-sxc -> inc -> customizer.php) and open it.

    For this tutorial I use the “Author’s Notepad” theme v2.39.

  4. Find the lines numbered 360, 372, 384 and 396.

    These lines are in the section “// SCRIPTS SECTION”. Make sure you edit exactly the lines you need. In different versions of themes, the needed line numbers can be very different. For this tutorial I use the “Author’s Notepad” theme v2.39.

  5. Remove the mention of 'esc_attr' (but leave quotes in place), so that you get the following:
    'sanitize_callback' => '',
  6. Save the changes made to the file.

Conclusion

That’s it, you’re done. Now the “Scripts” option category can process user-entered HTML/JavaScript code instead of displaying it as a plain text. So simple isn’t it?

I hope this article has helped you learn how to make the “Scripts” option category handle the user-entered HTML/JavaScript code instead of displaying it as a plain text in the “Anarcho Notepad”, “Author’s Notepad” and “Simple Notepad” themes. If this article has helped you then please leave a comment :smiley:

Thanks for reading!