The WP Edit Pro Custom Styles has always been a premium plugin… until now. Beginning in version 1.7 of WP Edit Pro; the Custom Styles addon has been incorporated into WP Edit Pro.
Custom Styles will allow a user to create unique styles (inline or by class name), which will appear in the “Formats” editor dropdown button. These custom created styles can then be applied to any element in the content editor.
WP Edit Pro Styles Tab
Visit the WP Edit Pro admin settings page, and click the “Styles” tab. This tab contains four different sections.
- Enable Predefined Styles
- Create/Edit a Custom Style
- Created Styles
- Editor CSS Stylesheet
Enable Predefined Styles
The Predefined Styles include over 80 styles, written by the plugin author. When enabling the option, these predefined styles will appear in the “Formats” dropdown button.
Predefined styles include text colors and weights, color inset boxes, link download buttons, and much more.
Create/Edit Custom Style
This is the area where custom styles can be created/edited. When a custom style is created, it will be added to the “Created Styles” box below. Unlimited custom styles can be created. We will be looking at how to create a custom style further down this article.
Created Styles
After a custom style is created, it will appear in this table. Each custom style can be edited (loading it back into the “Edit Custom Style” area); or deleted.
Editor CSS Stylesheet
This editor stylesheet will be applied to the TinyMCE content editor. If it is desired to change the default CSS behavior of the editor, this is where the changes need to be made.
Enable Predefined Styles
By enabling the Predefined Styles option; a new sub-menu item called “Defined” will be added to the “Formats” editor dropdown button.
You can use these predefined styles and add them to applicable content area selections. Let’s add a 3D button to some text:
Create/Edit a Custom Style
Custom styles can also be created. When one or more custom styles are created; a new sub-menu item called “Custom” will be added to the “Formats” editor dropdown button.
Creating a custom style follows the TinyMCE formatting syntax (more info). There are six steps when creating a custom style:
Step 1: Title
A title will need to be entered for every custom style. Titles are case-sensitive, and cannot be duplicated. You may have MyTitle and myTitle; but you cannot have myTITLE and myTITLE.
Step 2: Type
There are three types of custom styles; inline, block and selector.
Inline Type
Inline types include span, bold, italic, strong, button, code and img elements. These types of elements appear “inline”; typically inside a p element.
Block Type
Block types include div, blockquote, h1 – h6, p, pre, ol, ul and table elements. These types of elements appear as a block.
Read more about the Differences Between Inline and Block Level Elements.
Selector
For even further custom control, a selector may be entered. Let’s say we would like to target all span elements inside a p element; our selector would be p span. Or, if we wanted to target each list item in an unordered list; our selector would be ul li.
Step 3: Element
The Element selection will change, based on which item “Type” is selected in step 2. If “inline” is selected in step 2, the available inline elements will appear. If “block” is selected in step 2, all available block elements will appear. If “selector” is selected in step 2, an input field will appear here, where you may enter your selector syntax.
Step 4: Classes
Specific class names can be inserted here. If you prefer to keep elements using class names; and the class is defined in the theme stylesheet; the element will appear with the proper styles in the front-end of the website. The element WILL NOT appear with the proper styles in the tinymce editor (content editor), unless you also add the class name to a stylesheet used by the editor (more below).
Step 5: Styles
CSS styles can be inserted here. These styles will apply only to this element; so it is only necessary to enter the “property name: property value;” pairs. Let’s say we wish the element to be a red color with a bolded font; we would enter color:#F00;font-weight:bold; into this area.
Step 6: Wrappper
If true, the created style will be used as a block level wrapper. This will typically be set to “false”. The wrapper option will disable itself if “Block” is selected in step 2 above; since it is not applicable.
Custom Styles Examples
Let’s look at a few examples.
Created Styles
As new custom styles are created, they will be listed here. This provides quick access to edit and delete a custom style; as well as a great reference for each styles attributes.
Edit Style
This button will load the selected custom style back into the “Create/Edit Custom Style” area. The custom style attributes will be auto-loaded; and can be easily modified and saved again.
Delete Style
This button will delete the selected custom style. This action is permanent; and the custom style will no longer be available.
Custom Styles in Content Editor
The custom styles created will appear in the content editor, under the “Formats” dropdown button.
Editor Stylesheet
Alas! An easy way to add a stylesheet to the TinyMCE editor (content editor) initialization process. Here is how it works:
- The editor below is a CSS stylesheet editor. It will highlight and space CSS code accordingly.
- This stylesheet gets included in the loading of the TinyMCE editor. Any styles added to the stylesheet below will be used on content inside the editor.
- For example, if p{color:red;} is entered into the stylesheet below; all p elements in the editor will appear with a red font color.
- When the editor is loaded; the styles below will be written to a .css file; and included in the loading of the editor.
Use the stylesheet to add classes or selectors matching that of your active theme. It’s a good idea to look at the themes stylesheet, and try to mimic the commonly used styles and classes.
Then, create a custom style which matches the class name; and your users will easily be able to apply your custom styles to the editor content.
Other Cool Uses
Have you found other neat uses of this feature? I’d love to hear them! Use the comment section below to share your experiences.
This is an amazing post written on WPeditpro plug in. This really helped me gain more knowledge about this plug in. It is an amazing plug in to use. It helps in creating custom styles. Thank you for writing such a detailed and easy to understand about WPeditpro.
Is there a way to remove headers from the formats dropdown? Basically, I want a dropdown with only the custom styles that I add and nothing else.
Hi Mark,
At this time, the only way to remove the headers would be to go into the code and manually edit the adjustments. However, this would be overwritten anytime the plugin is updated.
I’ll try to add an option that will remove the headers (I think you are the second person to request this functionality).
If it’s dire for you to remove them; let me know, and I’ll provide the steps on how to do it manually. Just remember, you’d have to do this each time the plugin is updated (until I implement the option).
Hi and thanks for the great plugin! Is it possible for me to change the text “Custom Styles” in the format dropdown? Thanks!
Hello, and sorry for my delay. At this time, there is not currently a way to change the text (other than hard coding). This is because some of the text is shown via javascript… and I haven’t set that part of the plugin up for translation. Once I do that, it will be very easy to adjust the text to whatever you like, using a translation file.
I am preparing a new release… but I will finalize the rest of the language localization for the update after this one.
Thank you for your patience.
Hey Josh, i want to know if i could hidden “Pre-Defined Styles” and have only my custom styles in the Button Formats ? for finally rename “Customs styles” by my translate in french …its more easy to use for my the user… thanks !
Hello Sophie,
The predefined styles are added to the Formats dropdown via the option in the plugin settings page (Styles tab). Unchecking the option will remove the predefined styles.
Any of the plugin text can be translated. However, I don’t currently have a French translation. It’s a BIG job, but if you’re up for the challenge; I’ll include your translation for future users (with credit to you, of course). You can read more on providing a plugin translation; or contact me using this website and we can talk via email.
Hello,
I do not see the option to paste content from Microsoft word.
Is there a bottom I am missing?
Hello Isaac,
The past from word button was removed by WordPress core in WordPress version 3.9. They modified the editor code; so now we are supposed to paste directly into the visual side of the editor.
I’ve heard mixed reviews about this functionality… and I’d love to hear your experiences.
Hey Josh… is it possible to import the theme / custom style sheets into the editor style sheet (with @ or import statements?) such that all the theme styles would automatically be in the editor and nothing else would have to be done to make the editor match the frontend?
Hi Norm… it’s a little more complicated than that. Themes use extra styles for things like the “body” tag.. which are also used by the editor. It causes the editor to display some pretty radical behavior.
Instead, it’s better to manually go through your theme stylesheet… and create the necessary styles with the WP Edit Pro “Editor Stylesheet”. It’s a little more time-consuming… but will give much more solid results in the long run.