How to install highlight.js on wordpress site?

[MrEidsen]

I am running a wordpress site with a thesis 2 theme, I installed the js file into a file on my server called “javascript” and I installed the .css file into a file called “styles” I then linked to both in the head scripts section of my thesis theme. But unfortunately nothing happens. I am completely sure that I am doing something wrong.
The <script> and <link> are both in the head section on every page.

The website does not offer very detailed instructions, and no one on the thesis theme forum has answered with a working solution either. The instructions mention to hook the highlighting to the page load event. I probably did not do this because I don’t know what that means. I am not a complete noob at this, but I definitely don’t know what I am doing here.

If someone could give me a bit more detailed instructions on how to go about setting this up, it would be very helpful and I would appreciate it. Whether it should be through the thesis theme or if I have to go into the custom_functions.php file and add something there… I am just a little lost. Thanks for any help from here :)

[Alen]

In your theme folder create two folders js and css place all the files from highlightjs into appropriate folders. Then place this in your functions file:

function my_cool_scripts_and_styles()
{
    /**
     *      OUTPUTS JAVASCRIPT: highlightjs
     *      wp_enqueue_script( $handle, $src, $dependency, $version, $in_footer );
     *      
     *      If you only need this to show up on certain pages wrap it in a wordpress conditional tag
     *      so for example:
     *      if ( is_page('some-page') ) { wp_enqueue_script... } <-- ended for brevity
     */
    wp_enqueue_script('highlightjs', get_template_directory_uri() . '/js/highlight.js', array(), '8.0', true);
    
    /**
     *      OUTPUTS CSS
     *      wp_enqueue_style( $handle, $src, $dependency, $version, $media );
     */
     // wp_enqueue_style( 'SET_NAME_HERE', get_template_directory_uri() . '/css/NAME-OF-THE-FILE.css', array(), '1.0', 'all' );
    
} add_action( 'wp_enqueue_scripts', 'my_cool_scripts_and_styles' );

Let me know if you have any questions.
-Alen

[MrEidsen]

Hello Alen, thank you for your reply.

Yes I do have a question… As I look through the file system here, under the thesis file has many scripts and text files, but only one folder called “lib” and under this folder has already a js file and css file.

So what I am asking is, if I include this script in my functions.php file, will it be searching for my javascript and the css file in the pre-made folders under the “lib” file of thesis? Or did you mean literally that I should create these js and css files in the theme folder itself (thesis)? It seems logical to me that I should put them in the pre-existing files under the lib folder… But I want to make sure, I just want to finally get this syntax highlighter working.

Thanks again

[Alen]

So what I am asking is, if I include this script in my functions.php file, will it be searching for my javascript and the css file in the pre-made folders under the “lib” file of thesis?

You can create as many folders and files in your theme folder, as you want. There’s no set conventions or rules. You just have to tell WordPress where to look for these files. And that’s what functions.php file is for. WordPress loads configurations from this file during the bootstrapping (start-up) process.

So based on the code I posted above, let’s go over each part. But first lets start backwards with this code:

add_action( 'wp_enqueue_scripts', 'my_cool_scripts_and_styles' );

In WordPress there are actions / hooks. It’s the way for you to “hook” into WordPress process, so that you can modify whatever WordPress core allows you to.

In the function add_action() first parameter is the “hook” and the second parameter is user defined function that is responsible for modifying the process. Which, conveniently we named 'my_cool_scripts_and_styles'.

So let’s see our function:

wp_enqueue_script('highlightjs', get_template_directory_uri() . '/js/highlight.js', array(), '8.0', true);

Our function calls another function named wp_enqueue_script which takes bunch of arguments. Let’s go over them:

1. 'highlightjs' is what we’re naming our script
2. get_template_directory_uri() . '/js/highlight.js' this is the code that tells WP where the file is located. The get_template_directory_uri gets the path to your theme folder, then we just add the rest of the path . '/js/highlight.js' so this is the path you need to modify depending on where you store the file.
3. array() this parameter is responsible for any dependencies, so if you need jQuery to run this JavaScript you would change this to array('jquery') this will automagically load jQuery every time highlightjs is requested.
4. 8.0 this parameter is just the file version number
5. true our last parameter tells this function where to output the file, if false script will be outputted in the head of the document, if true, like in our case, the script will be outputted in the footer.

I hope I didn’t confuse you even more.
-Alen

[John]

Are you using a child theme? You should be because if that theme gets updated, then stuff like the functions.php will get overwritten.

[Alen]

@John is right. If the theme you’re using follows certain conventions, make sure you follow them. Like John said, any updates to the original theme will override any changes. So make sure you read the documentation of whatever starter boilerplate you’re using.

[John]

https://codex.wordpress.org/Child_Themes

[MrEidsen]

It is still not working… hmm… And no you didn’t confuse me too much. I have been learning a bit of php and have a basic understanding of computer programming (with python… so I don’t know so much about server programming yet), however, I don’t know enough php to understand the code beyond your explanation.

I went into the functions.php file under my themes folder, and I wanted to ask, is it supposed to have only one line of code in it? As I opened it for the first time, it contains only the this line of code: require_once(TEMPLATEPATH . ‘/thesis.php’);

I don’t even know if I am even in the correct directory, but I am not completely computer illiterate so I imagine that isn’t the problem (hopefully). Hmm but I noticed under the folder “wp_includes” there is also a functions.php as well as “js” and “css” folders… Could it possibly be that I should write the code to this functions.php and put the js file and css file into these respective folders?

Anyway I copied and pasted your code into the functions.php file under the thesis theme file and changed the file names to link to the proper directory in relevance to the functions.php folder, and my code is exactly as this:
function my_cool_scripts_and_styles()
{
/**
* OUTPUTS JAVASCRIPT: highlightjs
* wp_enqueue_script( $handle, $src, $dependency, $version, $in_footer );
*
* If you only need this to show up on certain pages wrap it in a wordpress conditional tag
* so for example:
* if ( is_page(‘some-page’) ) { wp_enqueue_script… } <– ended for brevity
*/
wp_enqueue_script(‘highlightjs’, get_template_directory_uri() . ‘/lib/js/highlight.pack.js’, array(), ‘8.0’, true);

/**
 *      OUTPUTS CSS
 *      wp_enqueue_style( $handle, $src, $dependency, $version, $media );
 */
 wp_enqueue_style( 'syntax-highlight-style', get_template_directory_uri() . '/lib/css/railscasts.css', array(), '1.0', 'all' );

} add_action( ‘wp_enqueue_scripts’, ‘my_cool_scripts_and_styles’ );

If there is something wrong with the changes I made or if I missed a change, it would be very kind of you to point it out to me.

I also had a couple questions about the code here, did I need to fill out get_template_directory_uri() and put the file directory directly into the parentheses? Or is it concatenated with the . and plugged in that way? This is what I assume, I am trying to understand how this function works.

Also, how can I know if this uses jquery or not? I tried it with both settings, and it didn’t make any difference.

I apologize for the many questions in a single post… But I assume there is a rather large time difference between us, so I want to get as many questions and info as I can so this can be fixed faster… Thank you so much for your patience and help. I really appreciate it.

By the way, here is a link to a page that I have formatted the way which should use this syntax highlighter. Maybe it would help you to have a look at the code here?
http://webdev101.net/2014/how-to-code-simple-horizontal-navigation-bars/

[MrEidsen]

And thanks john, I will check that out too

[John]

Please post a link to the theme you are using.

[MrEidsen]

sure, I use thesis 2, here is a link to the website http://diythemes.com/

[OKStudios]

The functions.php file in Thesis 2 is actually named custom.php

It is located in (wp-content/thesis/skins/your_skin_name/custom.php). All files that are relative to your currently active skin are located in that same folder.

Although I now see you are using Crayon which is a much easier option.

Files stored in (wp-content/themes/thesis/…) are the core Thesis files and should not be edited. If you can remember what you altered there it might be advisable to change it back to how it was before, although those files may get overwritten at the next Thesis update.

Another way to undo any changes to the core files would be to FTP in to your server and overwrite any files you have changed in (wp-content/themes/thesis/) from a downloaded copy of the relevant version of Thesis to the one you are currently using.

[Author]

Posts