5

I developed a very basic theme with underscores. I am looking for custom editable content, or a changeable page, from the Theme Customizer for front-page.php.

For example, when a user goes to Customizer they would see the option to select pages for featured content (pregenerated pages inside WordPress) and a "Read More" button attached with it, and the user can select images for every featured area.

for example:

  • I did something very similar to this but used a Widget area instead. The code to build out the the pages dropdown is similar to this: <?php wp_dropdown_pages(array( 'id' => $this->get_field_id('link_target'), 'name' => $this->get_field_name('link_target'), 'selected' => $instance['link_target'] )); ?> More detail – Greg McMullen Oct 14 '15 at 18:26
  • 1
    The scope of this question is far too broad, but I suggest you look at the Codex Theme Handbook for a good idea of how to get started. You would need to create a new section that is only shown on the front page (there's explanation for that) as well as several custom customizer fields. Hope this gets you going in the right direction. – brianjohnhanna Oct 21 '15 at 14:17
1

It's an interesting thought to use the theme customizer to completely build the front page. Here is how I would start it.

First, let's build a section that only shows on the front-page:

add_action( 'customize_register', 'wpse_205445_customizer' );
function wpse_205445_customizer($wp_customize) {
     $wp_customize->add_section( 'custom-front-page', array(                                             
           'title'           => "Custom Front Page",
           'priority'        => 10,
           'active_callback' => 'is_front_page'
     ));
}

Second, lets make some settings. Just one example here, a dropdown list to select the main page setup. Beware that transport must be refresh, because we'll need a complete page load further on.

$wp_customize->add_setting('main-page-setup', array(
    'default'                   =>  '',
    'type'                      =>  'theme_mod',
    'capability'                =>  'edit_theme_options',
    'theme_supports'            =>  '',
    'transport'                 =>  'refresh',
    'sanitize_callback'         =>  'sanitize_text_field'
    ));

Third, the setting must have a control:

$control_args = array(
    'label'                     =>  'My Main Page Setup',
    'section'                   =>  'custom-front-page',
    'settings'                  =>  'main-page-setup',
    'priority'                  =>  20,
    'type'                      =>  'select',
    'choices'                   =>  array('one-column', 'twocolumns', 'threecolumns'),
    );
$wp_customize->add_control( new WP_Customize_Control ($wp_customize, 'main-page-setup', $control_args));

Now we have a dropdown select in the customizer, showing on the frontpage only, that gives three options. Now, let's move to front-page.php. Here we need to call that mod:

$main-page-setup = get_theme_mod('main-page-setup');
switch ($main-page-setup) {
    case 'one-column'    : get_template_part ('front-page-one-column');
    case 'two-columns'   : get_template_part ('front-page-two-columns');
    case 'three-column ' : get_template_part ('front-page-three-columns');
    default              : get_template_part ('front-page-default');
    }

So, there it is, a method to complete change the layout of your front page using the customizer. Of course, instead of loading template parts, you can also switch between images or between different post queries to change the content.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.