How to use Readmore.js in WordPress

I am, by no means, an expert on anything, particularly WordPress, but I recently cracked the code for a script that I wanted to implement, and I felt I would share it with the world. Hooray, open source communities!

If there is a better way of implementing this script, please let me know in the comments.  I’m more of a “hack my way” through things front-end developer, so I definitely do not always do things the right way, for sure.

The Problem to Solve

So I’ve been developing a new institutional website for my day job over the last few months, using WordPress as the CMS to wrangle all this content.  It’s been a great and challenging experience building this theme from the ground up! The current site has a whole host of problems, built on an old .NET solution for whatever reason, and is a pain to use, update and navigate.

Research to improve lives

One of our goals for the new site was to convey that we not only were a social science research center able to meet deliverable demands in RFPs, but a group of professional, individual experts that get alongside our clients to help them reach their goals.

We are a center in the business of creating research to improve lives and we wanted to make sure that was clear with our web presence.  Highlighting the areas of expertise of our researchers and staff was the solution to this problem.

User Tags

To implement areas of expertise for our researchers, I used this WP plug-in called User Tags to manage the taxonomy of each WP user. Though it has a lot to be desired and does require a lot of customization for taxonomy archive pages, it has, so far, been a great tool at wrangling a taxonomy specific to users.  It inserts a feature on User Profile pages and is easily called elsewhere in themes.

I built a page in WP to show all my users and used User Tags to generate this nifty list of tags at the top of the page:

Expert Tags generated using the User Tags WP plugin

But it was very apparent that the list was waaaaay too long to sit at the top of that page, and had the possibility of getting longer.  So I needed a way to show/hide the content, with the user in control of the expanding/collapsing.

My Solution

Using a great jQuery plug-in called Readmore.js, I was able to create an expanding div with a button so users could look at all the tags:

Expanding tag list

Here’s how I did it!

1. Download Readmore.js

I found this awesome jQuery plug-in called Readmore.js from this dude, Jed Foster.  It’s super slim, fast, and builds off basic jQuery.

I downloaded the readmore.min.js file of this plugin and placed it in my theme’s js folder using Atom:

readmore.js in Atom

2. Add a class identifier to the expanding div

My expert areas (those blue boxes with the tags) live in my WP theme in a div with the class expert-topic-filters.  This is a div that lives above all the photos of my users that I’ve set up like a list of filters to show only users who are experts in specific areas.

screen-shot-2016-10-21-at-12-07-02-pm

These are generated using the WP function for getting a taxonomy, built using User Tags.  I have all the code for generating the filters here:

      ‘; //create the list

 

‘;
foreach ($terms as $term) { //put them in a list
echo ‘

‘; //give each term a

  • and format it
    }
    echo ‘

    • using Bootstrap

 

I’ve used a class here to style the filters, along with some Bootstrap classes, but you can also identify whatever you’d like to expand/collapse using an ID.

3. Add readmore class to filters div

Next, you’ll add the readmore class to your collapse div:

This talks to the script and enables the expand/collapse functionality.

4. Create your jQuery function for this div

In addition to the readmore.js script, we’ll create a special .js file that contains the jQuery function specifically for the div we have above.

Create a new JavaScript file in the theme’s js folder.  I called mine readmore-function.js:

screen-shot-2016-10-21-at-12-41-18-pm

This is where you will write your basic jQuery function for the expanding div.

jQuery and WordPress

If you already know a bunch about jQuery, hooray! If you don’t, like I did, I had to do some trial and error to figure out how to get WordPress to run a jQuery function.  I finally found this tutorial that explains you basically change all of the $ in jQuery functions to simply jQuery.  We’ll call these scripts using the wp_enqueue_script() function in our functions.php file.

5.  Write your jQuery Script

In the readmore-function.js we just created, I used the documentation from the script to add the readmore function to our div using it’s class:

Notice that the $‘s have been replaced with jQuery to run in WordPress.

6. Call your script in your functions.php

Once you have your scripts, we’ll add two functions to the function.php of your theme to load them.

Add the readmore.min.js file

Add the readmore-function.js file

And here’s what we get!

But this isn’t quite right.  I want do a few things to our script to customize it to my purposes:

  1. Change the Read More text to a button with arrows, centered under the filters
  2. Make the max-height of the collapsed div smaller to save space
  3. Add a border to the bottom of the collapsed div

7. Customizing your options

There are plenty of options for customizing how your div collapses and expands.

I needed to change a few of these options to fit my purposes:

  1. speed // how fast it expands
  2. moreLink // what the expand link says
  3. lessLink // what the collapse link says
  4. embedCSS // does your stylesheet elsewhere control this script? 
  5. collapseHeight // max-height for div before it hides the rest of the content

Using some Bootstrap classes, here’s how I set my options:

The moreLink and lessLink have been transformed into a button with an arrow using Bootstrap, I’ve shortened the default height of the div and told the function to using formatting in the stylesheet as well:

screen-shot-2016-10-21-at-1-12-27-pm

I’ve also added both a title= and alt= attribute to the links to insure they’re accessible.

8. Customizing with CSS

While a lot of the formatting is can be done within the function, some is down using CSS. I still need to:

  1. Add a border along the bottom of the filters
  2. Change the width of the button so it doesn’t appear the whole width of its container.

Add the border

We’ll add a faint border to the .expert-topic-filters div:

Change width of button

Because we use the center-block Bootstrap class to center the button, the button then goes the entire width of its parent.  Instead, I want it to appear in the center, but much narrower.

I just need to change the width: of the <a> using the [data-remore-toggle] in my stylesheet:

By default, the width of the moreLink and lessLink is set to 100%.  Here’s we set it to 5%, and our button shrinks right to the right size:

screen-shot-2016-10-21-at-1-18-21-pm

We can also use a  @media query to adjust the width of the button so it doesn’t cut off one side on mobile as well:

And it looks like this:screen-shot-2016-10-21-at-1-19-29-pm

That’s it! If you have any thoughts of how this could be done more efficiently, let me know in the comments!

 

← Previous post

2 Comments

  1. Good job figuring this out. I bet it was a lot of fun trial and error.

    If you pass $ into your ready function you can use the $ shorthand again…
    This jQuery(document).ready(function() { becomes jQuery(document).ready(function($) {

    You don’t need to call wp_enqueue_script('readmore-js'); twice. The first time is good. You can call wp_register_script() and then enqueue it in different places in your theme. What you’re doing registers and enqueues the script in one go.

    You can also register readmore-js and make your readmore-function-js script depend on readmore-js being loaded first like so…

    Now you can just call wp_enqueue_script('readmore-function-js'); wherever you want that code to be loaded and both Readmore-js and your Readmore-function-js file will be loaded.

    Speaking of enqueueing, since you’re only using Readmore.js in one place you can enqueue it just for that page by registering the script first, then calling wp_enqueue_script('readmore-js'); within your template where it will be used. No need to load additional JavaScript files for a page if they’re not being used.

    Here’s a good article about enqueueing that goes in to way more depth https://premium.wpmudev.org/blog/adding-scripts-and-styles-wordpress-enqueueing/?npl=b&utm_expid=3606929-89.qobzZlXrS1uV61bna13Vlw.1&utm_referrer=https%3A%2F%2Fwww.google.com%2F

    • Thank you, Russell!! I had a feeling you would have lots of wisdom to impart on a project such as this. I’ll definitely have to slim down the calls.

Leave a Reply