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.

You May Like

Today we try to analyze the error that appears on the browser inspector and that is a bit tricky to fix and we try to understand what is causing the error, the error is called “Failed to load resource: net::ERR_BLOCKED_BY_CLIENT“. This error is always followed by an URL, this URL is the link that has […]

May 28, 2021
how to freeze the first row and the first column of an HTML table

I was working on an HTML table that displays a list of users and user permission, the first row displays the permission names and the first column displays the name of the users involved. I have noticed that when I strolled toward the right I couldn’t see the user names and scrolling toward the bottom […]

May 28, 2021

The Fullscreen Any Element Plugin uses the Javascript Fullscreen API in order to make any chosen HTML element on your website in fullscreen. The Fullscreen API adds methods to present a specific Element (and its descendants) in full-screen mode, and to exit full-screen mode once it is no longer needed. This makes it possible to […]

May 24, 2021


  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.

Leave a Reply to Anatomia Cancel reply