View
333
Download
0
Category
Preview:
Citation preview
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
</div>
<div class="content-col-side">
This is your sidebar content
</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.
Recommended