Enviar artigo por e-mail:

Nome do remetente:

E-mail de destino:

Comentário:
§
Restam-lhe  caracteres

|Sair

Every-time I created a word press theme, I felt the need to allow my theme users to use on their contents, the CSS styles that I had created to the theme itself.

They were especially created in order to maintain a visual identity between the layout and the contents, and should be directly applied at the author’s will! – How-come the styles, created specially for that theme (my CSS Classes), weren’t available to be applied trough the default WYSIWYG text editor?

My objective was allowing users to be able to apply the custom styles, in the default panel, using the panels own logic, without any particular knowledge of HTML or CSS and without having to stick to the editor’s default predetermined styles.

In this brief tutorial I’ll explain a very simple way to do this, just by adding a couple of lines of code to your theme’s functions.php, and by creating a very simple CSS file to host your custom styles.

In my previous article about this subject (www.wdmac.com/word-press-custom-css-styles-in-the-wysiwyg-editor) we’ve edited a couple of WP core files, and the result was satisfactory. However those edits where lost on every WP upgrade, and that was not satisfactory at all. This is a clean, straightforward technique, that is “permanent” and non-upgrade-dependent.

This article was updated: August 12th, 2010

1.We will start by creating the new CSS file.

The whole idea about creating a new CSS file, and not just adding your styles to the the theme’s default css file, is to allow you to use this technique in word press themes that you didn’t create, and that can be eventuality upgraded or updated whereas you’d loose all your custom styles with the update.

If you create a new CSS file to host your custom styles, you will never loose them even if the theme gets updated (or changed). Just link the new file to your theme and that’s it!

We’ll call it mycustomstyles.css and we will use it to create our theme’s custom styles

The styles bellow are just used for illustrative purposes and can allow, for instance, to position your images within your posts.

/* CSS Document
============================================ */
.fleft {
float:left;
margin-right:8px;
}
.fright {
float:right;
margin-left:8px;
}
/* Fim de CSS
============================================ */

2.Editing you theme’s functions.php

Typically all Word Press Themes have this file, wich can be found on your theme’s root folder.
What we will do is simply add the code-block bellow at the bottom of your functions.php, before it’s end, just above the php closing tag ?>

This code-block will then create a new select box in your word-press text editor, where your custom styles will be listed and applicable.

/* Custom CSS styles on WYSIWYG Editor – Start
======================================= */
if ( ! function_exists( ‘myCustomTinyMCE’ ) ) :
function myCustomTinyMCE($init) {
$init['theme_advanced_buttons2_add_before'] = ‘styleselect’; // Adds the buttons at the begining. (theme_advanced_buttons2_add adds them at the end)
$init['theme_advanced_styles'] = ‘Float Left=fleft,Float Right=fright’;
return $init;
}
endif;
add_filter(‘tiny_mce_before_init’, ‘myCustomTinyMCE’ );
add_filter( ‘mce_css’, ‘tdav_css’ );
// incluiding the Custom CSS on our theme.
function mycustomStyles(){
wp_enqueue_style( ‘myCustomStyles’, get_bloginfo(‘template_url’).’/mycustomstyles.css’, ”,”,’all’ ); /*adjust this path if you place “mycustomstyles.css” in a different folder than the theme’s root.*/
}
add_action(‘init’, ‘mycustomStyles’);
/* Custom CSS styles on WYSIWYG Editor – End
======================================= */

And by following these steps, your Word Press should be able to allow your theme users to use and easily apply your custom CSS styles directly in the word press WYSIWYG editor – TynYMCE.

EXTRA:

However, sometimes you don’t just wish to apply your own custom styles, but instead you wish to remove some of the predetermined styles from the text editor and your author’s reach… This way you could prevent unexperienced users to get confused by leaving them just the essential to produce quality content in their website!

For this special cases there is a possibility to remove some buttons the the default text editor, leavig just the ones you see fi, ar seem convenient to your needs.

To remove any of those buttons we will use a similar logic as used in step 2 above. We will just add another line in the condition created in the code-block at step 2.

3.Removing default styling buttons from the Word press default WYSIWYG editor

So, the in code-block created in step 2, we shall add a new line of code, as already shown bellow:

/* Custom CSS styles on WYSIWYG Editor – Start
======================================= */
if ( ! function_exists( ‘myCustomTinyMCE’) ) :
function myCustomTinyMCE($init) {
$init['theme_advanced_disable'] = ‘outdent, indent, justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, fontselect, fontsizeselect, forecolor, backcolor, forecolorpicker, backcolorpicker, formatselect’; // Removes the undesired buttons
$init['theme_advanced_buttons2_add_before'] = ‘styleselect’; // Adds the buttons at the begining. (theme_advanced_buttons2_add adds them at the end)
$init['theme_advanced_styles'] = ‘Float Left=fleft,Float Right=fright’;
return $init;
}
endif;
add_filter(‘tiny_mce_before_init’, ‘myCustomTinyMCE’ );
add_filter( ‘mce_css’, ‘tdav_css’ );
// incluiding the Custom CSS on our theme.
function mycustomStyles(){
wp_enqueue_style( ‘myCustomStyles’, get_bloginfo(‘template_url’).’/mycustomstyles.css’, ”,”’,'all’ ); /*adjust this path if you place “mycustomstyles.css” in a different folder than the theme’s root.*/
}
add_action(‘init’, ‘mycustomStyles’);
/* Custom CSS styles on WYSIWYG Editor – End
======================================= */

No code created on step 2 was changed, just a new line of code was added. No further changes are needed.

By default these are the existing buttons on TinyMCE, distributed with Word-Press (3.0), that can be removed, should you wish to.

/* Default Buttons
* bold
* italic
* underline
* strikethrough
* justifyleft
* justifycenter
* justifyright
* justifyfull
* bullist
* numlist
* outdent
* indent
* cut
* copy
* paste
* undo
* redo
* link
* unlink
* image
* cleanup
* help
* code
* hr
* removeformat
* formatselect
* fontselect
* fontsizeselect
* styleselect
* sub
* sup
* forecolor
* backcolor
* forecolorpicker
* backcolorpicker
* charmap
* visualaid
* anchor
* newdocument
* blockquote
* separator ( | is possible as separator, too)
*/

Now you have some control over what your authors can or cannot do while using the text editor to create styled content.

Hope i’de save you some time, and avoided some catastrophes, that sometimes happen when you give too much power to someone who doesn’t know hoe to use it. I hope that your authors and yourself will now continue to produce quality contents, well formatted and visually coherent with the theme’s design.

This article was originally published in an article I wrote for the Portuguese Word Press Community blog: wp-portugal.com/2010/07/20/como-utilizar-estilos-proprios-no-editor-de-posts/

Download the code in TXT

Have fun!

MAC

7 Comments »