Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. Getting Started With Redux Framework: Introducing It and Integrating It Into Your Theme
  • like 10 10

    Getting Started With Redux Framework: Introducing It and Integrating It Into Your Theme

    1. January 2015
    2. Daily
    3. read 667
    4. response 4

    Final product image
    What You'll Be Creating

    When site owners install a new WordPress theme, the first thing they want to do is to tweak its look and feel to match their branding or personal preference. And most of the time, the people who buy, download, or install WordPress themes have little or no coding experience.

    So how do you, as a theme developer, enable the end users of your theme to have as much control as possible over the look and feel of their site without having to learn to code? 

    By creating options pages/panels, of course!

    However, theme options pages are not easy to create—especially for those developers who don’t have much experience with WordPress or programming in general. Luckily, there are options frameworks.

    What Are Options Frameworks?

    Options frameworks are code libraries, plugins or classes that provide a solid foundation that developers can easily and quickly build upon to create and add options pages to their themes. This enables non-developers to use such panels to quickly customize the look and feel of their site, without touching code.

    Options panels can be used to:

    • upload a logo
    • change the background color or any CSS property of an element (such as the header or footer of your theme)
    • select a pre-defined skin or layout
    • add custom CSS or JavaScript
    • and more

    Basically, options panels can place the power into the hands of your themes’ users by enabling them to change almost any aspect of their site’s design.

    In this series, we are going to look at a very popular and widely-used options framework—Redux Framework.

    This series will be divided into the following parts:

    • Part 1: Introducing Redux Framework and Integrating It Into Your Theme
    • Part 2: Adding Sections and Fields & Working With Configuration Settings
    • Part 3: Using the Options in Your Theme (and Widgets)
    • Part 4: Alternatives to Redux
    • Part 5: Conclusion

    What Is Redux Options Framework?

    Redux Framework is an options framework that was born out of the combination of four frameworks, namely:

    • NPH, which was created by Lee Mason with the aim of creating a framework that was compatible with ThemeForest’s submission requirements
    • SMOF
    • SimpleOptions, which is a merger of the above frameworks, created by Dovy Paukstys
    • An earlier version of Redux (Redux 2.0), created by Daniel Griffiths and based on NPH

    The Redux core team consists of these three developers. The project is under active development, with updates released quite regularly.

    Redux Features

    • Uses the WordPress Settings API
    • Multiple field types
    • Built-in validation classes
    • Extensible
    • Import/export functionality, enabling you to port settings across sites

    Why Redux?

    • Free: Redux is free and 100% open source. You can use it in both personal and commercial projects without paying a cent.
    • ThemeForest-Compliant: Redux meets Envato’s submission requirements, making it a good option for theme developers wishing to develop themes or plugins to be sold in Envato’s marketplaces.
    • Popular: Redux is used by over 250 (known) items in the Envato marketplaces that have sold for well over $6 million. This popularity alludes to the power of this framework.
    • Easy to Use: If you understand how arrays work, than you can use Redux. Getting started with Redux is as simple as creating a configuration object that consists of nothing more than nested arrays.
    • Flexible: If it doesn’t quite meet your needs, Redux can be extended to create custom fields and validation/error handling.
    • Well-Documented: Redux is well documented. The Redux website has a knowledge base, codex (developer documentation), and video tutorials.
    • Strong Community: A strong community has mushroomed around Redux. If you are having a little trouble and would like help, you’ll probably find someone who has encountered the same problem before. And if it’s a feature you require, then more than 50 contributors will be willing to listen (and perhaps add it in the next release).

    Installing Redux

    There are several ways to install Redux. But for the purpose of this tutorial, we are going to install it from WordPress.org.

    Install the plugin as you would any plugin:

    • Go to Plugins > Add New.
    • In the search box, enter Redux Framework and then click Search Plugins.
    • From the results page, click Install Now on the first entry.
    • After you install it, proceed to activate it as you would any other plugin.

    Activating Demo Mode

    To activate demo mode, go to Plugins > Installed Plugins and scroll to Redux Framework. You will see something like this:

    A Redux Framework entry on the installed plugin list

    Click Activate Demo Mode.

    This will activate the demo mode and create a sample options panel called Sample Options in the WordPress Dashboard.

    WordPress Dashboard menu showing Sample Options and its submenus

    Demo Mode and the Sample Options page will allow you to play around with Redux and explore the various field types that it allows you to create.

    Redux Options Panel showing the Home Settings Tab

    Integrating It Into Your Theme

    So far we have installed Redux and activated the Demo mode to allow us to explore the different fields that Redux allows us to create.

    To integrate Redux into our theme, we have to initialize it with a new configuration file. Follow these steps to initialize a new instance of Redux:

    • Navigate to the redux-framework directory within your WordPress Plugins directory (wp-content/plugins/) and copy the sample directory to your theme.
    • Open your functions.php file and add the following line of code:
    <?php

 require_once (dirname(__FILE__) . '/sample/sample-config.php');

?>

    When you refresh your WordPress Dashboard and hover over Sample Options, you will notice that nothing has changed—you still have the same sub-menus as before. This is because our configuration is exactly the same as before. We simply moved the config file from the Redux plugin directory to our theme directory.

    Furthermore, you might see the following error message:

    An error message caused by including duplicate configuration classes

    This is due to the fact that we are loading two identical config files. You can fix this by going to the Plugins panel and deactivating Demo Mode.

    A Redux Framework entry in the Plugins panel - with Deactivate Demo Mode option

    What we want to do is to start with a blank config file. Redux comes with one for your convenience. So let’s link to it instead.

    To do so, change the line you just added to your functions.php from:

    <?php
require_once (dirname(__FILE__) . '/sample/sample-config.php');
?>

    To:

    <?php
require_once (dirname(__FILE__) . '/sample/barebones-config.php');
?>

    If you go back to your Dashboard, you will realize that our Sample Options panel contains one section—Home Settings—and one field, a media uploader field aptly named Web Fonts.

    Sample Options Page with barebones config activated

    We now have a barebones config class that we can add sections and fields to.

    Conclusion

    In this first part of the series, we looked at Redux Framework, what is and why it's worth using it in your projects. We went ahead and installed a fresh installation of Redux and examined the different features it affords us as theme developers.

    We also created our own barebones configuration files to demonstrate how we can begin to tweak Redux to meet our specific needs.

    In the next tutorial in the series, we are going to learn how we can add more sections, and also look at adding fields to these sections.

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    10
    Add a comment...
    4elements
    Comments
  • 1
    silhouette
    Devoted Domains
    January 28, 2015 at

    Greetings! Very helpful advice within this article! It's the little changes which will make the greatest changes. Thanks a lot for sharing!

    4elements
    Comments
  • 2
    silhouette
    attrezzi per addominali
    January 28, 2015 at

    Everything is very open with a really clear clarification of the challenges. It was really informative. Your site is useful. Many thanks for sharing!

    4elements
    Comments
  • 3
    silhouette
    The Tech Company
    January 28, 2015 at

    I used to be suggested this weebsite via my cousin. I am no longer positive whether this post is written by him as nobody else understand such designated approximately my problem. You're wonderful! Thank you!

    4elements
    Comments
  • 4
    silhouette
    Discount e-commerce Technician place
    January 26, 2015 at

    It's in polint of fact a great and ɦelpful piece of іnformation. I'm glɑd that you simply shared this helpful info with uѕ. Please stay us iinformed like this. Thanks for ѕharіng.

    4elements
    Comments

By - category

    By - date

      Copyright © 1999 - 2025 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News