{"id":2010,"date":"2009-10-25T14:00:11","date_gmt":"2009-10-25T13:00:11","guid":{"rendered":"http:\/\/www.bitvolution.com\/?p=252"},"modified":"2009-10-25T14:00:11","modified_gmt":"2009-10-25T13:00:11","slug":"supporting-the-wordpress-visual-editor-in-your-theme","status":"publish","type":"post","link":"https:\/\/www.tomfotherby.com\/blog\/index.php\/2009\/10\/supporting-the-wordpress-visual-editor-in-your-theme\/","title":{"rendered":"Supporting image alignment in your WordPress theme"},"content":{"rendered":"<p>If you are making a WordPress theme you owe it to the user of your theme to make sure image alignment works as expected. Most of the Visual Editor formatting buttons use inline CSS which won&#8217;t be affected by the theme but this is not the case with the alignment buttons in pages\/posts <strong>when applied to images<\/strong>.<\/p>\n<p>The red labels show what Visual Editor buttons I&#8217;m talking about:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.tomfotherby.com\/blog\/wp-content\/uploads\/2009\/10\/wordpressVE_imageAlignment.png?resize=520%2C336&#038;ssl=1\" alt=\"Wordpress visual editor image alignment buttons\" width=\"520\" height=\"336\" class=\"aligncenter size-full wp-image-254 bordered\" \/><\/p>\n<p><!--more--><br \/>\nIf you don&#8217;t use the Visual Editor, this issue still affects you when you insert a image and use one of the following options:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.tomfotherby.com\/blog\/wp-content\/uploads\/2009\/10\/wordpress_imageAlignment.png?resize=562%2C29&#038;ssl=1\" alt=\"wordpress_imageAlignment\" width=\"562\" height=\"29\" class=\"aligncenter size-full wp-image-270 bordered\" \/><\/p>\n<p>To make image alignment work, you need to add the following CSS to style.css:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\nimg.aligncenter {\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n\nimg.alignright {\n  padding: 4px;\n  margin: 3px 0 2px 10px;\n  display: inline;\n}\n\nimg.alignleft {\n  padding: 4px;\n  margin: 3px 10px 2px 0;\n  display: inline;\n}\n\n.alignleft {float: left}\n.alignright {float: right}\n<\/pre>\n<p>Go check and update your theme now &#8211; it&#8217;ll save you a telephone call or email from a confused client.<\/p>\n<p>While on this topic, there are a few other WordPress conventions that you need to support in your theme. Here is a handy block of CSS which covers all the bases:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/* WordPress convention - e.g. used by the visual editor to format post\/page elements *\/\n.entry-content img {margin: 0 0 1.5em 0}\n.aligncenter, img.aligncenter {clear: both;display: block;margin-left: auto;margin-right: auto}\nimg.alignright { padding: 4px;margin: 3px 0 2px 10px;display: inline}\n.alignright {float: right}\nimg.alignleft {padding: 4px;margin: 3px 10px 2px 0;display: inline}\n.alignleft {float: left}\n.wp-caption {text-align: center;margin-bottom: 1.5em}\n.wp-caption img {border: 0 none}\n.wp-smiley {max-height: 1em;margin:0 !important}\n.gallery-caption {margin:-1.5em 0 0 0}\nblockquote.left {float: left;margin-left: 0;margin-right: 20px;text-align: right;width: 33%}\nblockquote.right {float: right;margin-left: 20px;margin-right: 0;text-align: left;width: 33%}\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>If you are making a WordPress theme you owe it to the user of your theme to make sure image alignment works as expected. Most of the Visual Editor formatting buttons use inline CSS which won&#8217;t be affected by the theme but this is not the case with the alignment buttons in pages\/posts when applied [&hellip;]<\/p>\n","protected":false},"author":52,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[82],"tags":[85,87],"class_list":["post-2010","post","type-post","status-publish","format-standard","hentry","category-web-design","tag-css","tag-wordpress"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2010","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/52"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2010"}],"version-history":[{"count":0,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2010\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}