Title: tinyWYM Editor Author: arickards Published: ଅଗଷ୍ଟ 9, 2015 Last modified: ମାର୍ଚ୍ଚ 12, 2018 --- Search plugins ![](https://ps.w.org/tinywym-editor/assets/banner-772x250.jpg?rev=1413860) This plugin **hasn’t been tested with the latest 3 major releases of WordPress**. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress. ![](https://ps.w.org/tinywym-editor/assets/icon-256x256.jpg?rev=1413860) # tinyWYM Editor By [arickards](https://profiles.wordpress.org/arickards/) [Download](https://downloads.wordpress.org/plugin/tinywym-editor.zip) * [Details](https://ory.wordpress.org/plugins/tinywym-editor/#description) * [Reviews](https://ory.wordpress.org/plugins/tinywym-editor/#reviews) * [Installation](https://ory.wordpress.org/plugins/tinywym-editor/#installation) * [Development](https://ory.wordpress.org/plugins/tinywym-editor/#developers) [Support](https://wordpress.org/support/plugin/tinywym-editor/) ## Description tinyWYM Editor was created to help inexperienced WordPress users create cleaner, more semantic markup, and to avoid some of the pitfalls of WordPress’s standard WYSIWYG editor. It does this by labelling and highlighting all HTML elements in the editor, creating a visual representation of the HTML being generated. tinyWYM Editor also gives more experience users all the control and flexibility of the text editor without having to leave the visual editor. Create and edit any HTML element, add attributes, and wrap or unwrap elements all from the visual editor. See the [Screenshots](https://wordpress.org/plugins/tinywym-editor/screenshots/) and [FAQ](https://wordpress.org/plugins/tinywym-editor/faq/) sections for details on how to use tinyWYM Editor. ## Screenshots * [[ * Wordpress editor without tinyWYM installed: Everything looks okay, but… * [[ * With tinyWYM installed: empty tags and superfluous markup revealed. * [[ * tinyWYM Editor converts WordPress’s WYSIWYG editor into a WYSIWYM editor. * [[ * Create any HTML tag from selection: Select text then click the button or hit Ctrl+T. * [[ * Wrap the current element in a new HTML element: Place caret in element you want to wrap, then click the button or hit Ctrl+T. * [[ * Wrap multiple elements in a new HTML element: Select elements you want to wrap, then click the button or hit Ctrl+T. * [[ * Enter the new HTML tag name and any attributes you want it to have, then click‘ Okay’. * [[ * Elements are now wrapped in a new tag. * [[ * Edit any element: Alt+Click any element then edit its tag and attributes. * [[ * Toggle tinyWYM on and off with the button or ctrl+W. ## Installation There are two options for installing and setting up this plugin. #### Upload Manually 1. Download and unzip the plugin 2. Upload the ‘tinyWYM-editor’ folder into the ‘/wp-content/plugins/’ directory 3. Go to the Plugins admin page and activate the plugin #### Install Via Admin Area 1. In the admin area go to Plugins > Add New and search for “tinyWYM Editor” 2. Click install and then click activate ## FAQ Installation Instructions There are two options for installing and setting up this plugin. #### Upload Manually 1. Download and unzip the plugin 2. Upload the ‘tinyWYM-editor’ folder into the ‘/wp-content/plugins/’ directory 3. Go to the Plugins admin page and activate the plugin #### Install Via Admin Area 1. In the admin area go to Plugins > Add New and search for “tinyWYM Editor” 2. Click install and then click activate How do I create an HTML element from a selection? To create a new element from a selection first select some text. tinyWYM Editor plugin adds a new button to the toolbar. Click it and a dialogue will appear with a field for your new tag and any attributes you want to give it. Enter your new HTML tag and any desired attributes, then click the ‘Okay’ button. (You can also hit Ctrl+T instead of clicking the button to open the dialogue.) How do I wrap one HTML element in another HTML element? To wrap an element in another element, place the caret inside the element that you want to wrap. tinyWYM Editor plugin adds a new button to the toolbar. Click it and a dialogue will appear with a field for your new tag and any attributes you want to give it. Enter your new HTML tag and any desired attributes, then click the ‘ Okay’ button. (You can also hit Ctrl+T instead of clicking the button to open the dialogue.) How do I edit or add attributes to an HTML element? Click any element while holding the Alt key and a dialogue will appear where you can edit the current HTML tag and any attributes it might have or you want to give it. Enter your new HTML tag and any desired attributes, then click the ‘Okay’ button. How do I unwrap an HTML element from its parent element or remove text from its containing element? Click any element while holding the Shift+Alt and that element will be removed from the markup preserving any inner text or child elements. Why does tinyWYM Editor remove my theme’s editor styles? tinyWYM Editor removes the current theme’s editor stylesheet by default, however, you can enable your theme’s editor stylesheet by going to Settings – tinyWYM Editor and checking ‘Allow theme editor styles’. tinyWYM Editor removes other editor styles partly in order to prevent conflicts, but also because it is assumed that if you are using tinyWYM editor it is because you want to see the _markup_ being posted to the front end of the site and not what it will eventually look like. After all, that is what the plugin is for. Can I disable tinyWYM Editor for certain users? tinyWYM Editor allows administrators to disable tinyWYM for particular user roles; Administrators, Editors, Authors, or Contributors. Go to Settings – tinyWYM Editor. How do I toggle the tinyWYM styles on and off? tinyWYM Editor adds a button to the editor toolbar. Click it to toggle tinyWYM styles on and off. You and also use the keyboard shortcut ctrl+W. How do I hide tinyWYM by default when creating or editing a page or post? tinyWYM Editor can be hidden by default when creating or editing a page or post in the tinyWYM setting page. Just go to Settings – tinyWYM Editor. ## Reviews ![](https://secure.gravatar.com/avatar/37fad7b6699d452008c2077b09303f20e55ce3b56c3ef1899fa486db075c793f? s=60&d=retro&r=g) ### 󠀁[Awsome approach](https://wordpress.org/support/topic/awsome-approach/)󠁿 [farior](https://profiles.wordpress.org/farior/) ଏପ୍ରିଲ 11, 2018 1 reply This plugin is great for people that have minor HTML knowledge, just AWESOME idea! It could be great to strip the code on even deeper level for advanced users, I’m still not sure what is the best approach to such functionality… ![](https://secure.gravatar.com/avatar/5eb07f6154d13c8efffc7142a9d9c944e73b8f72e00a96d83f0e3e1fa223ff01? s=60&d=retro&r=g) ### 󠀁[Great!](https://wordpress.org/support/topic/great-6052/)󠁿 [tuyettrangwo](https://profiles.wordpress.org/tuyettrangwo/) ଫେବୃୟାରୀ 23, 2017 1 reply Great! But when display in visual, part which overflow is hidden I have to click icon eyes to disable it, and after editor, i click icon eyes to enable it again and i select text, click <> and input tag & style ![](https://secure.gravatar.com/avatar/1ddd4c3aaa15358a2028580f341ca11676478f20d61d21014a8d88ff8141bcd3? s=60&d=retro&r=g) ### 󠀁[excellent addition](https://wordpress.org/support/topic/excellent-addition-4/)󠁿 [James Marlow](https://profiles.wordpress.org/jpmarlow101sbcglobalnet/) ସେପ୍ଟେମ୍ବର 3, 2016 actually enjoy using the app; what I’d like to see though is something like a full blown html editor with search features, but the front end on this adds some functionality for search-visual rundown on what you have. This app lets you see what element are presently there and some that may need to be deleted. You can delete them from the front or back, but it is easy to see what is in the way on the front. It is somewhat like having an intermediate preview page. ![](https://secure.gravatar.com/avatar/2aa744373833e53dfb3e27e7a68d02067011b02aa7e4e2fe873ca8396fb058e2? s=60&d=retro&r=g) ### 󠀁[Fantastic](https://wordpress.org/support/topic/fantastic-1153/)󠁿 [Tim Reeves](https://profiles.wordpress.org/tim-reeves/) ସେପ୍ଟେମ୍ବର 3, 2016 At long last: Now we can see the container hierarchy while editing visually, and manipulate it too! The plugin author is quick to respond, clear friendly and helpful. Unreserved recommendation! ![](https://secure.gravatar.com/avatar/7bb33508c42b91a251f0376dac5af97e8b8645df7060770307de4d49caf26698? s=60&d=retro&r=g) ### 󠀁[Awesome](https://wordpress.org/support/topic/awesome-3007/)󠁿 [lukaborna](https://profiles.wordpress.org/lukaborna/) ସେପ୍ଟେମ୍ବର 3, 2016 I was looking for something like this for my friend 🙂 [ Read all 6 reviews ](https://wordpress.org/support/plugin/tinywym-editor/reviews/) ## Contributors & Developers “tinyWYM Editor” is open source software. The following people have contributed to this plugin. Contributors * [ arickards ](https://profiles.wordpress.org/arickards/) [Translate “tinyWYM Editor” into your language.](https://translate.wordpress.org/projects/wp-plugins/tinywym-editor) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/tinywym-editor/), check out the [SVN repository](https://plugins.svn.wordpress.org/tinywym-editor/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/tinywym-editor/) by [RSS](https://plugins.trac.wordpress.org/log/tinywym-editor/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.4 * Minor CSS fixes. * Added new semantic HTML tags. * Added option to hide tinyWYM by default. #### 1.3 * Fixed bug making header tags overlap images with captions. * Changed attributes input to textarea and widened modal window. #### 1.2.6 * Fix bug with various embeds not always showing. #### 1.2.5 * Quick update for WordPress 4.6 compatability. #### 1.2.4 * Quick update for WordPress 4.5 compatability. #### 1.2.3 * Fixed: CSS bug causing video embeds to not show in some situations. #### 1.2.2 * Added keyboard shortcut (ctrl+W) for toggling tinyWYM styles on and off. * Update readme.text. * Update screenshots, banners and thumbnails. #### 1.2.1 * Fixed: Toggle button not showing in BeaverBuilder’s front end editor. #### 1.2 * Added new menu button to allow users to toggle tinyWYM styles on and off. #### 1.1.1 * Fix compatibility issue with older versions of PHP. #### 1.1 * Added new settings page * Added option for admins to disable tinyWYM for Administrators, Editors, Authors, or Contributors. * Added option to re-enable the current theme’s editor styles. * Added option to increase tinyWYM priority when loading scripts. (This was mainly to allow tinyWYM to work with BeaverBuilder’s front end editor.) #### 1.0.2 * CSS improvements * Increase script loading priority to allow for use with BeaverBuilder #### 1.0.1 * Update readme.txt & banner images for WordPress.org page #### 1.0 * Initial release ## Meta * Version **1.4.1** * Last updated **8 years ago** * Active installations **1,000+** * WordPress version ** 4.2.0 or higher ** * Tested up to **4.9.29** * Language * [English (US)](https://wordpress.org/plugins/tinywym-editor/) * Tags * [tinyMCE](https://ory.wordpress.org/plugins/tags/tinymce/)[visual editor](https://ory.wordpress.org/plugins/tags/visual-editor/) [wp editor](https://ory.wordpress.org/plugins/tags/wp-editor/)[wysiwyg](https://ory.wordpress.org/plugins/tags/wysiwyg/) [wysiwym](https://ory.wordpress.org/plugins/tags/wysiwym/) * [Advanced View](https://ory.wordpress.org/plugins/tinywym-editor/advanced/) ## Ratings 5 out of 5 stars. * [ 6 5-star reviews ](https://wordpress.org/support/plugin/tinywym-editor/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/tinywym-editor/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/tinywym-editor/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/tinywym-editor/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/tinywym-editor/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/tinywym-editor/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/tinywym-editor/reviews/) ## Contributors * [ arickards ](https://profiles.wordpress.org/arickards/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/tinywym-editor/)