{"id":14029,"date":"2016-03-20T05:02:20","date_gmt":"2016-03-19T19:02:20","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=14029"},"modified":"2016-03-05T17:20:09","modified_gmt":"2016-03-05T07:20:09","slug":"wordpress-blog-post-wysiwyg-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-post-wysiwyg-primer-tutorial\/","title":{"rendered":"WordPress Blog Post WYSIWYG Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/WYSIWYG\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"WordPress Blog Post WYSIWYG Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/WYSIWYG\/WYSIWYG-99of.jpg\" title=\"WordPress Blog Post WYSIWYG Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">WordPress Blog Post WYSIWYG Primer Tutorial<\/p><\/div>\n<p>Often get asked if you can blog on WordPress with very little HTML knowledge, in a WYSIWYG (what you see is what you get) approach.   The answer we give is &#8230; yes &#8230; but the results may disappoint without some other programming intelligence applied.  The idea of a WYSIWYG approach to anything that involves a conversion to anything is tenuous enough, without all the font styling and whitespace issues involved.  However, the discussion is important, as what people have to say, is much more important that what it looks like, in our opinion.<\/p>\n<p>Have to say that, for us, hand crafted HTML is preferable once you get to that Post-&gt;Add New functionality as Julius Sumner Miller used to say &#8230; &#8220;observe&#8221; &#8230;<\/p>\n<p>Take a look at the look of LibreOffice &#8220;Writer Document&#8221; Save As&#8230; HTML (+ get rid of some annoying &lt;span &#8230;&gt; &#8230; &lt;\/span&gt; elements &#8230; ie. WYSIWYG + translation to HTML) &#8230;<\/p>\n<div style=\"background-color:yellow\">\n<p style=\"margin-bottom: 0in; line-height: 100%\">This is a tutorial<br \/>\nabout WYSIWYG in the sense that today we make up a large part of the<br \/>\ncontent of our blog posting not using raw HTML coding.  We create the<br \/>\nmiddle bits here using the Libre Office \u201cWriter Document\u201d<br \/>\nfunctionality, but it could just as easily be done with Microsoft<br \/>\nOffice Word or Open Office or perhaps even Wordperfect.  In other<br \/>\nwords, you don&#8217;t <b>have <\/b><span style=\"font-style: normal\"><span style=\"font-weight: normal\">to<br \/>\nknow HTML to post on a WordPress blog, but, as we always say, \u201cit<br \/>\nhelps a lot\u201d.<\/span><\/span><\/p>\n<p style=\"margin-bottom: 0in; line-height: 100%\"><\/p>\n<p style=\"margin-bottom: 0in; line-height: 100%\"><span style=\"font-style: normal\"><span style=\"font-weight: normal\">So<br \/>\nhere you are a bit trep<\/span><\/span><span style=\"font-style: normal\"><span style=\"font-weight: normal\">i<\/span><\/span><span style=\"font-style: normal\"><span style=\"font-weight: normal\">datious<br \/>\nabout HTML.  First thing we&#8217;d say is to do an online peruse of<br \/>\nW3Schools <\/span><\/span><span style=\"font-style: normal\"><span style=\"font-weight: normal\">at<br \/>\n<a href=\"http:\/\/www.w3schools.com\/\">http:\/\/www.w3schools.com<\/a> <\/span><\/span><span style=\"font-style: normal\"><span style=\"font-weight: normal\">or<br \/>\nread more at this blog via<br \/>\n<a href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=HTML\">http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=HTML<\/a><br \/>\nand then the next thing would be that you create a document in a word<br \/>\nprocessor as naturally as you normally do, and at the end use its<br \/>\nFile-&gt;Save As&#8230; menu to save as HTML, and then open that HTML in<br \/>\na text editor like TextWrangler (Mac) or Wordpad (Windows) or Notepad<br \/>\n(Windows) or TextPad (Windows) or UltraEdit (Windows) and \u2026<\/span><\/span><\/p>\n<p style=\"margin-bottom: 0in; line-height: 100%\"><\/p>\n<ul>\n<li>\n<p style=\"margin-bottom: 0in; line-height: 100%\"><span style=\"font-style: normal\"><span style=\"font-weight: normal\">open<br \/>\n\tthis resultant HTML<\/span><\/span><\/p>\n<\/li>\n<li>\n<p style=\"margin-bottom: 0in; line-height: 100%\"><span style=\"font-style: normal\"><span style=\"font-weight: normal\">select<br \/>\n\tthe contents between &lt;body and &lt;\/body&gt;<\/span><\/span><\/p>\n<\/li>\n<li>\n<p style=\"margin-bottom: 0in; line-height: 100%\"><span style=\"font-style: normal\"><span style=\"font-weight: normal\">copy<br \/>\n\tthe contents between &lt;body and &lt;\/body&gt;<\/span><\/span><\/p>\n<\/li>\n<li>\n<p style=\"margin-bottom: 0in; line-height: 100%\"><span style=\"font-style: normal\"><span style=\"font-weight: normal\">open<br \/>\n\tyour WordPress blog<\/span><\/span><\/p>\n<\/li>\n<li>\n<p style=\"margin-bottom: 0in; line-height: 100%\"><span style=\"font-style: normal\"><span style=\"font-weight: normal\">log<br \/>\n\tin as the \u201cadmin\u201d user (perhaps)<\/span><\/span><\/p>\n<\/li>\n<li>\n<p style=\"margin-bottom: 0in; line-height: 100%\"><span style=\"font-style: normal\"><span style=\"font-weight: normal\">select<br \/>\n\tthe Post-&gt;Add New option<\/span><\/span><\/p>\n<\/li>\n<li>\n<p style=\"margin-bottom: 0in; line-height: 100%\"><span style=\"font-style: normal\"><span style=\"font-weight: normal\">in<br \/>\n\tthe content box, paste the previously copied buffer<\/span><\/span><\/p>\n<\/li>\n<li>\n<p style=\"margin-bottom: 0in; line-height: 100%\"><span style=\"font-style: normal\"><span style=\"font-weight: normal\">type<br \/>\n\tin a good heading for this new blog post<\/span><\/span><\/p>\n<\/li>\n<li>\n<p style=\"margin-bottom: 0in; line-height: 100%\"><span style=\"font-style: normal\"><span style=\"font-weight: normal\">establish<br \/>\n\tcategories and tags and posting dates as application<\/span><\/span><\/p>\n<\/li>\n<li>\n<p style=\"margin-bottom: 0in; line-height: 100%\"><span style=\"font-style: normal\"><span style=\"font-weight: normal\">you<br \/>\n\tcan optionally click the \u201cPreview\u201d button and re-edit until &#8230;<\/span><\/span><\/p>\n<\/li>\n<li>\n<p style=\"margin-bottom: 0in; line-height: 100%\"><span style=\"font-style: normal\"><span style=\"font-weight: normal\">click<br \/>\n\tthe \u201cPublish\u201d \u201cor \u201cSchedule\u201d button<\/span><\/span><\/p>\n<\/li>\n<\/ul>\n<p style=\"margin-bottom: 0in; line-height: 100%\"><\/p>\n<p style=\"margin-bottom: 0in; line-height: 100%\">\u2026 <span style=\"font-style: normal\"><span style=\"font-weight: normal\">voila<br \/>\n\u2026  you don&#8217;t <\/span><\/span><span style=\"font-style: normal\"><b>have<br \/>\n<\/b><\/span><span style=\"font-style: normal\"><span style=\"font-weight: normal\">to<br \/>\nknow HTML to post on a WordPress blog, but \u201cit helps a lot\u201d.<\/span><\/span><\/p>\n<\/div>\n<p> &#8230; versus hand crafted HTML of the same content below &#8230; <\/p>\n<div style=\"background-color: pink;\">\n<p>This is a tutorial about WYSIWYG in the sense that today we make up a large part of the content of our blog posting not using raw HTML coding.  We create the middle bits here using the Libre Office \u201cWriter Document\u201d functionality, but it could just as easily be done with Microsoft Office Word or Open Office or perhaps even Wordperfect.  In other words, you don&#8217;t have to know HTML to post on a WordPress blog, but, as we always say, \u201cit helps a lot\u201d.<\/p>\n<p>So here you are a bit trepidatious about HTML.  First thing we&#8217;d say is to do an online peruse of W3Schools at http:\/\/www.w3schools.com or read more at this blog via http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=HTML and then the next thing would be that you create a document in a word processor as naturally as you normally do, and at the end use its File->Save As&#8230; menu to save as HTML, and then open that HTML in a text editor like TextWrangler (Mac) or Wordpad (Windows) or Notepad (Windows) or TextPad (Windows) or UltraEdit (Windows) and \u2026<\/p>\n<ul>\n<li>open this resultant HTML<\/li>\n<li>\nselect the contents between &lt;body and &lt;\/body&gt;<\/li>\n<li>\ncopy the contents between &lt;body and &lt;\/body&gt;<\/li>\n<li>\nopen your WordPress blog<\/li>\n<li>\nlog in as the \u201cadmin\u201d user (perhaps)<\/li>\n<li>\nselect the Post->Add New option<\/li>\n<li>\nin the content box, paste the previously copied buffer<\/li>\n<li>\ntype in a good heading for this new blog post<\/li>\n<li>\nestablish categories and tags and posting dates as application<\/li>\n<li>\nyou can optionally click the \u201cPreview\u201d button and re-edit until &#8230;<\/li>\n<li>\nclick the \u201cPublish\u201d \u201cor \u201cSchedule\u201d button<\/li>\n<\/ul>\n<p> \u2026 voila \u2026  you don&#8217;t have to know HTML to post on a WordPress blog, but \u201cit helps a lot\u201d.<\/p>\n<\/div>\n<p> &#8230; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/WYSIWYG\/\" title='Click picture'>hence<\/a> &#8230;  <b><i>you don&#8217;t have to know HTML to post on a WordPress blog, but \u201cit helps a lot\u201d<\/i>.<\/b><\/p>\n<p>Please note that with a WordPress blog posting you can avoid HTML coding altogether (except whatever HTML emanates by using the functionality buttons WordPress presents), and try it that way also.   Also of use is the approach to use the &#8220;Add Media&#8221; button functionality which adds a link and uploads your local media file that ends up as a link that the user can download, in your blog posting.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d13308' onclick='var dv=document.getElementById(\"d13308\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=wordpress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d13308' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Often get asked if you can blog on WordPress with very little HTML knowledge, in a WYSIWYG (what you see is what you get) approach. The answer we give is &#8230; yes &#8230; but the results may disappoint without some &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-post-wysiwyg-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[151,576,694,972,1089,1319,1455,1456,1463,1467],"class_list":["post-14029","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-blog","tag-html","tag-libreoffice","tag-posting","tag-save-as","tag-tutorial","tag-word-processing","tag-wordpress","tag-writer-document","tag-wysiwyg"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14029"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=14029"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14029\/revisions"}],"predecessor-version":[{"id":19497,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14029\/revisions\/19497"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=14029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=14029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=14029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}