How to Insert Java Scripts and HTML in WordPress

Hi Everyone!

Today we will discuss on a very small concept which seems to be a big issue for newbie’s who just got some basic knowledge of setting up & running a WordPress Blog. Although, adding HTML Codes or Java Scripts in WordPress is really easy which can be done by following some below provided steps…

In Reference: How To Publish Google Ads After Getting Adsense Approved


Things to Remember before doing this…

Nothing is Impossible

You have added some valuable content you can add codes

Just keep a Back-up of site and everything is reversible

Okay, let’s get started with implementing the HTML Codes and Java Scripts in WordPress, but, first we need to understand one thing i.e. WordPress is a Blogging tool (well, I feels it more than a Blog) and it shows us the Visual Mode to work easily whereas, the Java Scripts and HTML Codes are internal codes which can be visualized when used via Browsers.

So this means that to implement any Java Scripts or HTML Codes you need to use an HTML version of input which in WordPress is termed as a Text Format. This concludes that you can either go to text editor (while creating posts or pages) to use them on a specific pages or posts, or you can go to Widgets in case of adding something on your Webpage, where widgets reaches.

(For Integrating other than your normal reach you need to customize the core files – that can be done at Owner’s Risk)

So the above thing confirms that when the Java Scripts or some HTML Codes are inserted in your WordPress Blog via Dashboard by the Site Admin or User, it won’t going to show instant result and therefore to see the results you can either Preview results (in case of posts or pages) or you can save and visit the URL or the Webpage where that widget appears…

See: How to Hide or Show Widgets on Specific Pages?

How to add scripts or codes in Widgets

Go to widgets settings from Appearance and use a text widget. Place the widget on the correct position where you want the Java Scripts or HTML Codes to be appeared. Finally, just copy the codes in the text widget you are using for these codes and if required you can give the widget a name which will appear as a Heading for the widget’s content… like Sponsored Advertisements for adding Advertisements.

How to add scripts or codes in Pages or Posts

While creating or editing a Post or Page choose the Text-editor option which can be seen on the top right side of the content editor/ writer box. Then, find a keyword (after or before where you need to add codes) or end tag something like /> in case of tags used or Para-ending, you may use search feature {ctrl + f}. Now, just copy and paste the codes at the right place where you needed.

See: How to Place Advertisements In WordPress Using Plugins?

If the codes relates to a text content or image source something like a link, text fonts, text size etc. will become visible in Visual editor mode when you returns back to normal visual mode. But, if the codes relates to video, flash, media attachment other than image mostly takes its white space or you can preview or view it (this takes codes to Browsers) after saving the content.

How to add scripts or codes in Header or Footer

Well as I said above that nothing is difficult – adding or removing when you know what is to be added or removed. Difficulty comes when you need to modify codes (without proper knowledge), so here, we are assuming that you just need to add codes… eg. Adding advertisement codes…

Before doing anything you must consider that anything added must not comes in between an open tag {<}and a close tag {/> or ?>}. Now if you are willing to add some scripts that are just needed to be added in Header to call an external function like Facebook Scripts or Codes. For that you can simply search for {</head>} in the Header.php File and add the following scripts just before this end tag {</head>}.

Similarly, in footer you can either find </footer> in the Footer.php or else you will definitely (2nd option) find {</body>}. Now add the required codes…

Note: Some WordPress Themes do allows adding custom codes in their Header and Footer Section and even in Body Section from Theme Options.

Recommended Things to Remember

Do not try to become a king without creating a Site or Database Back-up until or unless you know perfectly how to add custom codes

Do not blame us for any mistakes done from your end; we are ready to help you if required…

If you takes back up before making changes is good else nothing is Impossible doesn’t imply for getting site back in previous conditions without Back-up. Well, by reverting all changes made site can be normal once again.

See here, If you are looking for Domains & Web Hosting Services