Add to Cart:
Plugin is tracked for developer purposes.
Plugin is tracked for developer purposes.
Plugin is tracked for developer purposes.
Description:
Ultimate Tinymce Classes and IDs is a plugin for WordPress TinyMCE which enables the usage of CSS classes and CSS ids on any HTML element within TinyMCE. Together with an external CSS file, Ultimate Tinymce Classes and IDs bridges the (visual) gap between the content entered through TinyMCE and the actual output.
Ultimate Tinymce Classes and IDs takes it to the next level by letting you set these CSS styles, based on CSS Class Selectors and CSS ID Selectors, on any element, giving the user more power on the visual representation then ever before (imagine one being able to choose 20 different classes or a handful of ids to apply on p elements with the ease of a click).
Anytime a user adjusts any class or id via the dropdown select boxes, the changes are applied real-time right in the content visual editor window.
Demonstration
Online Demonstration – Try before you buy
Intro Video
Screenshot:
Work Flow
- Create a stylesheet using type selectors, and class and id selectors.. like THIS ONE. This content will be used to auto-populate the dropdown boxes.
- Place the stylesheet in the appropriate location in the plugin, making sure the name is correct. (See Notes Below)
- Check the editor and test to see the classes and id’s in action.
- To duplicate the styles on the front-end of the website, simply copy the styles from the stylesheet created in step 2 to the stylesheet used for the front-end of the website.
Tinymce Span Button
Because this plugin uses type selectors, I wanted to make an easy way for an end-user to wrap selected content with span tags. This plugin will add a “span” button to the visual editor, which when clicked will wrap the selected content with opening and closing span tags.
This is helpful for you as an admin of this plugin because you can now create tons of styles to apply to the span selector, which can in turn be applied to any content selected by the end user.
I will probably include this button as default in the “Classes and IDs” plugin. But for now, you can pick it up here: Ultimate Tinymce Span Button
Notes
- This plugin will require the user (administrator) to create an external stylesheet which will be used to populate the dropdown boxes.
- This external stylesheet will be loaded ONLY in the editor window, so all styles in this stylesheet MUST ALSO be duplicated in the front-end stylesheet (usually the themes folder).
- An example stylesheet is included with the plugin. Please modify this one to your needs, keeping the name intact. Remember, the name of the stylesheet CAN NOT be changed… but the contents can.
- This stylsheet can be found in the “wp-content/plugins/ultimate-tinymce-classes-ids/css/” directory, and is named “classes_and_ids.css”.
- Please use my Support Forum to join the community and share ideas regarding this plugin.
- This plugin will not work when there are multiple CSS files in the “content_css” tinymce initialization. This means it is incompatible with Google Webfonts (and the “enable content.css” option in Ultimate Tinymce).
Add to Cart:
Plugin is tracked for developer purposes.
Plugin is tracked for developer purposes.
Plugin is tracked for developer purposes.
sending...
Hi Josh,
Looks like an assume plugin!
Q: I’m using Artisteer and Headway Themes for creating the look & feel. Does this plugin cooperate with them?
Keep up the good work!
Tom
Hi Tom, and thank you.
I have had no responses regarding compatibility issues. So, I would assume you are safe. The only issue which might arise (that I can think of), is if trying to add multiple stylesheets to the editor. However, this can be easily fixed using my Advanced Configuration plugin. If it comes to you needing both, I’ll work something out with you personally.
If you decide to go with it, and have any issues whatsoever, feel free to use my contact form to shoot me a personal email and I’ll be happy to give you some one-on-one time.
Hi Josh I got the single pack and all the installs worked great except the classes and ID. I get a 404 error coming up and the buttons don’t work, so I have deactivated it for the moment, not sure what is wrong?
The same thing is happening with me (404 error message). Could you help us?
@ Bill Ray, I believe we solved your issue. If I recall, you contacted me directly and we got this working.
@ Carlos, I don’t recall what we did with Bill Ray
Could you please contact me directly using the “Contact” tab above, and send me an email? I’m sure there is something in your installation which is conflicting with the installation. I’ll be happy to help you get this working.
Hello Josh,
Very interesting this classes and ids plugin. I have a few questions. I use Thesis theme and it can be tempermental and conflicting. Is your plugin meant for pure wordpress or will it work with thesis or other themes? This is very teckie for my level of knowledge. Is there a video with a step by step walk thru demonstrating the use?
Regards,
David
Hello David,
I added a brief “intro” video to the plugin page. I will add a more in-depth video tutorial once I see if the plugin is of interest to the general community. I definitely appreciate you taking the time to check it out. I think it’s going to be the next step toward a true ‘wyswyg’ editor.