How to create Redux sections in a loop

By , last updated October 8, 2016

We were creating a WordPress theme, SF Parent and had stumbled upon a a problem where we needed to create 5 or more sections. In these sections, users could choose any pages from their website and assign background color for each section. The sections would then show up on a front page of the website.

This is how the admin panel for a user would look like:

redux sections admin page setup in a loop

The result should be something like this with many possible sections to show without hard coding:

sections visual presentations for redux framework loops

Redux framework

Redux framework is a cool easy to use tool to make admin options for your WordPress themes. It’s also OpenSource and absolutely free to use. Although it’s easy to use, there are still some bugs here and there and things that no one helps you solve. You can get a premium help from developers, but need to pay for it.

To set up my sections panel according to Redux documentation I’d need to create a Section and set an array of fields:

Redux::setSection( $opt_name, array(
	'title'      => __( 'Sections', 'sfparent' ),
	'id'         => 'presentation-section',
	'desc'       => __( 'Choose what pages content to show.' ),
	'fields'     => array (
		array(
			'id'        => 'opt-select-section1',
			'type'      => 'select',
			'data'      => 'pages',
			'title'     => __('Section 1', 'sfparent'),
			'desc'      => __('Select a page to show in Section 1.', 'sfparent'),
		),
		array(
			'id'        => 'opt-select-section2',
			'type'      => 'select',
			'data'      => 'pages',
			'title'     => __('Section 2', 'sfparent'),
			'desc'      => __('Select a page to show in Section 2.', 'sfparent'),
		),
		array(
			'id'        => 'opt-select-section3',
			'type'      => 'select',
			'data'      => 'pages',
			'title'     => __('Section 3', 'sfparent'),
			'desc'      => __('Select a page to show in Section 3.', 'sfparent'),
		),
		array(
			'id'        => 'opt-select-section4',
			'type'      => 'select',
			'data'      => 'pages',
			'title'     => __('Section 4', 'sfparent'),
			'desc'      => __('Select a page to show in Section 4.', 'sfparent'),
		),
		array(
			'id'        => 'opt-select-section5',
			'type'      => 'select',
			'data'      => 'pages',
			'title'     => __('Section 5', 'sfparent'),
			'desc'      => __('Select a page to show in Section 5.', 'sfparent'),
		),
		
	),
) );

As you see there is too much code. What if I’d like 100 sections? You never know how people would like to use your product. Maybe they’d like to list 100 sections on their front page?

In order to introduce a loop to our solution we make a use of PHP arrays.

PHP arrays

First we create the first and main array – “fields_array“:

$fields_array = array();

Redux::setSection( $opt_name, array(
        'title'      => __( 'Sections', 'sfparent' ),
        'id'         => 'presentation-section',
        'desc'       => __( 'Drag and drop section in Frontpage settings and choose what pages content to show here.' ),
        'fields'     => $fields_array
    ) );

All the sections are going to be placed in this array. This is a simple PHP code, so if you are familiar with PHP you can proceed as usual to populate an array. If not, follow up.

Next thing id to create an actual loop:

for ($i = 1; $i <= 100; $i++) { }

Notice the number 100. This is just an example. You could easily make a variable as well:

for ($i = 1; $i <= $how_many_sections; $i++) { }

Inside this loop goes our actual code for sections. We are going to create one “select” section where a user would be able to choose one of the pages and one “background” section where users will be able to set a background for each section.

Notice, that these are arrays inside an array. So we would need to create them separately first and then set in our main fields array.

First, we create a selection field. We store it in a variable “select”:

$selectid = "opt-select-section";
$selectid .= $i;

$select = array(
	'id'        => $selectid,
	'type'      => 'select',
	'data'      => 'pages',
	'title'     => __( 'Section ', 'sfparent' ) . $i . ' Page Content',
	'subtitle'  => __('The chosen page content will be shown in place of this Section.', 'sfparent'),
	'desc'      => __('Select a page to show.', 'sfparent'),
);

We needed to create additional private variables for id and title. Id in this array should be unique or the section will be written over and you will get 1 section instead of 100. I also needed to have a title that fit and says something like “Section 1”, “Section 2” and so on. In order to do that I had to make new variables and append number $i to the name.

Now we create a background field option. We call it “background” (remember clean code while naming your variables even if it’s PHP):

$bg = "opt-background";
$bg .= $i;

$bg_css = ".section-page";
$bg_css .= $i;

$background =  array(
	'id'       => $bg,
	'type'     => 'background',
	'output'   => array( $bg_css ),
	'title'    => __( 'Section ', 'sfparent' ) . $i . ' Background Color.',
	'subtitle' => __( 'Pick a background color for section (default: #f2f2f2).', 'sfparent' ),
	'default'  => array (
		'background-color' => '#f2f2f2',
	),
	'validate' => 'color',
);

In the background section in addition to unique id and title I needed to output each section unique CSS. In this case, each one my 100 sections could have, for example, different colors or background images. To achieve that I write a new variable “bg_css” and send it to “output” option. Here is how I used it in my page HTML/PHP code:

<div class="section<?php echo $section_number; ?>">
	//do stuff ...
</div>

Finally, there is one thing we should remember to do is to push each “select” and “background” code to our main “field_array” array. This is done inside the foreach loop as well (for each section number):

array_push($fields_array, $select);
array_push($fields_array, $background);

Resulting code

Here is a whole resulting code for the Redux framework with a loop:

$fields_array = array();
$how_many_sections = 1000;

for ($i = 1; $i <= $how_many_sections; $i++) {
	$selectid = "opt-select-section";
	$selectid .= $i;
	
	$title = "Section ";
	$title .= $i;
	
	$select = array(
		'id'        => $selectid,
		'type'      => 'select',
		'data'      => 'pages',
		'title'     => __( 'Section ', 'sfparent' ) . $i . ' Page Content',
		'subtitle'  => __('The chosen page content will be shown in place of this Section.', 'sfparent'),
		'desc'      => __('Select a page to show in Section $i.', 'sfparent'),
	);
	
	$bg = "opt-color-background-section";
	$bg .= $i;
	
	$bg_css = ".section-page";
	$bg_css .= $i;

	$background =  array(
		'id'       => $bg,
		'type'     => 'background',
		'output'   => array( $bg_css ),
		'title'    => __( 'Section ', 'sfparent' ) . $i . ' Background Color.',
		'subtitle' => __( 'Pick a background color for section (default: #f2f2f2).', 'sfparent' ),
		'default'  => array (
			'background-color' => '#f2f2f2',
		),
		'validate' => 'color',
	);

	array_push($fields_array, $select);
	array_push($fields_array, $background);
}

Redux::setSection( $opt_name, array(
	'title'      => __( 'Sections', 'sfparent' ),
	'id'         => 'presentation-section',
	'desc'       => __( 'Choose what pages content to show.' ),
	'fields'     => $fields_array
) );

Senior Software Engineer developing all kinds of stuff.

Comments

  1. chito July 29, 2015 Leave a Reply

    hello there,

    this is really a helpful article. Is there a way we can do this as add/remove jquery?

  2. tisy July 29, 2015 Leave a Reply

    Hi,
    I think it’s possible as Redux supports a “javascript” mode. At least for an editor:

    array(
                    'id'       => 'opt-ace-editor-js',
                    'type'     => 'ace_editor',
                    'title'    => __( 'JS Code', 'redux-framework-demo' ),
                    'subtitle' => __( 'Paste your JS code here.', 'redux-framework-demo' ),
                    'mode'     => 'javascript',
                    'theme'    => 'chrome',
                    'desc'     => 'Possible modes can be found at <a href="' . 'http://' . 'ace.c9.io" target="_blank">' . 'http://' . 'ace.c9.io/</a>.',
                    'default'  => "jQuery(document).ready(function(){\n\n});"
                ),
    

    They have also something called “repeater”. But it’s a premium extension.

Leave a Reply


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*