Adding custom JavaScript, CSS and HTML to WordPress

1 Views

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:

Read More
$(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(/[ nr]/);
    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 );
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. 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.