Image Carousel Thumbnail Slider with SwiperJS and ACF in WordPress

Here is a guide on how to make an image carousel thumbnail slider with SwiperJS and ACF in WordPress. (I have done a similar tutorial with LightersliderJS but that library is no longer updated). Using SwiperJS, I just want to display simple thumbnails below the main image which on click/touch show the image in the…

Read More

Image Carousel Thumbnail Slider with ACF Gallery Field in WordPress

Here is a guide on how to make an image carousel thumbnail slider with ACF in WordPress using the ACF gallery field. Lightslider, a lightweight image slider seems to fit the bill perfectly – I need it to just display simple thumbnails below the main image which on click/touch show the image in the main slide…

Read More

jQuery replace an image on click

swap image on button click with jquery

jQuery replace an image on click- example below, this is a method to swap numerous images in HTML by manipulating the images src attribute value from the click of another element such as a button. HTML <div class=”button-container”> <button class=”black-button”></button> <button class=”red-button”></button> <button class=”blue-button”></button> <button class=”yellow-button”></button> </div> <img id=”change-image” src=”/wp-content/uploads/2018/09/black.jpg” alt=”Black Image” /> jQuery jQuery(document).ready(function($){ $(‘.black-button’).on({…

Read More

Add and Show Featured Images in Taxonomy Templates and in Single and Archive Posts

show-category-image-on-posts

You can add a featured image to a Category Taxonomy in WordPress by using ACF and selecting the categories taxonomy, so now a new image field appears in the category back end page,  the same process can be applied to other taxonomy templates such as custom taxonomies. Create a ACF Image Field for Taxonomy  …

Read More

Add The Title Attribute To Featured Image in WordPress

add-title-attribute-featured-image

The title attribute for the WordPress featured post has been removed for a while, but you can get it back with the wp_get_attachment_image_attributes filter which can add the HTML attribute markup back in, add to your functions.php file…   add_filter( ‘wp_get_attachment_image_attributes’, ‘tl_add_img_title’, 10, 2 ); // Add title attribute to featured image function tl_add_img_title( $attr, $attachment…

Read More

Remove Unused Image Media Sizes In Your WordPress Theme

wordpress-media-library-sizes

Keeping your WordPress image media library under control can mean a big difference to your site loading faster as well as your hard disk size footprint with the ability to easily back up or migrate your site. You basically need to remove any unused image sizes and images themselves not used, optimise existing image sizes and ensure future…

Read More

Remove WordPress Default Image Sizes

remove-wordpress-default-images

WordPress image sizes contain defaults, small, medium and large as well as medium-large which is used in their implementation of responsive images. You can remove these default images with a WordPress filter intermediate_image_sizes_advanced Why you may want to do this could be that you definitely don’t need certain sizes or you are saving on web disk…

Read More

Add Multiple Site Background Images To Genesis Agency Pro Theme

You can add a multiple images as alternating site background images in the Genesis Agency Pro theme by tweaking the backstretch jQuery plugin that comes with the theme. Out of the box Agency Pro uses one master site background image as set in the Customizer, preferably at 1600 x 1000px. Prepare your images Get your images ready at 1600 x 1000px and…

Read More