Does it Look Funny? – Text vs Visual Editor – WordPress Quick Tip

February 1, 2014
Rachel Avery Conley

Text-visual-viewer-Header

I just wanted to share this WordPress Quick Tip with you.

Have you ever gone in to your WordPress dashboard in order to add or modify an existing post and things look really funny? WordPress is great because it normally looks like an easy-to-operate word processing program, similar to Microsoft Word or Apple Pages programs. (Nerd alert: Those are called GUIs – Graphical User Interfaces) Essentially they have been created so that you don’t have to know any coding to create a document, or add a picture, or some other similar action. All the coding parts have been hidden away.

Well because WordPress caters to so many different types of people and groups, it has the ability to see the GUI part – called Visual and the coding part – called Text. 99% of the time the Visual part is so advanced and so easy to use that you may never even know that the text tab exists. WordPress also used shortcodes in the Visual tab, which enters snippets of code to make various parts of WordPress interact nicely with each other, again without having to know how to write full HTML, CSS, Javascript, or any other commonly found code languages.

Sometimes the text tab can be very useful to add in small bits of CSS or a dash of HTML, like a <br> code (which enters a break between lines without starting a new paragraph). And for WordPress users who prefer to write only in code, they use the text tab almost exclusively.

So why have I gone on and on about these seemingly super geeky features that you may never use? Because sometimes you will accidentally toggle between the two, or if someone is working on your site (like me!), it may get left in the Text tab and look really different than you are used to. This can be really disorienting and discouraging. But don’t panic! If something looks weird in your Posts panel – check the tabs on top and make sue you are in the visual editor. I can’t tell you how many times this has happened and how it is a relief to know the solution is very simple once you know what you are looking for.

text-visualtoggle

Interesting in learning more about code and how it makes computers & the internet run? Here is a fun group article, and the wikipedia entry on source code. A great place to learn to code is Code Academy. It’s the language of the future!