Top 3 Best Ways To Add Inline Scripts In WordPress

WordPress

WordPress is one of the leading content management systems. Thanks to its numerous free plugins it’s possible to create any type of site – from a landing page to a news website or personal blog. Why do users like it so much? WordPress is easy because of a built-in editor and cross-platform support. Nevertheless, customers have difficulties with adding inline scripts from time to time. How to act if you want to display a popup 30 seconds later after loading the page, do some extra computations in the background, add or extend any other functionality? Read on to know about the 3 best ways to add inline scripts in WordPress.

Every WordPress installation comes with a basic set of features and design that we extend later by using additional themes and plugins. And most WordPress themes and plugins add some JavaScript and CSS in the front-end of your WordPress website to make it work properly. That’s because of the render-blocking issue.

When a user browses your website, Then the user’s browser loads those JS and CSS files before making the rest of the content (HTML, Images, Videos, etc.) visible on your website. Since those JS and CSS in your website block another content rendering until load itself, It’s refereed as render-blocking, which increases your website load time and bad user experience as well.

Google recommends webmasters and website owners to eliminate those render-blocking JS and CSS’s in above the fold content to make their website load fast and improve user experience, in addition, to comply with Google page speed guidelines.

Let’s have a closer look at how we choose and use different functions in WordPress to add inline scripts.

Plugins

You are very far from being a programmer but still want to make your site user-friendly? Find out more about plugins. These pieces of software contain a group of functions and can help with different tasks. Plugins are used for adding new features or extending functionality. Let’s look at common purposes plugins are applied for and find out how to use them properly.

Image Optimization

Do you want to optimize images automatically without any quality loss? There are numerous plugins that might be helpful. Choose the ones which have good ratings and are constantly updated. After activating a plugin go to the settings menu. The tools’ list usually includes optimization servers, compression modes, auto optimization on upload, backup images, etc. After choosing the right tools, download the required pictures, and optimize them with pleasure.

Cleaners

Websites often have unused features that slow down page-load time. A problem is it’s one of the reasons why Google ranks such sites lower in search results. To fix it and improve your WordPress-based site try special plugins for cleaning. What exactly can you make with their help?  One of the necessary options helps to disable the RSS feed if you don’t need a blog. You can also remove emojis with one click to speed up your page load time. Don’t insert videos into the pages of the website? Turn off the Embeds option. All mentioned and more is possible without changing or adding inline scripts manually.

Plugins for code management

Such plugins allow inserting  Javascript, HTML, or PHP code to any place of the site. For example, you can easily add header or footer code, put ads or questionnaires in the middle of the post, etc. You may see the results of those plugins’ usage on many sites including for example this dating site. Plugins for code management usually have simple text snippets and snippets for Google Analytics tracking, CSS styles, and more.

Manual Ways To Add Any JS Code To Any Script

Manual ways for adding scripts may seem a bit difficult for beginners. But with the help of the “wp_add_inline_script()” function you can add any JavaScript snippet and also connect it with any original script. The main advantage of this way is total control. Other techniques may help to achieve the same results but don’t give any steady way to manage output location. Here the situation is completely different. Inline scripts via “wp_add_inline_script()” can be put both in the head section, footer, or any other place you wish.

What about adding code to the header? “Wp_print_scripts / admin_print_scripts” is the reliable action hook for adding a code. It is perfect when you want to add the script to the admin area. Otherwise, it’s necessary to replace “admin_print_scripts” with “wp_print_scripts”. This method is suitable for adding JS codes, conditionals, functions, and any other things you need to add. But it should be mentioned the mentioned way has one significant lack. There is no option for associating the new code with the registered script.

How To Add HTML To WordPress With The Help Of Editor?

If you need to add any inline scripts embedded inside HTML code to WordPress use the editor. On average, adding such scripts is profitable for editing things like AdSense ads, pre-formatted pages, or posts. The first step is opening the necessary page in the editor. Then find where you want the code to go and add a placeholder text. You need that to be prepared for the next part of the action.

Click in the top right section named “text” which changes a post or page into HTML. Copy the necessary HTML code and paste it instead of earlier prepared placeholders. Change the things back to visual by clicking the relevant button in the top right corner of the screen. Whatever the HTML code represented would appear in the editor. After refreshing the page you’ll see that new HTML code has been successfully added to your website. If you want to add inline scripts to WordPress widgets just click on the HTML widget and drag it to the required area. The only thing left to do is to pierce the code and check how it works by updating the page.

Hi, I'm Raj Hirvate and I am a Tech Blogger from India. I like to post about technology and product reviews to the readers of my blog. Apart from blogging i'm a big Anime fan I Love Watching Naruto, One piece and Death Note.