0

I have a simple application I have worked on and would like to load it into my WordPress theme.

This app has a /js folder with myscript.js, a /css folder with mystyle.css and an HTML file index.html.

Here is the fiddle to the whole app.

I am using the default WordPress theme and all I want to do is create a page for this app and load it there. This way I can create another page and load another app.

Efforts made: From what I have read I need to enqueue my custom JS script which I have done like this and added to functions.php file:

/**
 * A small function to load my custom JScript file for WordCount
 */
function my_script() {
    if ( is_page(23) ) {
        wp_enqueue_script(
            'my-script',
            get_template_directory_uri() . '/js/my-script.js',
            array('jquery')
        );
    }
}
add_action( 'wp_enqueue_scripts', 'my_script', 1 );

My only challenge is: where would my index.html code go to?

Improve this question

1 Answer 1

Reset to default
0

I would do this in a page template.

In your theme, create a file named page-app.php with the following content:

<?php
/**
 * Template Name: App
 */

function wpdev_137109_enqueue_scripts() {
    $file = '/js/myscript.js';
    wp_enqueue_script(
        'myscript',
        get_stylesheet_directory_uri() . $file,
        array( 'jquery' ),
        filemtime( get_stylesheet_directory() . $file ),
        TRUE
    );

    $file = '/css/mystyle.css';
    wp_enqueue_style(
        'mystyle',
        get_stylesheet_directory_uri() . $file,
        array(),
        filemtime( get_stylesheet_directory() . $file )
    );
} // function wpdev_137109_enqueue_scripts
add_action( 'wp_enqueue_scripts', 'wpdev_137109_enqueue_scripts' );
?>
<?php get_header(); ?>
<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>
<?php get_footer(); ?>

Put your stylesheet and script files in the mentioned locations.

Then create a WordPress page and select the page template App from the Page Attributes meta box. Hit save and you're done.

// EDIT:
As for jQuery, try it like so:

jQuery(function($) {
    // code...
});
Improve this answer
6
  • Great let me try this but does it matter which Theme I have activated? Commented Mar 6, 2014 at 20:37
  • This file will need to be in the active theme Commented Mar 6, 2014 at 20:52
  • Sure its an Active Theme. I am running into slight issue as it appears WordPress does not like my $ in the JS script. I read I need to change $ to jQuery. I have done it but it appears it does not like anything $ to be declared Commented Mar 6, 2014 at 21:00
  • sorry but I already done that. Stuck with error TypeError: Property '$' of object [object Object] is not a function. Its failing at var text = $(field).val(); It appears it does not like $ Commented Mar 6, 2014 at 21:09
  • 1
    You are a genius. Thanks for your help. The best I have seen so far Commented Mar 6, 2014 at 21:13

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.