Now that we’ve got the basics out of the way, we’ll look into more advanced examples. Starting with the ability to use the powerful Option builder that is part of the Infinity Engine (and thus Infinity).

What is the Options Builder?

The Options Builder allows you to quickly add various amounts of theme options to your Infinity theme. You create these options through the .ini files you’ve gotten used to by know. By using simple human reabable directives you can create a huge amount of theme options really easily. When you’re done creating your options you can then output the option values inside your theme either through hooks (cleanest) or by inserting a bit of code into a forked template inside your Child Theme.

What type of options can I create using options.ini?

Currently there are the following option types available.

 

It goes outside of the scope of this Getting Started guide to go into detail about all of these options. If you look at the .ini files in the Infinity Parent Theme you’ll get a good idea of how the various option types are being put to use. On our GitHub page you’ll also find a growing list of gists containing code examples to help you get started building your options!

Finally we’ve written an in-depth tutorial on creating and implementing theme options here:

Creating new sections for your options

All of the theme options are put into nearly organised sections that can be clicked on in the expanding accordeon on the “Options” Dashboard Page. Every accordeon item is called a “section”. You can create these sections using sections.ini in your child theme.

Creating a section is really easy:

Add to sections.ini in your Child Theme
 [new-section]
 title = "New Section"

Your new section will not show up until you put an option under that section. To do this you would add an option through options.ini where you told the option to be put under your freshly created “new-section”.

Add to options.ini in your Child Theme
 [super_cool_option]
 section = "new-section"
 title = "Awesome Level"
 description = "Who is more awesome?"
 type = "select"
 default_value = "bowe"
 field_options[] = "bowe=Bowe"
 field_options[] = "marshall=Marshall"

Here’s the result of those two snippets

Creating custom pages that display specific theme options

When you’ve added your options there a few different ways to put your new options to good use. It’s completely up to you how you would like to utilize them. Here’s a few ideas to get your creative juices flowing:

Let students fill in something about themselves in the theme dashboard and output it in their blogs sidebar.
Create an “upload” option where students upload a picture of themselves and output that in the sidebar.
Add new options to customize the CSS of your theme.
Show or hide certain content based on a checkbox or radio button

When you’ve enabled Developer Mode every theme option in your Theme Dashboard shows you an example tab with how you could use an option:

Creating Custom Features

So now that we’ve taught you all the basics on using the ini files to modify your Infinity Theme, it’s time to show you to take this to the next level. Infinity lets you create your own re-usable theme features. These features can be anything from custom code, styles and scripts or a new set of theme options for your client. Quickly bootstrap the functionality you need for your project, and quickly get rid of everything you don’t need to be loaded. Some things you can do with features.ini
Combine all your scripts and styles automatically and enqueue them on the front end, without you lifting a pretty finger (as demonstrated in lesson 1)
Turn your pretty custom WordPress functions.php functionality into cleanly organized Theme Features which can be easily be enabled and disabled across your theme family (checkout /includes/setup.php) to see we wrapped a lot of functions in if_current_theme_supports checks)
Create packages of theme options that go with your awesome custom functionality.
Combine all of the above into features that are so awesome they could lead into freak gas fight accidents

Let’s go through a few of these examples in a little more details shall we?

Combining Styles and Scripts

At the beginning of this Getting Started guide we showed you how to disable overwrite and disable stylesheets in your Child Theme. We’re now going to take this one step further and actually add a new stylesheet that will be slurped into the dynamic.css file.

Step 1: Creating a new feature in features.ini of our Child Theme

Open up features.ini in your child theme and add the following snippet

[mytheme-custom-style] type = “default”
title = “MyCustom CSS”
description = “Some additional CSS that extends the Core CSS in the Parent Theme”
style = “assets/css/custom-styles.css”

All the magic is in the “style” directive. You tell Infinity where your custom-style.css is located to the root of your Child Theme and that’s it.