How do I create different editable sections within a WordPress page?

Question

I have been building my first theme on WordPress and have run into problem while adding content into different sections.

My HTML is somewhat like this,

<div id="maintext">    <-- Text --> </div> <div id="products">    <-- Text and Images --> </div> <div id="about_company">    <-- Text boxes --> </div> 

How do I make sure the content added via the WordPress editor falls under the respective divs ? For the "maintext" div I'll load the content from the page itself but how do I add content to the other 2 divs dynamically ?

I searched on a couple of forums and many suggested to add content using widgets, is there any way it can be done without using widgets ?

Any help will be gladly appreciated.

Answer 1

You've got three options I believe:

1. Create a widget area where you can then display the content in a text widget: http://codex.wordpress.org/Function_Reference/register_sidebar
2. Create a template where you then get the content of a different page: http://codex.wordpress.org/Page_Templates#File_Folders
3. Create a new meta box for all your pages: http://codex.wordpress.org/Function_Reference/add_meta_box

I believe that the thing you are looking for is option 2. The others are more full-site oriented, if you want the extra content to show up on every single page.

Answer 2

Unfortunately adding multiple editable fields in a single page is not particularly easy using WordPress by itself.

Many WP devs I know (myself included) rely on the Advanced Custom Fields Plugin for additional content fields.

The steps to make this happen:

1) Install the ACF the plug.
2) In the settings area for ACF create some new fields.
3) Assign the new fields to appear for a specific page or set of pages.
4) Update your page-template for the given page(s) so that the new fields are displayed.

For instance you might create a set of standard wysiwyg fields and then assign them to the 'overview' page. Let's call these fields: main_text, products_info and about_company. Once the fields have been created and assigned to a page, when you edit that page the additional fields will be available to edit.

For these new fields to be seen by visitors, they must be added to the page-template you use for your overview page. The code could be something like this:

<div id="maintext">    <!-- Text -->    <?php if(get_field('main_text')){ //if the field is not empty         echo '<p>' . get_field('main_text') . '</p>'; //display it     } ?> </div> <div id="products">    <!-- Text and Images -->    <?php if(get_field('products_info')){ //if the field is not empty         echo '<p>' . get_field('products_info') . '</p>'; //display it     } ?> </div> <div id="about_company">    <!-- Text boxes -->    <?php if(get_field('about_company')){ //if the field is not empty         echo '<p>' . get_field('about_company') . '</p>'; //display it     } ?> </div> 

There are lots of good examples here. If you are feeling really ambitious, rather than install the plugin you could even include ACF directly in your theme.