49

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.

7 Answers 7

82

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.

5
  • If my suggestion works out for you please take a moment and accept the answer by clicking on the big checkbox in the left side of this answer. You even get some points doing that :)
    – metaColin
    Sep 7, 2013 at 17:13
  • 2
    This is exactly what I was looking for. An amazing plugin I must say, makes it very easy to add multiple editable sections to wordpress. Thanks a lot and apologies for the late reply. Sep 11, 2013 at 3:48
  • 3
    This solution worked well for me. Since my ACF fields are required, I was able to simplify the code slightly by using the_field, though get_field worked well when I was looping through several posts. If the field value is not set, it will just output an empty string, which may be fine depending on your markup. <?php the_field('main_text'); ?>
    – RevNoah
    Jun 22, 2015 at 15:26
  • I have spent days in trying to find a reasonable process in achieving something similar to what the OP was requesting, without a plugin. But after a long investigation, I highly recommend this as a powerful solution to get up right away and leverage on for maximum flexibility.
    – klewis
    Apr 9, 2018 at 22:25
  • Note, the plugin is not free
    – jwebb
    Mar 6, 2022 at 20:09
7

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.

2

If you are writing the theme, maybe you would like to consider using a WordPress Framework so you don't have to start from scratch.

If that is not the case, think of the end user. How will they add sections to pages and posts? Will they have to move across places within the WordPress UI, or would they rather user short codes?

My recommendation is to build a plugin that render the section within the document content. Or widget content if that is the case.

I wrote a little piece of code to illustrate how you can accomplish such a thing, and also because I kind of need it right now :D. You can find it on github here https://github.com/lionpage/Front-Office-Document-Sections

Hope this helps

1
<div id="maintext">
   <?php the_content(); ?>
</div>
<div id="products">
   <?php // echo wp function to get product data; ?>
</div>
<div id="about_company">
   <?php // echo wp function to get about companydata; ?>
</div>
2
  • 6
    @developerbmw - Upvoted for what, exactly? There is zero technical detail on this. What is this mysterious "wp function to get product data" or similar? Feb 1, 2018 at 23:09
  • 5
    @developerbmw - I saw your comment the first time. However, I will repeat the part about there is zero technical detail on this. What is the mysterious wp_function to get product data that is referenced as a comment? Feb 3, 2018 at 20:53
0

I've run into this issue several times now, and while the question is 3 years old, I think it's still rather current. I've succesfully used the Multiple Content Blocks plugin sometimes now:

https://ltz.wordpress.org/plugins/multiple-content-blocks/

After installing the plugin, you can just include the_block in your template:

<div id="maintext">
   <?php the_content(); ?>
</div>
<div id="products">
   <?php the_block('products') ?>
</div>
<div id="about_company">
   <?php the_block('company') ?>
</div>
1
0

hi im currently developing a theme with that set up. there are two ways to achieve this:

widgetized and fixed admin panel (customizer options)

i am using the two in my themes if widgets create a .php file that includes the widgets sections create a widget for that section

if fixed in admin panel you have to include the .php section in your functions.php

edit * advantage of widgetized is you can arrange them just like in a regular sidebar

0

Was struggling with this, and did not want to use a plugin. The only WordPress native option I found was to use Custom Fields. This works, but only for text, and is rather cumbersome.

The other non-plugin option is to simply use HTML in the WordPress editor, but this is of course far from ideal either.

Finally I gave up, and opted for the Advanced Custom Fields plugin as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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