7 Step-by-Step Guide to Add HTML CSS Javascript Custom Code Tool on WordPress Website FREE

Introduction:

I’m here to help you learn how to make cool changes to your WordPress website. I’ll guide you through creating a special theme and template just for you. Plus, I’ve got all the easy-to-use code you’ll need. No worries about future updates – your changes will be safe! Let’s get started! Learn to add HTML, CSS, and JavaScript custom code tools to your WordPress site with this step-by-step guide. Enhance your site’s functionality

Step 1: Creating a Child Theme

You have the flexibility to generate a child theme from your theme’s website. For example, if you’re using the Astra theme, you can utilize WPAstra’s Child Theme Generator specifically designed for Astra users.
Alternatively, if you’re using a different theme, you can easily create a child theme directly from your theme’s website.

Step 2: Uploading Your Child Theme

To add your custom child theme to your WordPress website, follow these steps:

Navigate to Themes: In the left-hand sidebar, click on “Appearance,” and then select “Themes.”

Click on “Add New“: At the top of the page, click on the “Add New” button.

Upload Your Child Theme: In the next window, click on the “Upload Theme” button.

Choose the Child Theme Zip File: Click the “Choose File” button, locate your child theme’s zip file on your computer, and select it.

Upload and Activate: Once the file is selected, click “Install Now.” After the installation is complete, click “Activate” to set your child theme as the active theme.

Your custom child theme is now uploaded and active on your WordPress website

Step 3: Developing a Custom Template

This code only works on the astra child theme 

<?php
/*
Template Name:  NAME OF YOU TOOL
Template Post Type: page
*/
get_header();
?>
<?php

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

get_header(); ?>

<?php if ( astra_page_layout() == 'left-sidebar' ) : ?>

	<?php get_sidebar(); ?>

<?php endif ?>

	<div id="primary" <?php astra_primary_class(); ?>>
----------------Your HTML here----------

		<?php astra_primary_content_top(); ?>
		<?php astra_content_page_loop(); ?>

	<style>
--------Your CSS here-----
       </style>
		<?php astra_primary_content_bottom(); ?>
	</div><!-- #primary -->
<?php if ( astra_page_layout() == 'right-sidebar' ) : ?>

	<?php get_sidebar(); ?>
<?php endif ?>
<?php get_footer(); ?>
<script>
--------Your javascript here-----
</script>
<?php
get_footer();
?>

Step 4: Adding HTML to the Custom Template

In this step, you’ll embed HTML code into your custom template to structure and design your page.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
    <title>Home</title>
</head>

<body>
    <div class="container"><img id="showImg" src="images/img.png">
        <div class="button">
            <div class="upload"><input type="file" onChange="loadFile(event)" accept=".png, .jpg, .jpeg">Upload Image
            </div><button onClick="pdfDown()">Download To PDF</button>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
</body>

</html>

Within the custom template, insert the HTML code that corresponds to the desired functionality or content you wish to add.

Step 5: Incorporating CSS Styles

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
}

body {
    font-family: arial;
    font-size: 16px;
    margin: 0;
    background: linear-gradient(133deg, #4abeb2, #3c57d2);
    color: #000;
    align-items: center;
    justify-content: center;
    min-height: 100vh
}

.container {
    background: white;
    width: 450px;
    padding: 30px;
    border-radius: 5px
}

input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1
}

.button {
    display: flex
}

#showImg {
    display: block;
    margin: 0 auto;
    max-width: 400px;
    min-height: 200px;
    background: #174353;
    border-radius: 5px
}

button,
.upload {
    width: 220px;
    margin: 50px 20px 10px 20px;
    text-align: center;
    position: relative;
    padding: 10px 5px;
    font-size: 17px;
    outline: none;
    color: #fff;
    border: none;
    background-color: #023780;
    border-radius: 5px;
    display: block
}

.upload {
    background: #a74901
}

Enhance the visual appeal of your custom content by applying CSS styles directly within the custom template.

Step 6: Integrate JavaScript Functionality*

var newImage, showImg;

function loadFile(event) {
  showImg = document.getElementById('showImg');
  showImg.src = URL.createObjectURL(event.target.files[0]);

  newImage = new Image();
  newImage.src = URL.createObjectURL(event.target.files[0]);

  showImg.onload = function() {
    URL.revokeObjectURL(showImg.src); // free memory
  };
}

function pdfDown() {
  var doc = new jsPDF();
  doc.addImage(newImage, 'JPEG', 10, 10, 190, 0);
  doc.save('ImgToPDF.pdf');
}

For dynamic and interactive elements, insert JavaScript code into the custom template.

Step 7: Testing and Debugging

Ensure all customizations are functioning as intended by thoroughly testing your website. Address any issues that may arise during this process.

Watch full step on this video

Conclusion:

Congratulations! You’ve successfully customized your WordPress site using child themes, and custom templates, and added enhanced functionality with HTML, CSS, and JavaScript. This tailored approach empowers you to create a unique and engaging user experience.

Scroll to Top