WordPress School: Text Editors

Coming very soon, I’m dedicating a couple weeks to learning about web browsers and HTML and CSS in preparation for moving into the site design and customization aspects of Lorelle’s WordPress School free online course. To help you prepare, today’s tutorial and assignment is to introduce you to text editors.

In WordPress, there is a visual editor that offers you a word processing experience for web publishing, and a text editor, a stripped down editor that displays the actual code as you write, not the GUI or visual interface of the content. A text editor is much like the WordPress text editor.

A text editor is a program that allows you to write and edit text. It does not allow embedding of multimedia like a word processor, only text with little or no formatting. Sounds simple, but a text editor can be so much more.

A word processor is software or an app used to process words, literally. It helps you to write letters, stories, newsletters, etc., and comes with with writing, editing, multimedia, and formatting tools for writing in a traditional medium. While you may export in a text or web format, and copy and paste from a word processor into WordPress using the paste as text feature, most bloggers and web publishers do not recommend it. Such copies and exports come with programming code you don’t want in your WordPress site.

Dreamweaver is not a text editor. It is a an IDE (Integrated Development Environment) tool, a web development tool for creating, publishing, and managing web sites, not web content in general. Dreamweaver offers a GUI interface featuring a code editor, automation and shortcut tools, and WYSIWYG display and testing of the code as you work on it. While you may use Dreamweaver and similar programs for designing WordPress Themes, and you may use it during the tutorials we will work on to learn HTML and CSS, and there is a source code editor (text editor) incorporated into it, it is not a text editor. In other words, while it is a great tool for what it does, it is over the top for most of your daily activities and tweaks for working with WordPress unless you dive deeply into web design.

A good text editor is a mix of a text writing and editing program, word processor, and web development tool. A text editor typically has features that enhance writing web and programming code such as HTML, CSS, PHP, JavaScript, etc. You can also use it to write and edit your WordPress content.

Most people are familiar with Windows Notepad or Mac TextMate and TextWrangler. These are text editors, but stay away from Windows Notepad it is problematic for writing code.

Do you need a text editor?

If you wish to create and edit right in WordPress, that’s fine. A text editor allows you to do so much more, especially when it comes to tweaking and developing your WordPress design and site customization. It also allows you to work on articles before you publish them in a safe off-line environment, and to keep track of ideas and develop them over time instead of working with WordPress draft posts.

The point of this course is to teach you WordPress from the inside out, and as we move into more complicated tasks and assignments, you will need to rely more and more upon a good text editor.

I can’t live without mine. I write most of my posts in my text editor using basic HTML to control the structure and format of my posts, taking advantage of shortcut features to convert lists into HTML lists and other HTML formatting features. It is faster than working in the WordPress editors, and I can work on my posts anywhere, even without the Internet. I use it to clean up client website content constantly with a search and replace macro that removes all the ickies people put into their sites that bog them down, including the mess of code that comes from copying and pasting from word processors.

A text editor gives you a clean, simple interface in which to just write. To put down your thoughts without fussing about formatting, and maintain all the ideas you wish to write about.

In other words, if you are serious about working with WordPress as a blogger and writer, administrator, developer, and designer as an individual publisher or as a business, you will need a text editor.

In this course, you will need a text editor for the upcoming tutorials to help you learn just enough HTML and CSS for basic WordPress content and design.

Which Text Editor to Choose?

There are many text editors, and many people truly passionate about their favorite text editors, as I am. You need to experiment to find the one that works best for your needs and operating system.

There are free and paid text editors for all the major operating systems. Wikipedia offers a fairly well updated list of text editors, so I won’t list all of them.

Lifehacker has a good list of the most popular text editors used by most coders, developers, and designers. Team Treehouse recommends the same text editors and a few more.

I personally use those for different projects, and on computers that are not my own such as working in a client office or at the college, but my favorite, NoteTab Pro, which I’ve used for more than ten years.

Here are the most popular and recommended text editors:

• Notepad++
• Sublime Text
• Vim
• TextMate
• Code
• Atom by Github
• Emacs
• TextWrangler
• Komodo Edit

What should you look for in a good text editor?

• Syntax Highlighting: Also called code highlighting, ensure that the text editor will highlight HTML, CSS, JavaScript, PHP, and other web-based programming languages as you write to help you differentiate between the content and the code.
• Code Completion and Suggestion: Save yourself a few extra keystrokes, and the nightmare of double checking that every open HTML tag is a closed HTML tag, and seek one with auto-completion and auto-suggestion to help you remember the code elements.
• Code Snippets and Automation: Writing code and content often means dealing with redundant data. Auto-completion and substitutions and scripts to help you deal with redundancies are critical.
• Search and Replace: I live for the powerful search and replace features of my text editor. Some also allow you to write scripts to do multiple search and replace routines at one keystroke or click.
  
• Navigation: Most text editors feature the ability to jump around within the written code quickly, moving from line to line, section to section. It is easy to get lost in the code, seriously, and being able to retrace your path is important.
• View Files and Directories: A good text editor allows you to see and move quickly between files and directories when working with multiple files, or those stored on your computer. A multi-tab environment is essential, each tab a file. Code is often moved around or copied between files. In a WordPress Theme, the PHP code may start in one Theme file, pass through another, and end on another…you feel like Sherlock tracing the path through the files.
• Spell Check: It never hurts to check for mizzed spellings, though few offer grammar checks, so put your language skills into use.
• GUI Interface: Working with HTML and other web-based programming languages, your end result is best tested within a browser not in the program. However, if you wish such an interface, some text editors allow previews with built-in browsers or GUI interfaces.
• Backup Systems: Ensure the text editor backs up your code in a way that preserves versions and generates backups to protect the code. Many do so automatically.

There are many other features you may find you use that are particular to your website needs.

There are many reasons why I stick with NoteTab Pro. It has the ability to search and replace across files not open in the program but stored on the hard drive, making it easy for me to make file changes throughout a WordPress Theme or content files. It also allows me to create my own scripts and offers a wide range of free scripts and clip board libraries with powerful features like converting code into HTML Character Entities for publishing code in WordPress easily. It comes with many other utilities like a unit converter, hash generator, data encryption and decryption, web page URL extraction, word count, text statistics, and a password generator. I’ve used all of these with my client work over the years.

Best of all, I can install NoteTab Pro on a thumb drive and take it with me anywhere and use it. Love that!

The most powerful feature I depend upon the most in NoteTab Pro is their unique Paste Board feature. I’ll let them explain it.

Copy and pasting is another feature that is constantly used in a text editor. Think about this. How do you collect data from various sources like web pages and other documents? Here’s how most people do it:

1. Click on the window that has the data you need.
2. Select and copy the data to the clipboard.
3. Click on your text editor.
4. Paste the data.
5. Repeat steps 1 to 4 …

NoteTab has a feature called the Paste Board. Once you turn it on, any text you copy to the clipboard is automatically pasted into your chosen document. Here’s how data collection works in NoteTab:

1. Click on the window that has the data you need.
2. Select and copy the data.
3. Repeat steps 1 and 2 …

You’ll save so much time not having to constantly switch between applications.

I use this every day, multiple times a day, and it saves my fingers, work, and life constantly.

I also don’t use NoteTab Pro to the exclusion of other programs for working with web content and WordPress. Everyone has an arsenal of programs and apps they use to get the job done and we will cover more of these later in the course.

It’s now your turn to find the text editor of your dreams.

More on Text Editors

I’ve put together a reference list with more information on text editors. These articles explain what they are and include recommendations.

• Text editor – Wikipedia
• Comparison of text editors – Wikipedia
• Choose, Install and set up a text editor – Learning the Web | MDN
• The Best Free Text Editors for Windows, Linux, and Mac – How to Geek
• Finding the Right Text Editor – Git-Tower
• 19 Carefully Picked Coding Editors To Choose From – 1st Web Designer
• Choosing the Right Text Editor – Brackets, Sublime Text, Coda, and more
• Choosing a Text Editor for Web Development – Web Development – The Hello World Program
• Choosing a text editor | Ubuntu Musings
• Choosing a text editor from the Course XHTML and HTML Lynda.com Essential Training (Video)

Assignment

Your assignment is to experiment with the text editors listed in the tutorial or one you already may have on your computer. You may have to test drive several to find one that is comfortable for your needs. Read through their FAQ and features list thoroughly.

To test drive the text editor, write several posts to publish on your test site. Write them for the WordPress text editor, not visual. Use the HTML elements for site content in the previous tutorial assignment and do them by hand, adding headings, bold, italic, links, etc. Don’t add images to the text editor. You will do that when you copy and paste the content into WordPress.

Experiment with the different features in the text editor as described in the article such as search and replace and various utilities like code coloring, conversions, and other features.

We will be putting the text editor through its paces very soon.

Swing by our WordPress School Google+ Community and share your thoughts on text editors, how you use them, how you think you will use them, and the results of your experiments with text editors.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism

---