Tag: wysiwyg editor

Create Widgets using Visual Editor via WYSIWYG Widgets plugin

Many times we want to create just simple text and image widget using the wysiwyg editor. using WYSIWYG Widgets create HTML and image or media in text widget.

Create Widgets using Visual Editor

WordPress widgets are very important in CMS. In every CMS like WP and Drupal we have sidebar widgets. In Drupal creating a sidebar is very easy. WordPress cannot give you default and easy create widget or sidebar functionality. Many times we want to create just simple text and image widget using the wysiwyg editor. There are many easy ways to create widget using text widget functionality. We can add the HTML and image or media in text widget.

With text widget we can add the HTML, CSS and images code in text widget and show in sidebar or footer section. But many times admin does not know about CSS and HTML but still admin wants to add the images and formated text in widgets. There is very nice wordpress plugin which will give you ability to add the widget with formated text and images.

WYSIWYG Widgets

Create Widgets using Visual Editor
Create Widgets using Visual Editor

WYSIWYG Widgets or rich text widgets

This plugin adds so called “Widget Blocks” to your website which you can easily display in your widget areas. Edit widget content using the default WordPress visual editor and media uploading functionality. Create widgets like you would create posts or pages.

You can create or edit the widget blocks just like you would edit any post or page, with all the default WordPress editing functions enabled. This way, you can use the visual editor that comes with WordPress to format your widgets. You can even use media uploading to insert images and so forth.

Create Widgets using Visual Editor config
Create Widgets using Visual Editor config

Features:

  • Create beautiful widgets without having to write HTML code
  • Easily insert media into your widget content
  • Add headings, lists, blockquotes and other HTML elements to your widgets using the WordPress visual editor
  • Use WP Links dialog to easily link to any of your pages or posts from a widget
  • Use shortcodes inside your widgets
  • Translation ready

First install the install and activate the WYSIWYG Widgets plugin. Then install and activate the WYSIWYG Widgets plugin. go to Widget Blocks » Add New to create a new widget block. Basically Widget Blocks are custom post types and every post will became new widget. It is very cool and easy to use. It is useful when you are giving the all the control to admin.

wordpress theme wysiwyg editor default css

Many wordpress developers are creating wordpress theme. Many times when writing in editor and applying formatting. Formatting is not exactly coming in theme. we given wordpress theme wysiwyg editor default css.

Some time image alignment and photo caption is not coming properly.

wordpress theme wysiwyg editor default css

When you are creating new wordpress theme or taking theme from anyone put following CSS code in style.css file. Make sure following CSS code is present in your wordpress theme.

 /* =WordPress Core
 -------------------------------------------------------------- */
 .alignnone {
 margin: 5px 20px 20px 0;
 }

.aligncenter, div.aligncenter {
 display:block;
 margin: 5px auto 5px auto;
 }

.alignright {
 float:right;
 margin: 5px 0 20px 20px;
 }

.alignleft {
 float:left;
 margin: 5px 20px 20px 0;
 }

.aligncenter {
 display: block;
 margin: 5px auto 5px auto;
 }

a img.alignright {
 float:right;
 margin: 5px 0 20px 20px;
 }

a img.alignnone {
 margin: 5px 20px 20px 0;
 }

a img.alignleft {
 float:left;
 margin: 5px 20px 20px 0;
 }

a img.aligncenter {
 display: block;
 margin-left: auto;
 margin-right: auto
 }

.wp-caption {
 background: #fff;
 border: 1px solid #f0f0f0;
 max-width: 96%; /* Image does not overflow the content area */
 padding: 5px 3px 10px;
 text-align: center;
 }

.wp-caption.alignnone {
 margin: 5px 20px 20px 0;
 }

.wp-caption.alignleft {
 margin: 5px 20px 20px 0;
 }

.wp-caption.alignright {
 margin: 5px 0 20px 20px;
 }

.wp-caption img {
 border: 0 none;
 height: auto;
 margin:0;
 max-width: 98.5%;
 padding:0;
 width: auto;
 }

.wp-caption p.wp-caption-text {
 font-size:11px;
 line-height:17px;
 margin:0;
 padding:0 4px 5px;
 }

 

Above CSS code is very important for every wordpress theme.

wordpress-default css for wordpress theme
wordpress-default css for wordpress theme