How to add custom page elements to the WYSIWYG editor?

Question

On a plugin-less Worpress installation the WYSIWYG editor allows to write a page down from top to bottom with style buttons (lists, font, italics, bold, add picture ...).

What I am missing is the possibility to define custom page elements. Example: a button next to "Add picture" that is labeled "Add box" and does, well, add a box, with headline and content (where the design was defined somewhere in the template code). So that the users (the content editors without HTML/CSS knowledge) can build the page not only with formatted texts and pictures, but additionally with WYSIWYG-enabled custom content elements (that are defined by me, the theme developer).

How would I do this, assuming I write my own theme from scratch?

Answer 1

It's possible to manually add buttons to your editor. https://codex.wordpress.org/TinyMCE_Custom_Buttons

The Codex actually links to a full tutorial detailing the process, as well. http://code.tutsplus.com/tutorials/guide-to-creating-your-own-wordpress-editor-buttons--wp-30182

That will guide you through all the steps:

• Adding shortcodes to your site
• Creating a TinyMCE plugin (register, set up, create buttons, and add what they should do)
• Including editor styles so it displays properly in the admin area
• Including theme styles os it displays properly in the front-end

Answer 2

I think, similar to the plugin Duane mentioned, you'd most likely utilize shortcodes.

Most Themes I've seen that help with post/page formatting use shortcodes to help acheive what you are talking about.

Shortcode Example:

[addbox type="full-width" headline="Headline Title Here"]Content goes here[/addbox]

Then within the Theme code you'd recognize an "addbox" shortcode and output the proper HTML with the headline variable filling in an H2 tag, and the type could be the width of the box (set a CSS class?) and of course you can add more attributes to be recognized in the shortcode.

It's quite a bit of work though to achieve this, and even then users always want to customize whats there. Although if you are working with a Framework like Foundation 5 or similar then perhaps it be a little easier to just use the CSS classes they provide.

Good luck!