How can I add a custom checkbox / radio button on the admin theme options to display a CSS or other?

I need to display a custom checkbox / radio button on Twenty Sixteen's options which the administrator can select to display one of few custom CSS for example, to change the base colours of this theme. Someone has any idea that how can I do that functionality?

Topic theme-twenty-sixteen functions theme-development plugins themes Wordpress

Category Web


This is a fairly broad question. There are many approaches thinkable, but here is the lay-out for an easy one:

  1. Build a child theme, consisting only of a style.css.

  2. Find the id of the highest level wrapper in the theme, let's say 2016id

  3. In style.css add style rules that depend on the class of the wrapper, like #2016id.style1 .widget h2 {color:red;} and #2016id.style2 .widget h2 {color:yellow;}

  4. Now you have to add a buttons to toggle the class like this: <a onclick='document.getElementById("2016id").classList.add("style1").remove("style2")'> Show style 1</a>. The simplest way to add it is to put it in a text widget that you include in your sidebar. Else you'll have to copy a template file to your child theme folder and edit it.

Read more about adding and removing classes on elements.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.