Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Posted July 9, 2015 9:02am by

Customising the twentyThirteen theme.

I'm trying to customise a the twentyThirteen theme, and I'm using a child theme.

I want to make the nav a sticky header. I have the jQuery to do it. But I'm unsure where I put it. Do I put it in the child theme or the parent theme?

Also, when I copy the functions.php from the parent theme to the child theme, and add the enqueue script code to add the stickyHeader js, everything goes blank.

So in sum I'm unsure of where to put the jQuery, and what the situation is with the functions.php

ANy help is greatly appreciated.

2 Answers

July 9, 2015 12:10pm

Hi Gabriel :)

All seems to be working here now as explained below:

Issues found that were throwing us off- -- On Guils pen his header is separate from his nav however on the twenty thirteen theme the nav section is contained by the header. -- As this is a child theme using "get_template_directory_uri()" took the file path back to parent theme file so that needed a little tweeking. -- From there the opacity and z-index of #navbar had to be adjusted to render properly.

The solution is as follows:

-- style.css file

#navbar {
    opacity: 1;
    z-index: 1000 !important;
}

.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
}

-- functions.php file

<?php

  function child_theme_js() {

      wp_register_script( 'child_theme_js', get_template_directory_uri() . '-child/child.js', array('jquery'), '', true );
      wp_enqueue_script('child_theme_js');

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

?>

-- child.js file

jQuery(document).ready(function ( $ ) {

    var mn = $("#navbar");
        mns = "main-nav-scrolled";
        hdr = $('header').height() - $('#navbar').height();

    $(window).scroll(function() {
        if( $(this).scrollTop() > hdr ) {
            mn.addClass(mns);
        } else {
           mn.removeClass(mns);
       }
    });

});

The file tree is as follows:

twentythirteen-child (folder)

child.js

functions.php

style.css

Hope this gets you moving when you get back to it :) Craig

July 9, 2015 10:40pm

Hi Craig,

Thanks so much for you help. At first I couldn't get it working but then I realised it was because I had my folder/file structure wrong. I had a child.js folder in the twentythirteenchild theme folder and then inside that a child.js file. I got rid of the child.js folder and put the child.js file directly in the twentythirteenchild theme.

Is it convention to have a child theme folder named like you do, twentythirteen-child? I changed my child theme folder name to that and lost all of my styling.

Do you have a website?

Anyway thanks so much :)

July 9, 2015 9:21am

Hi Gabriel :)

In your new file structure for your child theme, simply create a JS folder and put your file in there. So you would kind of end up with this type of thing....

js(folder)
functions.php
style.css

Im sure because you are using a child theme you dont need all the code copied over, you can simply write your own enqueue function in your functions.php for your js and then call that function. Be sure to name space that function like "child_js_files" for example to avoid conflict with parent.

It may have gone blank as the parent code you copied will have been over ridden of sorts from the child which will have thrown off all the file paths to those parent theme files.

I also no Guil Hernandez made a sticky nav demo here if you want to give it a go writing it yourself.

Hope this helps :)

July 9, 2015 9:30am

Hi Craig,

Here is the code in my functions.php child theme file

<?php
/**
 * Twenty Thirteen Child functions and definitions
 *
 * Sets up the theme and provides some helper functions, which are used in the
 * theme as custom template tags. Others are attached to action and filter
 * hooks in WordPress to change core functionality.
 *
 * When using a child theme (see https://codex.wordpress.org/Theme_Development
 * and https://codex.wordpress.org/Child_Themes), you can override certain
 * functions (those wrapped in a function_exists() call) by defining them first
 * in your child theme's functions.php file. The child theme's functions.php
 * file is included before the parent theme's file, so the child theme
 * functions would be used.
 *
 * Functions that are not pluggable (not wrapped in function_exists()) are
 * instead attached to a filter or action hook.
 *
 * For more information on hooks, actions, and filters, @link https://codex.wordpress.org/Plugin_API
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */

/*
 * Set up the content width value based on the theme's design.
 *
 * @see twentythirteen_content_width() for template-specific adjustments.
 */


function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/js/stickyHeader.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

I'm still having the same problem of the screen going completely blank.

July 9, 2015 9:45am

Looks like there may be a little error in your function when calling the directory for the files, maybe try "get_template_directory_uri()" instead of "stylesheet".

<?php

  function child_theme_js() {

      wp_enqueue_script( 'child_theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true );

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

?>

This will link to a js folder in your child theme :)

But if you are still getting errors let me know and im sure we can get it going WordPress can be very specific to what code needs to be ran to work smoothly.

Craig

July 9, 2015 9:56am

Ok great it seems to be all hooked up. Now I'm having problems with my jQuery. The console it telling me that document.ready is not a function.

Here's my header.php

<header id="masthead" class="site-header" role="banner">

            <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
                <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
            </a>
            <div id="navbar" class="navbar">
                <nav id="site-navigation" class="navigation main-navigation" role="navigation">
                    <button class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></button>
                    <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
                    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
                    <?php get_search_form(); ?>
                </nav><!-- #site-navigation -->
            </div><!-- #navbar -->
        </header><!-- #masthead -->

Here's my stickyHeader.php

$( document ).ready(function() {
var  mn = $("#navbar");
    mns = "main-nav-scrolled";
    hdr = $('header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > hdr ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});

} );

July 9, 2015 9:59am

This is where I got the code

http://codepen.io/Guilh/pen/JLKbn

July 9, 2015 10:08am

Ahhh this is something I often tripped up on at first with WordPress, wrap your js inside this:

jQuery(document).ready(function ( $ ) {

});

So your js code would be :

jQuery(document).ready(function ( $ ) {

    var  mn = $("#navbar");
           mns = "main-nav-scrolled";
           hdr = $('header').height();

    $(window).scroll(function() {
        if( $(this).scrollTop() > hdr ) {
            mn.addClass(mns);
        } else {
           mn.removeClass(mns);
       }
    });
});

Also if this is what looks like the guil snippet be sure to include the css I didn't mentions that before sorry.

.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
}

Please let me know if you are still not getting this to work we will get to the bottom of it :) Craig

July 9, 2015 10:11am

Hmm now I'm getting $jQuery is not defined.

July 9, 2015 10:18am

Hmm that is a little strange, I will get a working version going now with that theme and fire you over the code to be sure im not missing anything :)

July 9, 2015 10:20am

Oh great, that'd be wonderful.

Are you a pro developer?

Also, it's late where I live, so I have to go to bed soon. So probably may not respond until tomorrow.

July 9, 2015 10:42am

No problem, I'm happy to help!

No not for a specific company or design studio just as what you may call a freelancer I suppose.

That's fine it will take a little while to get the theme set up but I should be able to help you out :)

Craig

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Gabriel Ward

Gabriel Ward

Customising the twentyThirteen theme.

2 Answers

Craig Watson

Craig Watson

Gabriel Ward

Gabriel Ward

Craig Watson

Craig Watson

Gabriel Ward

Gabriel Ward

Craig Watson

Craig Watson

Gabriel Ward

Gabriel Ward

Gabriel Ward

Gabriel Ward

Craig Watson

Craig Watson

Gabriel Ward

Gabriel Ward

Craig Watson

Craig Watson

Gabriel Ward

Gabriel Ward

Craig Watson

Craig Watson