WP Clickable Background – WordPress Plugin

Blog Plugins

Wordpress Plugin in order to make the background of your website clickable.

I built a WordPress plugin that gives the possibility to make the background image clickable, I have worked on this plugin with the idea in mind that a plugin has to be the more possible standard in order to work with any existing WordPress theme, but I realized that making such plugin is virtually impossible as long as any theme has a different design and the background image is not always visible or clickable, most of the time the background image is coved by other HTML elements making the plugin useless. I manage to way around this problem giving the possibility to choose what HTML element trigger in case of click.


WP Clickable Background is a WordPress plugin that gives the possibility to make a chosen HTML element of your website clickable, you can select what element make clickable by CSS class, you can choose what page you want to open on click, you can select where you want to open the page (in the same page, on a new tab or a new window). You can also add your custom Javascript code on the footer (for instance a google analytics script to track the click).

Settings include:

  • Active/Deactive click
  • Element Class to trigger
  • The page where you want to redirect
  • Where to open the page
  • Custom Javascript section

WP Clickable Background settings


Download the plugin on your computer, explode the ZIP file on your plugin folder in your WordPress website. On your WordPress dashboard, go to Plugins => Installed Plugins, search for WP Clickable Background, and activate the Plugin.

DOWNLOAD WP Clickable Background Here

Here is the GITHUB repository of this project


The WP Clickable Background setting is on the WordPress dashboard on Settings => WP Clickable Background, please read the note on the top of the page. This plugin works only when the event click is direct on the element with the class specified on-field “Element Class” without any other HTML element on top of it, Please be sure that the chosen element is directly clickable.


  1. Many thanks for the article, I have a lot of spray lining knowledge but always learn something new. Keep up the good work and thank you again.

Click to Leave a Comment

You May Like

How to animate HTML elements and slide them in on mouse scroll using CSS and Javascript Today I want to animate a bunch of HTML elements and create an animation that moves them inside the same parent DIV once the elements are in the viewport, so only when the elements are visible to the users. […]

August 29, 2023

This tutorial will show you how to change your website cursor to any CSS shape and change the shape on hover on certain HTML elements. I have seen a lot of tutorials online about changing the HTML cursor to an SVG icon or to a PGN icon. In my case, I would like to change […]

October 15, 2022

Woocommerce Min Max Checkout is a plugin that extends your Woocommerce e-commerce in order to give you the possibility to set the minimum or maximum checkout amount or in order to set a minimum or maximum order quantity on the cart or checkout pages. With Woocommerce Min Max Checkout you can also set e customizable […]

February 12, 2022