Add HTML, CSS & JS Code to WordPress Page/post
Are you unable to add the HTML, CSS, and JS code to the WordPress page and display the output? If you add HTML, CSS, and JS code to your WordPress source code in the classic editor then only your HTML code will work. I have 2 best solutions for this problem, which I will tell you in this article. So, this article is about how to add HTML, CSS, and JS code to a WordPress page. In a project, I created using HTML, CSS, and JS code, I researched how to run output on WordPress pages. When researching how to display the output of my project created using HTML, CSS, and Js on a WordPress page. I couldn’t display the output on my WordPress page, then I found two solutions. Both methods will work for you, no matter how you code these three programming languages together and separately.
One of those two methods requires a plugin and the other does not require a plugin. If you want to use them without the plugin method, you need to merge the CSS and JS code into the HTML. With the plugin method your HTML, CSS, and JS code can be separate too. Let’s see those two easy methods for adding codes to WordPress pages.
1. Add code to the WordPress page Without using a plugin
Note: Follow this method only if you are using block editor else use the next method.
Step 1. In this method, your HTML, CSS, and JS code should be combined if they are separate so, you need to include your CSS and Js code in HTML. Add <style> tag inside the HTML <head> tag and give your CSS code inside the style tag, as shown in the figure. And add <script> tag inside HTML <body> tag and give your JavaScript code inside <script> tag, as shown in the figure.
Step 2. Login to your WordPress dashboard. Add a new page to add your custom HTML, CSS, and JS. Create new pages by pages > add new page in the left menu. Once inside the WordPress page, click on the add + icon (add block inserter) at the top.
Step 3. Search custom HTML in the search box and click on custom HTML to add it.
Step 4. Paste your combined HTML into the custom HTML box. Then click to preview the page and the output of your custom HTML code is successfully displayed on the WordPress page.
If you want the output of your code to be displayed throughout your page, Give it “full width” in the content layout in your page theme setting. And change “no sidebar” in the theme sidebar setting. If you do this, the output of your code will display on full-page, Only your header and footer are visible.
So, if you think this method is difficult for you and have a problem merging CSS and Js code in HTML then try it next method. In the next method, you can display/run the output on your WordPress page without merging your HTML, CSS, and JS code. So let’s see how to add HTML, CSS, and JS code to the WordPress page using the plugin and display the output on the page.
2. Add code to the WordPress page By using a plugin
Step 1. In this method, you first install and activate the plugin called “WP-CODER“. It is the best plugin to add HTML, CSS, and JS code to WordPress pages/posts. Because you can easily add code of these three languages to it and see your output.
Step 2. After you activate the wpcoder plugin, the Wow plugin option will be newly added to the WordPress menu. G0 to wow plugin > wp coder.
Step 3. Add your HTML, CSS, and JS code with this plugin. So, Click the add new button above.
Step 4. The wp coder post has three separate options namely HTML code, CSS code, and JS code. Paste, your HTML in the HTML code box, your CSS in the CSS code box, and your Javascript in the JS code box. If you have all the code in HTML format, paste it into the HTML box.
Step 5. After pasting your code click the save button. To display the output of this code on your WordPress page, copy your shortcode as shown below figure and paste it onto your WordPress page.
After pasting your shortcode on the page, then publish your page and see that the output of your HTML, CSS, and JS code is successfully displayed on your page. You can use these 2 methods, If you have a website related to coding, you can provide the code in your post and display the output to the user using this method. You can display the output to your user and interpret the code.
Conclusion
I hope both methods are useful for you. I suggest you if you are using a classic editor in WordPress then use with plugin method. And if you are using block editor you can use them without the plugin method. Don’t add too much JavaScript code to your site, because if your site already has ads set up, your website will become slow. Be careful, because if you don’t know what you’re doing, you can bring the site down. If you have any other doubt ask them in the comment box. Now you know how to add HTML, CSS, and JS to a WordPress page or post!
