Search code examples
wordpressworkflowatom-editorshortcode

How can I use WordPress shortcodes within a code editor?

The website I work on daily requires me to input a lot of markup via a WYSIWYG editor. The more complex a page gets though, the more of a pain it is to code everything within the WYSIWYG editor. So, often I end up temporarily editing a page-template within Atom, where I can use nice things like autocomplete, tag auto-closing and Emmett, and also get a live preview as I change them, using Codekit. Then I can just cut and paste the resulting markup into the WordPress editor. My issue is that shortcodes don't work within this process since they are not processed within the PHP file so live preview won't work.

// The wordpress editor renders this
[grid class="center-xs]Hello World[/grid]

// Like this
<div class="container">
    <div class="row center-xs"> Hello World</div>
</div>

// PHP files/Atom just render it like this
[grid class="center-xs]Hello World[/grid]

Long story short, I want to edit my code in an external code editor for efficiency's sake, but I also want to use shortcodes for consistency and maintainability's sake.

Any idea how I can do that?

Solution

  • You can't.

    You can't simply take just the contents of the WYSIWYG editor and use it as a WYSIWYG editor from Atom.

    You can, however;

    1. Take your code from your WordPress WYSIWYG editor.
    2. Put it into your editor, Atom.
    3. Edit it in your editor, Atom.
    4. Put it back into your WordPress WYSIWYG editor in WordPress and save it.

    Best solution

    Your best bet is to create a custom page template using PHP for the specific page and then use <?php echo do_shortcode( '[grid class="center-xs]Hello World[/grid]' ); ?> inside there.