If you’re customizing your site in a way that require site-wide options to be managed in the backend, it’s a good idea to use the Genesis Theme Settings page rather than create a separate backend page specifically for your feature. This keeps all theme-related settings in a single location.
I’m going to walk you through creating your own theme options for Genesis. I’ll be adding a Social Settings box that allows you to specify a Twitter and Facebook URL, to be used in the nav menu of the theme.
Set up Defaults
The default values are what the fields will be set to when a user clicks “Reset Settings”. I’m just going to use blank values, but you could use whatever you like.
Sanitization
One of the major improvements to Genesis in the 1.7 release is the addition of a Sanitizer class. Mark Jaquith, a lead developer of WordPress, was hired by StudioPress to conduct a security audit, and this was one of the results.
The Sanitizer class makes it easy to ensure only the specific types of data you want can be saved in your theme settings. This prevents someone from dropping malicious scripts into one of your theme settings. For more information, watch this Theme & Plugin Security presentation.
By default, Genesis comes with four sanitization filters: one_zero, no_html, safe_html, and requires_unfiltered_html. These should cover almost anything you need to do, but if you did want to add something to this list you could use the genesis_available_sanitizer_filters filter (see /lib/classes/sanitization.php).
We’re going to use the no_html filter.
Register Metabox
We’ll use the add_meta_box() function to add a metabox to the Theme Settings page. You can look in /lib/admin/theme-settings.php for more examples:
Create Metabox
Our add_meta_box() function basically says “Stick the metabox the the be_social_settings_box() function on the Theme Settings page.” Now we have to create that function.
For more examples of metaboxes, see /lib/admin/theme-settings.php.
Putting it all together
Since there’s a lot code, I recommend putting it in a single file. Inside my child theme I’ve created /lib/functions/social-settings.php, and this is the contents:
Pritam @ Specky Geek says
Hi Bill,
Thanks for this useful tutorial. I am relatively new to Genesis framework. So this will come handy.
Nicholas Williams says
Great tutorial! One question. I have it set up so I have a field that would accept a shortcode. Then i want what is output in that to show up in a function used to show a slider on a template. Is that possible?
Thanks
Bill Erickson says
When you’re outputting it in your template, wrap the outputted code with do_shortcode().
Shashank Bhattarai says
It is not available in genesis 2.0.1. I am trying to add social icons in author box area as well but code is not being executed help ..!!
Ej Alvarez says
Hi Bill Thanks for this!
At first, I tried copying your code and save it to a file named social-settings.php and uploaded it to my child theme /lib/functions/ folder. However when I tried it, it doesnt work so I included the social-settings.php in my child theme’s function.php by inserting “include ‘lib/functions/social-settings.php’;” and it worked. Anyway just in case someone will have trouble as what I experienced so just sharing what I did..again thanks for the code!!! I’m using Genesis 2.0x btw.
Cheers!
Purushottam Kadam says
Yes this is a first important things to do just after installing theme for better customization
it plays awesome role in SEO of blog … i like genesis because it is very user friendly to handle all the way .
thanks for the grate info .
Jon Rivers says
Great post Bill. This has changed the way we manage our sites. Tip for anyone managing writers and mass amounts of content — use this to construct “Company Name”, “Phone Number”, “Mobile Number”, etc. fields, construct shortcodes and have your writers use those shortcodes in their copy. I found this post because I got tired of correcting company names to the correct dba’s…correcting phone numbers to the correct syntax. This is great for consistency.
—————————————-
I’m having an issue with adding a Genesis Theme settings box like this for a script and am hoping someone else has had a similar issue that they’ve been able to work through.
I need the textarea input similar to the header_scripts and footer_scripts, as I want to use this to store the Google Tag Manager & Conversion Tracking codes and output those in my theme. I’m using requires_unfiltered_html to sanitize the data. This works like a charm with the simple single line text field. But when I replace it with the textarea syntax located in geneses/lib/admin/theme-settings.php (used for header/footer scripts), things start getting wacky. Do those ‘genesis_scripts’ have dependencies I’m not accounting for or is my method wrong?
https://gist.github.com/jonrivers/eb486bad7e3bc1c83a40
Any insights are greatly appreciated.
Jim Camomile says
Bill, your tutorials and seminars are always the most clear and concise stuff out there. Thanks for getting me one more step down the road in using Genesis!
Bill Erickson says
Thanks!
Doug Schneider says
Hi Bill!
Thanks for this tutorial and all the other awesome tips and tricks for Genesis and WordPress. You are one of my go to sources when I need help putting something together, and I wanted to give you this shoutout. I’m getting much better with my coding, but I am still better at dissecting someone else’s code than creating it myself. But every time I do, I learn so much, and I am really starting to understand how it all works!
Your above code rocks! You used it for two simple social links. I used it to create something I’ve been wanting to do for a while, and you made it easy. I took your code and added on to it, to create a company details box, with all the company info for a business (name, address, phone, email, logo, google maps, etc.) to use in my custon functions file to output the business information in the footer with schema markup.
Gone are the days of doing repetitive tasks. Now on the next client site I build, all I have to do is upload two files to the themes directory, fill out the form, and voila, a fully functional footer with business information with schema markup, links, and copyright.
Plus now I actually understand how the api and php work. Read about it, didn’t really get, did it and now I got it.
Thanks again and I hope my creativity will inspire others to fork this code to make something awesome too.
Doug
Bill Erickson says
That’s great to hear! Thanks so much for sharing, I really appreciate it.
Luca says
Hi Bill,
Thank you for awesome tutorials! This one however doesn’t seem to be working on recent Genesis Framework version. There are no errors, but the options don’t show up in theme settings menu.
Any updates? 🙂
Thanks,
Luca
Bill Erickson says
Are you sure you didn’t forget to include the file? This code is very similar to what I’m using for Genesis Title Toggle and its metabox still appears on Theme Settings.
Pallavi says
Hi,
I have a question. I am creating a child theme for genesis which will add new theme options say cthemeoption1. When I activate child theme – I can see & save cthemeoption1 with some value say value1. When I switch back to parent genesis framework obiviously cthemeoption1 is not present. Now if I again switch back to child theme what cthemeoption1 should contain ? It should have default value or value which was set earlier ?
Bill Erickson says
I believe it will have the value set earlier. The data should be stored in the database, so once changing themes it will still be in there. Then when activating the child theme again, you’ll see the data so you’ll use that rather than the default.