I recently set up a page on my WordPress site using the Twenty Seventeen theme.
At the top of the page, I created a toolbar for users to easily adjust the font size and background color. Check out the image below for reference: See Image for Bar
Here's the code for the toolbar:
<table>
<tbody>
<tr>
<td>Change Background</td>
<td><img id="button_colour_yellow" class="aligncenter size-full wp-image-2080" src="Colour-FFFFDB.png" alt="" width="28" height="28" /></td>
<td><img id="button_colour_red" class="aligncenter size-full wp-image-2079" src="Colour-FFCCFF.png" alt="" width="28" height="28" /></td>
<td><img id="button_colour_blue" class="aligncenter size-full wp-image-2078" src="Colour-E6FFFF.png" alt="" width="28" height="28" /></td>
<td><img id="button_colour_green" class="aligncenter size-full wp-image-2077" src="Colour-CCFFCC.png" alt="" width="28" height="28" /></td>
<td><img id="button_colour_black" class="size-full wp-image-2076" src="Colour-000000.png" alt="Colour 000000" width="28" height="28" /></td>
<td></td>
</tr>
</tbody>
</table>
To make the background color toggle, I've included some CSS styles:
.Background_Black{
background-color: black;
color: white;
}
.Background_Yellow
{
background-color: #ffffdb;
color: black;
}
.Background_Green
{
background-color: #ccffcc;
color: black;
}
.Background_Red
{
background-color: #ffccff;
color: black;
}
.Background_Blue
{
background-color: #e6ffff;
color: black;
}
The idea here is that when someone clicks on an image in the toolbar, the color will switch accordingly.
I added JavaScript scripts to the JS folder in my WordPress installation:
$("button_colour_black").click(function(){
$(this).toggleClass("Background_Black");
});
$("button_colour_green").click(function(){
$(this).toggleClass("Background_Green");
});
$("button_colour_blue").click(function(){
$(this).toggleClass("Background_Blue");
});
$("button_colour_red").click(function(){
$(this).toggleClass("Background_Red");
});
$("button_colour_yellow").click(function(){
$(this).toggleClass("Background_Yellow");
});
Unfortunately, when I click on the images in the toolbar, nothing happens. I'm not very experienced with programming and I'm new to JavaScript, so I'm not sure what's wrong with my code. Any help would be greatly appreciated!
I did browse through similar forum posts, and they suggested that this setup should work. Is there something obvious that I'm overlooking?