I have always wanted to customize the admin section for the wordpress plugin that I create for my clients. Most of the times when I create a plugin, I use jQuery accordion as a navigation menu for the admin panel. This makes it look really cool. But we will not be looking at accordion for now.
The main topic of focus today is using custom check boxes. So instead of having the usual check box that you are used to, we are going to having something even cool. Check out the image below.
Now these check boxes are incorporated with CSS3. So let’s go about placing them in the admin section.
Head over to cssdeck, select your preferred check box and copy the style to your stylesheet in wordpress. I will be using slidethree in this case so i’l click code, and copy slidethree’s css.
Copy everything for slidethree.
create a checkbox that you want customized in the admin section. So in this case i’l open my plugin’s admin page and place the code. You can copy the code from cssdeck as well since the html attributes need to match the css for it to work.
<!-- Slide THREE --> <div class="slideThree"><input id="slideThree" type="checkbox" name="check" value="None" /> <label for="slideThree"></label></div>
Doing this will result in a checkbox inside of a div with a class of slideThree.
NOTE: This scheckbox won’t save be functional at the moment as far as saving options goes. I will assume you know how to register setting in wordpress and save options.
At this point if you head over to your admin panel, you will see a beautiful css3 check box, but it won’t be saving our changes yet.
here it what you will see.
It does not work, since when we try to turn it on in other words check the box, and save changes. The button will still be off.
So like I said, I won’t be going into registering setting in wordpress here, but if you want you can check out my cool video tutorial that will show you how.
So when I register setting and do the appropriate, I will end up with the above code edited as so;
<!-- Slide THREE --> <div class="slideThree"><input id="slideThree" type="checkbox" name="mycheckbox_setting[checkbox]" value="1" <?php checked(1,$myglobal_option['checkbox']);?>/> <label for="slideThree"></label></div>
the $myglobal_option is a global variable which hold the value of mycheckbox_setting.
$$myglobal_option = get_option['mycheckbox_setting'];
When all these is done correctly, you will be able to check and uncheck options by turning on and off the css3 checkbox.
Make sure you watch the tutorial on plugin development if you don’t understand any of these. If you have any question post them in the comment section i’l be more than happy to answer them.