0

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?

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
  • 3
    Welcome to the site. Since external links can change or die, it would be great if you could extend the answer to include the relevant parts. Thanks. – birgire Mar 28 '16 at 21:04
0

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!

  • As a content editor, do I have to enter shortcodes in the HTML editor or can I also use then in the WYSIWYG editor? And if the latter: are they WYSIWYG-enabled? E.g. if I define a [box][/box] shortcode that does a "blue 20x20 px box", will it appear as such in the WYSIWYG editor? – Foo Bar Feb 8 '15 at 15:15
  • I'm not sure on whether or not it's possible to make the "blue 20x20 box" appear as it would live within the WYSIWYG editor. I'm not sure about the CSS that can be loaded when editing to make it a true WYSIWYG. I imagine it'd be quite the coding task to make the "blue 20x20 box" show in the WYSIWYG editor since there will inevitably be big differences in the code whether it's for the WYSIWYG editor or live site. – Sean Grant Feb 9 '15 at 20:43
  • Lookup Custom Views using TinyMCE in the WP Editor. You can get Shortcodes to render automatically. – Andy Mercer Mar 28 '16 at 14:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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