Discussion between AlxVallejo and Jared

Stack Exchange

17:29

0

As kaiser pointed out, you should not add or edit any files in the WP core, so enqueueing a script from wp-includes is a no-no. Also, your jQuery is not being run properly. As with all jQuery, you should use something like this when the DOM is ready: <script> jQuery(document).ready(fu...

AlxVallejo

thanks for this. I've updated the question. I'm not sure why you would put the jquery tree files in the plugin directory. I placed them in a /js/ folder inside my child theme directory. I'm wondering whether Suffusion requires jQuery to go in the backend of that theme (not sure if you're familiar). Just by examining the source of the wp_list_pages, I can see that neither class nor attribute was applied.

Jared

@AlxVallejo I used a plugin directory as an example, but you can switch it with many different functions, like one you used in your updated question. Another one could be get_bloginfo('template_url');. Can you use Google Chrome to view the page then click the little wrench at the top right and go to Tools > Javascript console and see if there are any errors there?

AlxVallejo

I'm getting zero errors: screencast.com/t/DrlYAKzZ5

Jared

@AlxVallejo If you click on the Console tab it should show you if there are any errors. If not, I'm guessing the jQuery is running but not finding any ul's for some reason. Can you verify that the scripts are being enqueue'd in the source code?

AlxVallejo

Still none. Maybe I should place the script right before the wp_list_pages? Can I include the script in the wp_enqueue_script? Or should I put it in the .js file? screencast.com/t/ihoiAWwAp6Z

Jared

17:29

@AlxVallejo The codes I posted above should be in functions.php only, that is where all of the good stuff goes (actions, filters, custom code, etc.). If your theme doesn't have a functions.php file, create one in the main directory of your theme with the code you are trying to get to run in it.

AlxVallejo

I moved this to a chat

Hope you don't mind

Jared

No problem

So are you trying to run the scripts in your header.php file?

AlxVallejo

noo

I have a custom template I'm using for a custom post type

So I have something like:

<?php
/**
* Template Name: Taxonomy List Test 01
*
* @package Suffusion
* @subpackage Templates
*/
//wp_enqueue_script("jquery");
wp_enqueue_script("av_jquery_tree");
get_header();
?>

Jared

When you enqueue a script or any type of action/filter, it goes in functions.php

If you move those to functions.php it should start loading the scripts.

AlxVallejo

hold on I'll try

Jared

17:39

Since the custom page template only runs when it's called, functions.php runs before it all

AlxVallejo

I placed this in the functions.php of my child theme:

And av_jquery_tree() is set as a plugin

Jared

Your functions.php file should contain code like this:

function my_enqueue_scripts() {
wp_enqueue_script( "jquery" );
wp_enqueue_script( "jquery-treeview", plugins_url( 'jquery.treeview.js', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

Of course changing the path to the files

AlxVallejo

Ok hold on. It may be just the order in which my plugins loaded. I'll try your method first though

Don't I need to register the script first?

Jared

When add_action is called, it adds your function to the wp_enqueue_scripts hook, thus including these script files wherever wp_head() is called

You can, I think it works either way

If you look at the page source you should see some code like <script type="javascript/text" src="http://wherever.your/script/is.js"></script> near the top

AlxVallejo

Ya, they're there

What about the actual jQuery in my template?

I just placed this right before I called wp_list_pages

Jared

17:50

Take the script tags off there (<script>, </script>), put it in a .js file and enqueue it like you did the others

AlxVallejo

alright

Jared

Note that you can use a conditionals to make sure a user is on a certain page before it enqueue's the scripts. Like this:

function my_enqueue_scripts(){
if( is_page_template( 'template-name.php' ) ) {
// enqueue scripts here
}
}

Where template-name.php would be one of the files in your theme folder

AlxVallejo

So I think by switching the filename from jquery.treeview to jquery-treeview, I was able to remove the red lines

Oh nevermind, I had to change the css file

Red lines are back

Jared

18:06

Well the file name should have nothing to do with it. When you register a script you are assigning a slug to it, example: jquery-treeview You can then use that slug to enqueue it or deregister it

AlxVallejo

Is the handle on the wp_enqueue_script also irrelevant since we're calling all the scripts and not one in particular?

Actually wait

Jared

I would suggest reading this: codex.wordpress.org/Function_Reference/add_action to see how add_action works

AlxVallejo

function av_jquery_tree() {
wp_register_script('jquery-treeview', get_bloginfo('stylesheet_directory') . '/js/jquery-treeview/jquery-treeview.js', array('jquery') );
wp_register_script('jquery-cookie', get_bloginfo('stylesheet_directory') . '/js/jquery-treeview/lib/jquery-cookie.js', array('jquery') );
wp_register_script('modify-list-pages', plugins_url() . '/av-jquery-treeview-hook/modify-wp-list-pages.js', array('jquery') );
wp_enqueue_script('jquery');
wp_enqueue_script('jquery.treeview');
wp_enqueue_script('jquery.cookie');

that's how i'm currently setup

Whoops

function av_jquery_tree() {
wp_register_script('jquery-treeview', get_bloginfo('stylesheet_directory') . '/js/jquery-treeview/jquery-treeview.js', array('jquery') );
wp_register_script('jquery-cookie', get_bloginfo('stylesheet_directory') . '/js/jquery-treeview/lib/jquery-cookie.js', array('jquery') );
wp_register_script('modify-list-pages', plugins_url() . '/av-jquery-treeview-hook/modify-wp-list-pages.js', array('jquery') );
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-treeview');
wp_enqueue_script('jquery-cookie');

ignore the first

Jared

wp_register_script('modify-list-pages', plugins_url() . '/av-jquery-treeview-hook/modify-wp-list-pages.js', array('jquery') );

This won't work

To enqueue a script from a plugin, you need to enqueue it from that plugin, or use a different path to get that file

codex.wordpress.org/Function_Reference/plugins_url

Possibly enqueue jQuery first

Oh nevermind you are doing that

AlxVallejo

kk

Jared

18:15

So for plugins_url you would do something like this to get a file from a different plugin:

plugins_url( 'path/in/plugin/file', 'plugin-slug' );

Sorry,
plugins_url( 'path/in/plugin/file.js', 'plugin-slug' );

AlxVallejo

Since it's not a function I'm referencing do I need to activate the plugin?

Actually

there is no plugin

since its just a .js

Jared

Ok yeah then you would just put that js file in your theme as well

AlxVallejo

So, updated:

@Jared I thought I enqueue the script on this command: wp_enqueue_script('av_jquery_tree');

Jared

18:35

What do you mean

AlxVallejo

function my_enqueue_scripts(){
if( is_page_template( 'template-name.php' ) ) {
// enqueue scripts here
}
}

this function

Is that necessary?

Because in my template

<?php
/**
* Template Name: Taxonomy List Test 01
*
* @package Suffusion
* @subpackage Templates
*/
wp_enqueue_script('av_jquery_tree');
get_header();
?>

So I'm running the scripts only if I specify wp_enqueue_script('av_jquery_tree');

Jared

That should not be there: wp_enqueue_script('av_jquery_tree');

Read the documentation on these functions very carefully

codex.wordpress.org/Function_Reference/wp_enqueue_script

I don't think you understand completely how these hooks and functions work

AlxVallejo

Well yes and no

add_action('wp_enqueue_scripts', 'av_jquery_tree');

adds the av_jquery_tree to wp_enqueue_scripts

so is wp_enqueue_scripts run by default before the header?

Jared

wp_enqueue_scripts() is run by wp_head()

And add_action( 'wp_enqueue_scripts', 'some_function' ); adds an action onto wp_enqueue_scripts so that it gets run along with it

AlxVallejo

Right

And wp_head is run by get_header() in this case, but I'm still not getting the output I need

Jared

18:48

Can you verify the scripts are being enqueue'd? ie. Looking at the source code and you see the <script .... > for each script?

Also verify that the class and ID is being set to the <ul>

You need to set wp_head() in header.php manually if it is not already present in there

get_header() simply includes header.php wherever it is called

wp_head() should already be there though

AlxVallejo

it is

the scripts are being enqueue'd

One concern is that the output attaches some default version: jquery-treeview.js?ver=3.3.1

and the <ul class="treeview-red"> is definitely not being set

neither is the id attribute

Instead it's more like:

<div id="treecontrol">

<a title="Collapse the entire tree below" href="#"> Collapse All</a> |

<a title="Expand the entire tree below" href="#"> Expand All</a> |

<a title="Toggle the tree below, opening closed branches, closing open branches" href="#">Toggle All</a>

</div>

<li class="pagenav">Pages<ul><li class="page_item page-item-4393">

but the treecontrol div is not even being shown

Jared

The version doesn't matter on the end of the script

Is there even a <ul> on the page to modify?

AlxVallejo

Well yes, at the first instance a page has children:

So I wonder if my script is wrong

since there was a <ul> right after <li class="pagenav">Pages at the start of the wp_list_pages

Jared

Can I see the HTML markup of your <ul> and its children

Possibly the parent element of the <ul>

AlxVallejo

Sure hold on

I need to protect some of this so I've trimmed the URLs:

Here are the scripts in the header:

Actually hold on

screencast.com/t/hUifq2f170y

One thing i noticed is that in the top left hand corner there is an extraneous ?>

floating

Jared

19:16

Its not letting me see the image. But anyways, I think the jQuery you are using to add the ID and class is now not working

Since all the scripts are enqueue'd, it should be working

Unless there is some error in the code you used

instead of jQuery('ul').first() try jQuery('ul:first-child')

AlxVallejo

What about loading the css script in the same function

Jared

You can use wp_enqueue_style( 'style-slug' );

It goes in the same hook, wp_enqueue_scripts

Same as wp_enqueue_script except for a stylesheet

AlxVallejo

oh shit

what about the actual script

I need that in there too right?

except replace #mymenu with #red

but if the ids and classes aren't being assigned it wont matter

Are we positive that this is the correct syntax?

Jared

19:36

Your scripts are enqueueing correctly. Can you check the Console tab of the Javascript Console in google chrome again?

AlxVallejo

i just got it

Jared

Its working now

?

AlxVallejo

yes

All I had to do

// JavaScript Document
jQuery(document).ready(function(){
jQuery('ul:first-child').attr('id', 'red').addClass('treeview-red');
jQuery("#red").treeview({
animated: "fast",
collapsed: true,
control: "#treecontrol",
}
);
});

Jared

Ahh great

AlxVallejo

and keep that consolidated in my modify-wp-list-pages.js

I'll brb

whats ur email for future reference

I think I owe you a beer

Jared

19:45

[email protected] - Don't worry about it hah glad to help out

I'll update my answer with a suitable solution if you want to accept it

AlxVallejo

yes absolutely

Transcript for

Discussion between AlxVallejo and Jared