• Hi,

    I am using the Quill theme (http://demo.athemes.com/quill/), the services are set up so that when you click the ‘read more’ button on the front page it brings you to the individual service. I would like it bring you to the services page.

    The way I am thinking of doing this is to use javaScript to change the link destination. Could someone advise me on how to do this as the only way Iv found with it is by getElementById which would work but this is a class of buttons I want to change and Im not sure how to ‘getElementByClass’.

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • Id’s are unique, classes are not unique. So getElementByClassName returns an array.

    Here is a generic example:

    var classes_array = document.getElementsByClassName('your-class');
    
    for(var i = 0; i < classes_array.length; i++) {
    classes_array[i].style.display = 'block';
    }

    Hope that helps a bit.

    I believe Quill is a premium theme. Don’t you have pro support from them? They will be able to help you better or give you an alternate idea.

    Thread Starter DanielGarland

    (@danielgarland)

    Hi Arun, thanks so much for your reply. No it is a free theme 🙂 and I posted over a week ago on the forum there so I think they wont get back to me..

    Would you be able to write for me the code that would target an example class of buttons to an example link?

    Thanks!

    Hey Daniel,

    I was under the impression that you would be able to handle it yourself. A better way to do it is by editing the home page template of the theme and change the Read More links in PHP. Doing it via JS is not the most elegant solution.

    I took a quick look and the Read more link is generated in quill\widgets\fp-services.php

    These lines:

    <div class="service col-md-4 col-sm-6 col-xs-6 wow rotateInUpLeft">
    	<span class="service-icon"><?php echo '<i class="fa ' . esc_html($icon) . '"></i>'; ?></span>
    	<h4 class="service-title"><?php the_title(); ?></h4>
    	<div class="service-desc"><?php the_excerpt(); ?></div>
    	<a class="read-more buttons" href="<?php the_permalink(); ?>"><?php echo __('Read More', 'quill'); ?></a>
    </div>

    You can directly edit the file and replace <?php the_permalink(); ?> with the link to your services page.

    Editing the file directly would mean that when you update the theme, you will loose your edits. To counter that you can create a child theme and copy contents of fp-services.php into the child theme’s functions.php. Then you will have to rename the classes and functions so that they are unique (or else you will get an error saying they are redeclared).

    Hope you get the general idea.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Using javaScript to change a button class destination’ is closed to new replies.