2

I'm currently trying to create my first ever theme on wordpress. I'm hosting it locally until I can get it all working and then I will use the theme on a website.

Everything was going great until I got to the javascript. Each page on the theme has a character counter box which counts up counters as the user enters them. Each of these boxes has it's own javascript file.

I put one javascript file in the header.php file and that page that uses that file works (the home page), but I want to be able to create different page templates and on those templates use different files?

Is this possible.

(Not sure if I've explained this well enough, as I said I'm new to the whole theme development side of wordpress)

Thanks in advance, and be sure to ask for more details.

    <?php

function themeslug_enqueue_script() {
    wp_enqueue_script( 'my-js', '/js/char-counter.min.js', false );
}

add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );

// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');

// Theme Support
function wpb_theme_setup(){
    // Nav Menu
    register_nav_menus(array(
      'primary' => __('Primary Menu ')
    ));
}

  add_action('after_setup_theme', 'wpb_theme_setup');

  // Register scripts/styles. They can be optionally enqueued later on.
  add_action( 'wp_loaded', 'wpse248829_register_scripts' );
  function wpse248829_register_scripts() {
      wp_register_script( 'character-counter-script-js', get_template_directory_uri() . 'http://localhost/mysite/wp-content/themes/char-counter/js/char-counter.min.js', array( 'jquery' ), true );
      wp_register_script( 'tweet-counter', get_template_directory_uri() . 'http://localhost/mysite/wp-content/themes/char-counter/js/tweet-counter.min.js', array(), true );
      wp_register_script( 'title-tag-counter-script', get_template_directory_uri() . 'http://localhost/mysite/wp-content/themes/char-counter/js/title-tag.min.js', array(), true );
      wp_register_script( 'description-counter-script', get_template_directory_uri() . 'http://localhost/mysite/wp-content/themes/char-counter/js/description-tag.min.js', array(), true );
  }

  // Enqueue scripts/styles.
  add_action( 'wp_enqueue_scripts', 'wpse248829_enqueue_scripts' );
  function wpse248829_enqueue_scripts() {
      // Load everywhere.
      wp_enqueue_style( 'style', get_stylesheet_uri() );
      wp_enqueue_script( 'script', get_template_directory_uri() . '/js/jquery.min.js', array ( 'jquery' ), 1.1, true);

      // Only enqueue scripts/styles on static front page.
      if ( is_front_page() ) {
        wp_enqueue_script( 'character-counter-script-js' );
    }

      if ( is_page_template( 'tweet-template.php' ) ) {
          wp_enqueue_script( 'tweet-counter' );
      }

      if ( is_page_template( 'title-tag-template.php' ) ) {
          wp_enqueue_script( 'title-tag-counter-script' );
      }

      if ( is_page_template( 'description-tag-template.php' ) ) {
          wp_enqueue_script( 'description-counter-script' );
      }
  }

That's what my functions.php file looks like

    <!DOCTYPE html>
<html dir="ltr" lang="en-GB" prefix="og: http://ogp.me/ns#">

<head>

  <meta charset="<?php bloginfo('charset'); ?>">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap Core CSS -->
  <link href="<?php bloginfo('template_url') ?>/css/bootstrap.css" rel="stylesheet">

    <!-- Custom Fonts -->
  <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>


    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

    <!-- Theme CSS -->


    <link rel="shortcut icon" href="/img/favicon.ico">

    <script src="//load.sumome.com/" data-sumo-site-id="63887403fa39b3ec361069237f61eca50baf36e10e2973ac54b998b5095b3bb2" async="async"></script>


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

        <title><?php wp_title(''); ?></title>

        <?php wp_head(); ?>

</head>

<body itemscope itemtype="http://schema.org/WebPage">

    <div id="wrapper" class="clearfix" itemprop="mainContentOfPage">

    <nav id="mainNav" class="navbar navbar-default navbar-static-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>

                <?php if ( get_theme_mod( 'm1_logo' ) ) : ?>
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" id="site-logo" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">

                    <img src="<?php echo get_theme_mod( 'm1_logo' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">

                    </a>

                  <?php else : ?>

                    <hgroup>
                        <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                        <p class="site-description"><?php bloginfo( 'description' ); ?></p>
                    </hgroup>

                <?php endif; ?>
          </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                  <?php
                wp_nav_menu( array(
                    'menu'              => 'primary',
                    'theme_location'    => 'primary',
                    'depth'             => 2,
                    'container'         => 'div',
                    'container_class'   => 'collapse navbar-collapse',
                    'container_id'      => 'bs-example-navbar-collapse-1',
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                    'walker'            => new wp_bootstrap_navwalker())
                );
            ?>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

That's my header.php file

Improve this question
1
  • 1
    Why does each counter box have its own javascript file?
    – czerspalace
    Commented Dec 9, 2016 at 21:36

1 Answer 1

Reset to default
4

I put one javascript file in the header.php file and that page that uses that file works (the home page)

Don't do that. Use wp_enqueue_script() instead.

You can use conditional tags to load scripts and styles in the desired locations. For example, to check if a particular page template is being used, you'd use is_page_template().

Scripts and styles can be registered on the wp_loaded hook, then enqueued on the wp_enqueue_scripts hook:

// Register scripts/styles. They can be optionally enqueued later on.
add_action( 'wp_loaded', 'wpse248829_register_scripts' );
function wpse248829_register_scripts() {
    wp_register_script( 'character-counter-script-js', get_template_directory_uri() . '/js/char-counter.min.js', array( 'jquery' ), false, true );
    wp_register_script( 'tweet-counter', get_template_directory_uri() . '/js/tweet-counter.min.js', array( 'jquery' ), false, true );
    wp_register_script( 'title-tag-counter-script', get_template_directory_uri() . '/char-counter/js/title-tag.min.js', array( 'jquery' ), false, true );
    wp_register_script( 'description-counter-script', get_template_directory_uri() . '/js/description-tag.min.js', array( 'jquery' ), false, true );
}

// Enqueue scripts/styles.
add_action( 'wp_enqueue_scripts', 'wpse248829_enqueue_scripts' );
function wpse248829_enqueue_scripts() {
    // Load everywhere.
    wp_enqueue_style( 'style', get_stylesheet_uri() );

    // Probably not needed, because it was already specified as a dependency.
    // wp_enqueue_script( 'jquery' );

    // Only enqueue scripts/styles on static front page.
    if ( is_front_page() ) {
        wp_enqueue_script( 'character-counter-script-js' );
    }

    if ( is_page_template( 'tweet-template.php' ) ) {
        wp_enqueue_script( 'tweet-counter' );
    }

    if ( is_page_template( 'title-tag-template.php' ) ) {
        wp_enqueue_script( 'title-tag-counter-script' );
    }

    if ( is_page_template( 'description-tag-template.php' ) ) {
        wp_enqueue_script( 'description-counter-script' );
    }
}
Improve this answer
9
  • would I do this on the functions.php file?
    – Tim Davis
    Commented Dec 9, 2016 at 21:43
  • 1
    Yes, that is correct.
    – Dave Romsey
    Commented Dec 9, 2016 at 21:44
  • Nothing seems to be happening for me
    – Tim Davis
    Commented Dec 9, 2016 at 22:09
  • 1
    Okay, please update your question with the calls to wp_enqueue_script() that you are using, as well as the names of your template files. The answer I've posted uses made up examples, and maybe something is being lost in translation here. Also, see the edit I made to the answer; don't place JS/styles directly in the header.
    – Dave Romsey
    Commented Dec 9, 2016 at 22:18
  • 1
    I've updated my answer with code from your updated question. The main issue I saw was that you were doing this get_template_directory_uri() . 'http://localhost/mysite/wp-content/themes/char-counter/js/char-counter.min.js' Take a look at the docs for get_template_directory_uri(), particularly the user-contributed examples. The function already gets the URI to the theme's directory so your code had some redundancy which broke the path. If something isn't working, be sure and check the browser's error console.
    – Dave Romsey
    Commented Dec 9, 2016 at 22:44

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.