Adding custom JavaScript, CSS and HTML to WordPress

Question

I have a simple code that counts number of words in a sentence. This word counter has 3 parts, a CSS, JS & HTML files. I know its possible to run this scripts in WordPress but I am not sure how to achieve this. Below is the codes:

JS:

$(function() {
    $("#sys-tbox").each(function() {
        var input = '#' + this.id;
        counter(input);
        $(this).keyup(function() {
            counter(input);
        });
    });
});

function counter(field) {
    var number = 0;
    var text = $(field).val();
    var word = $(field).val().split(/[ \n\r]/);
    words = word.filter(function(word) {
        return word.length > 0
    }).length;
        $('.words').text(words);
        $('.character').text(text.length);
}

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Sysadmin Word Counter</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

        <script src="js/jscript.js"></script>
        <link rel="stylesheet" href="css/css-style.css" />
    </head>
    <body>
        <div id="sys-mbox">
            <textarea id="sys-tbox"></textarea>
        </div>
        <div class="sys-results">
        Total number of words: <span class="words"> </span>
        Total number of chars: <span class="character"> </span>
        </div>
    </body>
</html>

Here is a Fiddle

I have read in WordPress document that this can be achieved using wp_enqueue_script() but I am not sure where to start from since its appears the methods might differe based on the WordPress theme used since file structure's are different.

Please can anyone point me in the right direction or provide me with links to similar answered questions.

Thanks

Added this code to Function.php:

function wordcount_scripts()
{
    // Register the script like this for a plugin:
    wp_register_script( 'wordcountjs', plugins_url( '/js/wordcountjs.js', __FILE__ ) );
    // or
    // Register the script like this for a theme:
    wp_register_script( 'wordcountjs', get_template_directory_uri() . '/js/wordcountjs.js' );

    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'wordcountjs' );
}
add_action( 'wp_enqueue_scripts', 'wordcount_scripts', 5 );

avarx · Accepted Answer · 2014-03-04 09:40:40Z

2

JS and CSS
There are multiple ways. I would start reading this. As you mentioned wp_enqueue_script is a good way:
http://code.tutsplus.com/articles/the-ins-and-outs-of-the-enqueue-script-for-wordpress-themes-and-plugins--wp-22509

HTML
You're looking for Child Theme:
WP:A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.

edited Mar 4, 2014 at 9:40

answered Mar 4, 2014 at 8:08

avarx

5195 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Chelseawillrecover Over a year ago

OK will take a look at this

Chelseawillrecover Over a year ago

I have added the above code to my functions.php file, not sure how to load my html

avarx Over a year ago

Do you have your own theme?

avarx Over a year ago

copy the original file (e.g. header.php) into your child-theme folder and change what you need to change.

Chelseawillrecover Over a year ago

OK will do that and let you know how it went. Thanks for your time so far

|

Collectives™ on Stack Overflow

Adding custom JavaScript, CSS and HTML to WordPress

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related