Custom Styles


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.

Enable the Predefined Styles.predefined1
In the content editor, predefined styles appear under the “Formats” button.predefined2

You can use these predefined styles and add them to applicable content area selections. Let’s add a 3D button to some text:

Make a selection and select a predefined style.predefined3
The style will appear properly in the editor.predefined4
The style will appear properly on the front-end of the website.predefined5

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.

A span element titled Red Span; with a class name of mySpan; and inline styles of a red, bold font color.
custom_style1
A p element titled Blue Paragraph; with a class name of myBlueP; and an inline style of a line height of 1.3em.
custom_style2

This example uses a selector to target unordered list items.custom_style3

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.
created_styles

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.

The Custom Styles dropdown menu.custom_style_editor

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.

editor_stylesheet
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.


Josh Lobe has written 53 articles

Josh Lobe is the sole developer of WP Edit and WP Edit Pro. A father of two; a husband to a beautiful wife; and a small home in the suburbs... he primarily enjoys coding in WordPress and designing websites.

12 thoughts on “Custom Styles

  1. Will Stewart says:

    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.

    1. Josh Lobe says:

      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).

    1. Josh Lobe says:

      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.

  2. rvcom says:

    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 !

    1. Josh Lobe says:

      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.

    1. Josh Lobe says:

      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.

  3. Norm Sash says:

    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?

    1. Josh Lobe says:

      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.

Leave a Reply

Your email address will not be published. Required fields are marked *

ENTER CAPTCHA MATH *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>