Best way to present options for home page in admin?

4 Views

I have a site with a custom home page, home.php. What’s the right way to present the editable home page options in the admin tool?

For example, there’s a few custom text fields on the home page that should be editable in the admin tool. I’m looking for the best way to set this up so an admin user can change these options.

Read More

UPDATE: imagine a site with a home page with a promotional blurb (text string) that I need to be able to let admin users (non-tech people) update easily. I’m trying to figure out how to present a screen in admin that says “What promotional text do you want on the home page? [______________]”? I thought about doing this via widget but that route is clunky and requires me to create a special sidebar just to hold the single widget. What’s the best way to approach this?

Post Views: 4

Related posts

6 comments

  1. There are many solutions to this problem. And every one of them is correct, I guess. It depends on what you really want and what will be most friendly/clear to user/administrator of this page.

    I usually use 3 ways to solve this. Which one of them I chose? It depends on situation. Sometimes I use 2 of them simultaneously.

    1. Static front page solution.

    When I can set static page as front page, I do it. Then create front-page.php page template and use it to define how home-page/front-page should look like.

    To display/allow to edit some custom fields on this page, I use Advanced Custom Fields plugin. It allows you to define custom fields set for front-page (and much more). Then I use front-page.php template to show these custom fields values, where they should be shown.

    If some of these values should be repeated on every page (in footer, in header, etc.) I get these values from Home Page like this:

    $cf_value = get_post_meta( get_option('page_on_front'), '<CUSTOM FIELD NAME>', true );

    It’s very easy and clean solution, when there are not many fields that should be repeated on other pages. It’s user friendly to, I guess. If you want to edit home page, you just have to go and do it – you can edit everything in home page editor.

    2. Universal solution.

    The other solution I use is to define some theme options. It is much better when you want to define look of page (logo image, backgrounds, and so on), and not only the content (especially if you mean the content of only one page).

    I usually use OptionTree plugin to do this. But it’s not so hard to do this by yourself.

    I don’t really like the idea, that you should edit content of the page in theme options, so I don’t use this solution very often.

    3. When this content is always repeated on other pages

    Sometimes you have to show some values on every page (or most of them) and not only on home page. Then the “nicest” solution, I think, is to define these areas as sidebars and allow user to edit them using widgets.

    If this repeating content is just one line (copyright info line in footer, etc.) and it won’t be changed to often, I probably would use solution 1. But if it’s more complex or it will be changed often, this solution is best, I guess.

  2. I’d suggest creating a metabox for the home.php page template. This is easily done with the Advanced Custom Fields (ACF) plugin. You can even use “ACF Lite” if you’d like to build these into your theme, instead of using the plugin. Here’s quick and easy way to implement exactly what you’re looking for.

    • Create A Custom Metabox that only shows up on the page that is using “home.php” template file.
    • Easily add this to your home.php template file and create custom styling.

    I was able to build the metabox, and create a custom styled output into the template file in less than 5 minutes. Here’s the code I used, and the step by step process.

    1. Install the ACF plugin & Activate it. (Search for Advanced Custom Fields by “Elliot Condon”, you can do this through your WordPress dashboard or you can do it manually from the WordPress Repository here: http://wordpress.org/plugins/advanced-custom-fields/

    2. Add the code block Labeled “functions.php” to your active theme’s “function.php” file.

      if(function_exists("register_field_group")) 
{
register_field_group(array (
    'id' => 'acf_home-page-promotional-text',
    'title' => 'Home Page Promotional Text',
    'fields' => array (
        array (
            'default_value' => '',
            'formatting' => 'none',
            'key' => 'field_51c5184b7c590',
            'label' => 'Promo Text',
            'name' => 'promo_text',
            'type' => 'text',
            'instructions' => 'What promotional text would you like?',
        ),
    ),
    'location' => array (
        array (
            array (
                'param' => 'page_template',
                'operator' => '==',
                'value' => 'home.php',
                'order_no' => 0,
                'group_no' => 0,
            ),
        ),
    ),
    'options' => array (
        'position' => 'normal',
        'layout' => 'no_box', // change 'no_box' to 'default' for box look.
        'hide_on_screen' => array (
        ),
    ),
    'menu_order' => 0,
));  
}

    3. Go to the home page (this page must be using the home.php template file Edit Page->Attributes->Template dropdown).

    4. Go to your “home.php” template file and add the following code to display the content of the custom metabox which in this case is given the “name” of ‘promo_text’.

      <?php if( get_field('promo_text') ) { ?>
    <h3>
        <?php echo get_field('promo_text'); ?>
    </h3>
<?php } ?>

      Note: get_field is a function from the ACF plugin. If you’d prefer to use WP built-in function, you can use: “get_post_meta($post_id, $key, $single);” instead. Here’s an example of that.

      <?php
if( get_post_meta($post->ID, $'promo_text', true) ) { ?>
<h3>
<?php echo get_post_meta($post->ID, 'promo_text', true); ?>
</h3>
<?php } ?>

    Here’s what it looks like when editing the home page:
    enter image description here
    Larger Image link

    Now you’ll see the metabox. Note you can easily do this without the plugin, you just have to include the plugin folder in your theme folder, and add an include() to your active theme’s functions.php file.

    I highly recommend this plugin… it very intuitive, and has lots of documentation. If you use this plugin, and var_dump(), you can figure everything out very quickly.

    I hope this helps!

  3. It is hard to tell from your question exactly what you are doing but if you are using the Options API, then get_option accepts a second parameter for the default values. From the Codex:

    $no_exists_value = get_option('no_exists_value');
var_dump($no_exists_value); /* ouput false */

$no_exists_value = get_option('no_exists_value','default_value');
var_dump($no_exists_value); /* output default_value */

    If you are using the Theme Customizations API, then get_theme_mod, like get_option, also accepts a second parameter for your default values.

    With either option, you will need to create the backend interface. If you use the Options API, then you create a configuration page add_menu_page and/or add_submenu_page, or one of these related functions.

    If you use the Theme Customizer, and I am not sure if that fits your project, there is a whole different set of functions and techniques.

  4. If I understand your question correctly you want to create a theme options panel so a WordPress admin. can enter (for example) ‘hello, world!’ in a text box, hit Save Changes and on the front end of the website ‘hello, world!’ will be displayed wherever you decided to call it in your template.

    You can do this using the Options API like s_ha_dum was talking about but my guess is if you thought his answer did not contain enough detail what you really probably mean is that it is more complicated than you were hoping for.

    So my advice to you would be to install the Option Tree plugin which will allow you to quickly and easily create a theme options panel (under the Appearance menu) with a text field that says “What promotional text do you want on the home page?”. Then all you have to do is call the value of that option in your home.php template using the Option Tree function.

    Hope this helps!

  5. If I was in your place, I would have added the custom word to the theme’s admin/config page. This would be easier for me because:

    • Functionality relating to view modification is already existing in the theme’s admin page.
    • I just need to add a new variable reference there.
    • The promo which comes up on load is definitely a part of the specific theme and thus should be a part of the theme controls.

    The way ahead would be to add a new hook.
    You can either go with my preferred way here or the general plugin hook way detailed here

  6. The way I would approach it (and I have something similar right now), is the following:

    1. Create a new menu entry either in the settings menu (settings -> home page settings), or create a new homepage menu item, under Comments for example, or at the endo of your menu, or where ever you like. Then in that new menu item, create your page.

    2. In the page mentioned in step 1, you create all your admin settings for home page (current and future settins).

    3. Make sure the page (and its menu links) are only available to admin users via a role check

    4. If you like, you can make your solution above as part of a plugin that specifically creates the extra settings page, and move it away from the theme. Because this is not a theme-related problem, but custimization of the admin area.

    For me, as I mentioned earlier, I am doing someting along those lines, and created a plugin. This helps me in the future, if I want to change my theme, I do not need to go over what needs to be removed and kept in my code.

    Hope this helps.

Comments are closed.