Adding content area boxes on homepage

If you find this tweak helpful:


Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

20% Discount!!!
Divi WordPress Theme

By default, Chameleon gives you the option to add three content areas to the homepage directly under the slider and quote. This tweak adds three more content area boxes directly under the first three for a total of six.


Locate the home.php file in /themes/chameleon/

Save an exact copy of this file to /themes/chameleon-child/

Locate the following code near line 24:

<?php for ($i=1; $i <= 3; $i++) { ?>

Change it to this:

<?php for ($i=1; $i <= 6; $i++) { ?>

Locate the folowing code near line 29:

<div class="service<?php if ($i==3) echo ' last'; ?>">

Change it to this:

<div class="service<?php if ($i%3==0) echo ' last';?>">

Save and close the home.php file

Locate the options_chameleon.php file in /themes/chameleon/epanel/

Copying this file to our child theme folder and editing it will not work. We will have to edit the original and make note of what we change for future reference in case it is overwritten by a theme update. For more information about editing theme files, read our article on creating a child theme.

Now back to the code you will change in the options_chameleon.php file which you are going to edit and save in its original location:

Locate the following code near line 302:

array( "name" => "Content Area 3 Page",
"id" => $shortname."_home_page_3",
"std" => "",
"type" => "select",
"desc" => "Here you can select the page you would like to display in the Content Area of the homepage.",
"options" => $site_pages,
'et_array_for' => 'pages'),

At the end of this code, add the following:

array( "name" => "Content Area 4 Page",
"id" => $shortname."_home_page_4",
"std" => "",
"type" => "select",
"desc" => "desc.",
"options" => $site_pages),

array( "name" => "Content Area 5 Page",
"id" => $shortname."_home_page_5",
"std" => "",
"type" => "select",
"desc" => "desc.",
"options" => $site_pages),

array( "name" => "Content Area 6 Page",
"id" => $shortname."_home_page_6",
"std" => "",
"type" => "select",
"desc" => "desc.",
"options" => $site_pages),

Now open the Elegant Themes epanel located in your WordPress dashboard under 'Appearance->Chameleon Theme Options'. Under 'General Setting' click on the 'Homepage' tab. Disable the 'Display Content Area' and scroll down and click the save button. Once saved, re-enable it and click save again. Refresh the page . You should now have the option to select pages for three more content areas. Your homepage should now have six content areas. You may have to refresh the homepage and clear your browser cache. If it doesn't look quite right, try disabling and re-enabling the 'Display Content Area' one more time.


  1. Hi there,

    thank for your step-by-step instructions. It was very helpfull for me. But now I have some trouble, because the changes I made in the options_chameleon.php to display the content areas in the epanel are not visible. In the epanel are only 3 content areas to choose. What can I do?

    Thank you for help.

    Kind regards


    February 10, 2015

    • Did you follow the steps in the last paragraph? Try that and let me know if you’re still having problems. Usually clearing your browser cache should do the trick. If you are using a caching plugin, you may have to delete your cache from within the plugin.

      Brad (admin)

      February 10, 2015

  2. Great Post! I’m looking to edit my theme as well, but am more interested in adding a full-width content box either just above or just below the slider. Wish me luck!

    Angela Heidt

    February 24, 2015

    • Hi Angela. You should just be able to add:

      <p>Content text.</p>

      below this line of code on the home.php file:
      <div id=”content-area”>

      Brad (admin)

      February 26, 2015

  3. Hi, Thanks so much for your Post. I realize this is an old post and do hope you can still reply to me. So I recently bought the Chameleon template and added the extra 3 content boxes for the Homepage. If you go on the site, you can see that there is no space in between the first and second row, I just want it to have more room in between the rows. Any suggestions? Thanks again. -Rosie

    Roosevelt Ulloa

    January 28, 2016

Post a Reply

Your email address will not be published. Required fields are marked *