WordPress: How to Create a Theme Option Page Quickly

Category: Themes, Tips, Tricks & Tutorials, Wordpress

Many WordPress friends will attempt to create their own theme at some point. In a lot of cases, a dedicated theme options page in the backend is relinquished. Of course, even your first self-made theme should have a theme option page to be able to change settings quickly. Until now, the creation of this page was very complicated and needed a lot of code. It also came with free grey hair as not everything worked instantly. However, this is over now, as there is a good generator for the creation of theme option pages.

WordPress: How to Create a Theme Option Page Quickly

Theme Options: Create a Custom Page or Use the Customizer

There are two ways of offering theme options. You can either use a custom page, or you can make use of the theme customizer that can be accessed via »Design => Customize«. Both methods are useful, but working with the customizer gets rather confusing when many options are added. That’s why we want to deal with a custom options page in this article. We’re going to the bottom of the customizer’s options in a separate article.

The »WordPress Option Page Generator«

This generator does a good job and saves you a lot of time in the development of themes. Additionally, it offers relatively many options and works as promised, which you can’t say about its rival. The competition also doesn’t offer nearly as many features, and a lot of code has to be edited in the final product. My recommendation: Stay away from the WP Settings Generator!
The WordPress Option Page Generator

In this article, we’re talking about the “WordPress Option Page Generator“, which provides many options and works perfectly fine, as I was able to find out by testing it on different themes.

Creating a Theme Option Page With the Generator – It’s That Easy

1 – Name it and Decide on a Position of the Page

First, you need to name the page for the theme options. Below the name field, you can add a short text for a description or something similar in the box “Text”. On the right, choose where the option page should appear. For a theme option page, “No Parent (Top-Level)” or, as seen in the screenshot, “Theme (Appearance)” are suitable. Then, the page appears under “Design”. This is the recommended setting. Additionally, it should be said that the generator can also create plugin options pages.

Blank:

Titel und Position der Optionen-Seite festlegen

Filled in:

theme-optionen-1

2 – Set the Needed Fields and Decide on the Functions

You have the choice between “Text, Textarea, Select, Checkbox and Radio” for the settings. Depending on what type of options you want to define for your theme, you should make use of the different possibilities. A text box can be used in the footer, for example, a text area for the Google Analytics code, a checkbox for the display of certain aspects and so on. After choosing an option, just click the plus button. This allows you to define further options.

Die einzelnen Felder für die Optionen festlegen

Filled in, it can look like this, for example:

Hier legst du deine Theme-Optionen fest

3 – Generating the Required Code

After having gone through the options thoroughly, you can now generate the code that is responsible for the creation and display of your theme option page. This is done at this point:

Den PHP-Code generieren

Laying the Theme Option Page Using the Generated Code

After clicking the button »Generate PHP«, the required PHP code for your option page is generated. Now, use the Windows Editor of Apple’s Text Edit, for example, to create a file named theme-optionen.php, copy the code from the generator into the PHP file and save it. Now move the new PHP file into the primary index of your WordPress theme. You can name the .php whatever you like, just make sure it makes some sense and remember to add it to the functions.php in the next step.

The Generated Code:

Der generierte Code

The Theme Main Index:

Das Theme-Hauptverzeichnis

Adjusting the functions.php so that the Theme Option Page is Displayed

A small adjustment in the functions.php of the theme is needed so that the theme option page is displayed. Open the file in a pure text editor or, even better, in an HTML editor. We’ve already presented plenty of good HTML editors:

After opening the functions.php in an HTML editor, paste the following at the end of the file:

Die Erweiterung in der functions.php Datei

The Result: The Theme Option Page

Twenty-Twelve-Theme-Optionen

We’ve now created an appealing and working theme option page with relatively little time effort in a simple way. Now, all that is needed is the code that allows you to integrate and display the options in the theme files as well. The generator also helps with that, as, at the end of the theme option page, there are instructions on how to transfer the options into the theme.

Optionen ins Theme übertragen

In-depth: Transfer Options into the Theme Easily

Two requirements need to be met to be able to display options. In the header of the theme file, the options have to be invoked. Another code piece is responsible for the display in the theme. This only works when both pieces are in the respective theme file. In the following example, we want to add some additional text to the footer of the theme.

Diesen Text im Footer anzeigen lassen

To be able to display additional text in the footer, the footer.php needs to be edited. The following two code lines have to be added in the footer.php:

Die Optionen im Theme anzeigen lassen

The upper code lets the theme file know that there are additional options. It doesn’t work without this line. The second code line grabs the settings you chose and displays them in the theme. This second line needs to be placed where you want the text to be.

This is How It Will Look on Your Website:

Das Endergebnis

Conclusion

The »WordPress Option Page Generator« is an excellent and fast way to create a theme option page without advanced PHP knowledge. Additionally, the generated code is WordPress-compliant and uses the Settings API to generate the PHP code. Advanced users should adjust the generated IDs as well, as they are very long and not really practical.