I have this block of codes :
<div class="services">
<div class="grid grid-pad">
<?php
query_posts(array('post_type' => 'services', 'posts_per_page' => -1));
while (have_posts()) : the_post();
?>
<div class="col-1-3 tri-clear">
<div class="single-service">
<i class="fa <?php echo types_render_field("icon", array("output" => "raw")); ?> service-icon"></i>
<?php the_title('<h3 class="service-title">', '</h3>'); ?>
<?php the_content('<p>', '</p>'); ?>
</div>
</div>
<?php endwhile; ?>
<!-- how to add button here? -->
</div>
</div>
I want to add <button>Contact Us</button> there (place I marked). for a reason I cannot edit the source code, but I can add custom javascript (using jQuery) to add the button. How to achieve it?
Thanks for your advise.
Try this code:
jQuery('.services .grid.grid-pad').append('<button>Contact us</button>');
use .append on the parent. this will add it as a last child.
$('.grid-pad').append('<button>Contact Us</button>')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="services">
<div class="grid grid-pad">
<div class="col-1-3 tri-clear">
<div class="single-service">
<i class="fa service-icon"></i>
</div>
</div>
<div class="col-1-3 tri-clear">
<div class="single-service">
<i class="fa service-icon"></i>
</div>
</div>
<div class="col-1-3 tri-clear">
<div class="single-service">
<i class="fa service-icon"></i>
</div>
</div>
<!-- how to add button here? -->
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With