Advanced Layout Templates in WordPress Content Editor

Advanced Layout Templates in WordPress Content Editor

We all know even with a little knowledge of HTML we can update or maintained any WordPress powered website. Like add or remove pages, content, images, products, blogs etc. where as a Tiny MCE rich-text editor can give any skill level or tools web editors need to style and publish their post. But creating something beyond a single column text with some floated images requires at least a basic knowledge of HTML. This article will help you to understand how to manage multicolumn content layouts within the comfort of the WYSIWIG editor .

Creating a Custom Layout Here we are going to insert a few HTML elements into the editing window and style them.

WordPress’ default_content filter allows us to insert set content into any post

THE BACK END By adding the following to functions.php, each new post we create will come pre-stocked with two divs, classed content-colmain and content-col-side, respectively <?php add_filter('default_content','custom_editor_content'); functioncustom_editor_content($content){ $content= ' <div class="content-col-main"> This is your main page content &nbsp; </div> <div class="content-col-side"> This is your sidebar content &nbsp; </div>

'; return$content; } ?> Now give some style <?php add_editor_style('editor-style.css'); ?> Create a style sheet named editor-style.css, and place it in the theme folder body{ background: #f5f5f5; } .content-col-main { float:left; width:66%; padding:1%; border: 1px dotted #ccc; background: #fff; }

.content-col-side { float:right; width:29%; padding:1%; border: 1px dotted #ccc; background: #fff; } img{/* Makes sure your images stay within their columns */ max-width: 100%; width: auto; height: auto; } Now, when you create a new post, you will see two columns that you can type or paste your content into:

Now you have it - a simple multi-column template in your content editor.

THE FRONT END

You can also use this technique to create objects to target later with JavaScript.

To create a different default layout template to each of your post types: <?php add_filter('default_content','custom_editor_content'); functioncustom_editor_content($content){ global$current_screen; if($current_screen->post_type=='page'){ $content= '

// TEMPLATE FOR YOUR PAGES '; } elseif($current_screen->post_type=='POSTTYPE'){ $content= ' // TEMPLATE FOR YOUR CUSTOM POST TYPE '; } else{ $content= ' // TEMPLATE FOR EVERYTHING ELSE '; } return$content; } ?> But if youâ&#x20AC;&#x2122;d like to use a different style sheet entirely for each post type,you can do so with this snippet from WPStorm: <?php functioncustom_editor_style(){

global$current_screen; switch($current_screen->post_type){ case'post': add_editor_style('editor-style-post.css'); break; case'page': add_editor_style('editor-style-page.css'); break; case'[POSTTYPE]': add_editor_style('editor-style-[POSTTYPE].css'); break; } } add_action('admin_head','custom_editor_style'); ?>

The above explanation is based on the assumption that you already know the layout that your client wants to give their content as the layout structures cannot be easily edited by clients. Hope this article will help you to create an advance layout template in WordPress and also improve your wordPress website development workflow.

iMediadesigns provide cost effective web design and development solutions and offers custom website design services in Toronto.