How do I create different editable sections within

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

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