0

How can I add the following HTML code into one of my web pages? It's a web form that relies on css and a few java script.

Below is the raw HTML code.

<head>
    <link href="css/style.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>

    <script src="js/slider.js"></script>
    <script src="js/rslider.js"></script>
    <script src="js/popup.js"></script>

</head>

<body>

        <div class="wrapper">
            <form id="signup_form" method="post" name="signup_form" action="post">
                <input type="hidden" name="token" value="2f8247702b1f51b36dad1d8f4ba66211de0c31af">
                <input type="hidden" name="configure" value="true">

......

</body>

I've added the following with Visual Composer but that causes it to stop working (just for that page).

<link href="css/style.css" rel="stylesheet">
        <script src="js/jquery.min.js"></script>

        <script src="js/slider.js"></script>
        <script src="js/rslider.js"></script>
        <script src="js/popup.js"></script>


            <div class="wrapper">
                <form id="signup_form" method="post" name="signup_form" action="post">
                    <input type="hidden" name="token" value="2f8247702b1f51b36dad1d8f4ba66211de0c31af">
                    <input type="hidden" name="configure" value="true">

    ......

I'm guessing this isn't the cleanest way. What would be better?

Improve this question

4 Answers 4

Reset to default
1

Add CSS and JS Particular Page. Put this code in your current active theme function.php file 

<?php
    function function_name() {
        is_page( 'about-me' ) //is_page( 'PAGE_SLUG_NAME' )
        {
            wp_enqueue_style( 'stylecss', get_template_directory_uri() .'/css/style.css','', '3.3.1' );         
            wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ));
        }    
    }
    add_action( 'wp_enqueue_scripts', 'function_name' );
    ?>
Improve this answer
0

Toodarday,

For the code you want to put in your <head> section, you should do this in the header.php file.

To do this, go to your WordPress dashboard, hover your cursor over APPEARANCE in the left-side menu bar, and click on EDITOR.

When the editor screen appears, in the right column, you should see the listing "Header" with (header.php) below it. Click on that listing to edit your header.php file.

Copy the code you want to put in your tag, and paste it in between the <head> and the </head> tags, then scroll down and click the [Update File] button.

This will put your code in the proper place.

Be aware, this will put the code into the header tag for ALL your pages.

If you want to put the code in place for just one page, then you should use CONDITIONAL tags in PHP. You can find out about conditional tags in the WordPress Conditional Tags Codex.

but in a nutshell, if for example you want this code only to appear on your home page, then you would put the following PHP code into your header.php file:

<?php
  if (is_home())
{?>
Your Javascript Goes Here
<?php } ?>

If it is not your home page, you would replace the IF statement above with one appropriate to the page to which you want to limit the code appearing.

As for the form in the <body> section, you can simply add this code in the text view section of your page/post editor - I THINK this is true, but I haven't tested it.

Hope this helps.

Improve this answer
2
  • Thank you for your reply. I have added that code but it does not show. The page this slider is on is located at domain/windows-vps/. For test purposes I added your exact code for the home page pastebin.com/ZHxynGtY . Looking at the page source code these don't even show.
    – Toodarday
    Commented Jul 18, 2015 at 17:39
  • Just to confirm that if I add only the link href and script src between <head> </head> it works.
    – Toodarday
    Commented Jul 18, 2015 at 17:49
0

To load the css/js on just one page, please see my earlier answer, and use a WordPress Conditional Tag, just as I showed you in the code example, except replace "Home" in the example with the conditional tag for the page you want this code on.

You can find the conditional tag for any specific page by looking it up as indicated in the CODEX link in my earlier answer.

Improve this answer
1
  • I did try this and I was unable to get it to even work on the home page. Please see below comments on your first answer
    – Toodarday
    Commented Jul 19, 2015 at 20:38
-1

You want to add CSS OR SCRIPT in wordpress theme .. so.

wordpress provide a functions.php in copy and past YOUR CSS LINK OR JS SCRIPT LINK.

/**
 * Enqueue scripts and styles.
 */
function function_name() {  

    // ADD STYLE
    wp_enqueue_style( 'CSS-ID', get_template_directory_uri() .'/css/style.css','', '3.3.1' );           

    // ADD SCRIPT
    wp_enqueue_script( 'JS-ID', get_template_directory_uri() . '/js/SCRIPT.js', array(), null, true );  

}
add_action( 'wp_enqueue_scripts', 'function_name' );

Improve this answer
2
  • How is this linked to a specific page? I only want the css/js loaded on one page.
    – Toodarday
    Commented Jul 18, 2015 at 19:45
  • This doesn't answer the question posed by op
    – toomanyairmiles
    Commented Feb 16, 2016 at 12:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.