When you want to use pieces of code (such as HTML, CSS, PHP, or JavaScript) within your posts. The challenge is to make the code appear as code without being executed. When you are writing a post in wordpress HTML editor it have two editing modes. These two modes are available for you easiness. You can use these modes depending on your choice where you feel comfortable. These modes are…

  • Visual wordpress HTML editor
  • Text HTML editor

You May Also Like:


Visual Editor

The visual wordpress HTML editor is a default mode for wordpress blogs. This mode is look very easy just like word processor. By using Visual editor icons to format text, change font alignment, insert bulleted and numbered lists, and more. Visual editor will consider the different code of HTML, CSS or any other language as an ordinary text. That’s why visual text editor convert the < and > characters into their lt; and &gt; character entity equivalents. So you must use some plugins for syntax highlighter.

Text Editor

Text editor is quite difficult as compare to visual editor. Text editor have some options but you can write your post. Those people who are comfortable in HTML working environment. If you want to add some shortcode and any font style then you paste or write code in text editor. The buttons at the top of the text editor make it easy for you to quickly insert most common HTML tags.


screen-shot-2013-10-29-at-4-07-45-pm


Use <code> In Posts:

If you want to add code in your post you must use <code> tag in your post. For example <code>sample text</code>. Whatever you write in these tags all look like a code of a sample.

Convert Part of the Code into Character Entities or Extended Characters:

If you use this type of tag <code><div id=”menu2″></code>, then you format the code which is written in <code> tag.

In the header.php template file,

look for the <code><div class="header"></code> 
section to change the <code><h1></code> heading.

new

Using the <pre> tag

To set your code aside so that it looks like a box of code which may be copied and pasted within other code or template file, you can use the <pre> HTML tag.

this is an example

<pre>
body {
            font:13px Arial Narrow;
            letter-spacing:1px;     
}
</pre>

Adding a link

To add a link, we use the <a> tag (the a is short for anchor).

Here is an example of an anchor tag:

url

<a href="http://www.wordpress.com">Start blogging on WordPress.com</a>

You can also enjoy many wordpress html editor plugins like:

About The Author

Related Posts

Leave a Reply

Your email address will not be published.