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 multi-

column 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-col-

main 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’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.