How to add html code in Wordpress

Hi,
Free WordPress blog means wordpress.com blogs which aren't self-hosted. There are quite limitations to wordpress.com blogs because of interface and all that. I recommend you to transfer your blog as quickly as possible to wordpress.org, you can boost your blogging and also it has much more features and makes it simple.

Regarding your query, when you write a post there will be a tab indicating visual & code. The visual editor is the general one where you write your post and when you switch your tab to code, you will get HTML version of the post you write. So, to add a code switch to Html version and add your code and save it.

This process is same for post/ page and as I said earlier there are certain limitations and only specific HTML codes work with it. So better to move to self-hosted one.

Regarding widgets, the free version will have only a few widgets available to our use, for more options you need to convert your blog by adding custom domain like xya.wordpress.com to xya.com. For this, you need to pay the amount and get registered domain and all that. Then you will have access to all the widgets and you can customize through it.

WordPress post and pages can accept the raw code in any language. In order to process the code without breaking, you have to wrap them into the "pre" or "code" tag. You can also use the plugin to make use of such functionality. Usually such plugins allow you to wrap the code in pre tag and also give you the beautifier option.

Check the below example on how to use the code in your wordpress post or pages.

< pre > // insert HTML code
< / pre >

The same can be done with the Code tag. Both tag can be formatted and beautified with CSS classes.

< code > // insert HTML code
< / code >

Note: I added the space purposefully to stop the answer's text editor from parsing the above tags.

You can also make use of the free plugins such as following to format the code inside the WordPress post and pages.

You don't need to use any widgets or so for formatting if you just choose to use pre and code tags. But if you plan on format and beautify the code, in such case you'd need the plugins.

Here are some of the plugin suggestions.

1. Preserve Code Formatting : Easy to use plugin allows formatting for many languages. http://coffee2code.com/archives/2005/03/29/plugin-preserve-code-formatting/

2. SyntaxHighlighter Evolved: This plugin is handy for code formatting. Also regulrly updated for the WordPress versions. http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/

3. WP Code Prettify : Popular WordPress plugin. It is simple to use it and you don't need to do anything complicated to format and add the code. https://wordpress.org/plugins/wp-code-prettify/

4. WP-Syntax : I personally suggest you to use this as the same plugin is being used by many online. And it is the best plugin for adding code. http://wordpress.org/plugins/wp-syntax/

5. Code Prettify : This is not much of easy to use but effective. It can be used to format and beautify the code, be it HTML, CSS or python. https://github.com/kasparsd/code-prettify

Apart from this, you can also customize your theme CSS to handle the formatting and beautification for "pre" and "code" tag. That also works and you can get to make the code look much better.

You can also use third party snippet website to include the code directly into your post or page in WordPress.

1. Github Gist: Copy the gist embed code. This will help you with embedding into the post. https://gist.github.com/

2. Pastebin: Pro accounts allow embedding of the gist, be it html or any other language. http://pastebin.com/ Free accounts have limited embed code options.

3. Codepen: This is meant for javascript, css and HTML. You can embed the code into your website using their embed code option. http://codepen.io/

You can definitely use HTML tags in the WordPress blog. However, most of us use the visual editor while composing the content for our blog or site. There is a belief that it is not possible to use HTML code.

But it is. You can easily add HTML tags to your blog post. Switch to HTML or Text Editor. Please note that there are some guidelines you need to follow while using HTML tags on WordPress.

Here are the steps -

1. In Post/Page panel, switch to HTML/Text Editor.

2. Move the cursor to the location where you would wish to add the HTML code.

3. Paste your code or type it.

4. Make sure the code is correct. An incorrect code can cause your post to break.

5. Save the draft, switch to the visual editor and continue.