How to Add, Edit & Format Text in a WordPress Post or Page

This is one part of a series of articles providing basic instructions for using WordPress. To start at the beginning, or view the full index of articles in this series, go to  A Simple WordPress User Guide for Beginners.

Video Resources:  In September of 2011 I created a series of video tutorials and uploaded them to YouTube – you can find them here:  WordPress Video Tutorials

edit-post-page-wordpress1This section of the guide starts on the Edit Post or Edit Page section of your WordPress Admin area.  You can get there either by choosing the “Edit” or “Add New” option under Posts or Pages on you Core Navigation bar at the left of your admin screen (see image to right for reference). If you are adding a new post or page, you may want read How to Add a New Post or Page before continuing below.  If you are editing an existing post or page, you will be presented with a list of posts or pages to choose from.  You can either click on the title of the post or page, or hover your cursor over the bottom of the title and options will appear, including “edit”.

Let’s get started.

The control panel to edit a post is identical to that used to edit a page, therefor the information below pertains to both.

Upload/Insert Media

The icons at the top left of the editor next to the words Upload/Insert allow you to add and edit images, video, audio and other media.  We will be focusing on editing text in this article.  You can learn about uploading and inserting media in the article titled How to Add Images and other Media in WordPress.

Visual and HTML Editors

There are two content editor modes, the “Visual” editor and the “HTML” editor.  You can select which editor you want to use using the buttons at top right of the content editor.  The image below shows the Visual editor.

visual-HTML-editor-wordpress

The Visual Editor.  The Visual editor will display your text and images in relationship to each other, similar to how they will appear on your website.  I say similar because, according to the unique design of your website, the font-size, color, spacing, etc. will likely look different on your website than it will in the editor.  What you will see in the editor is the text, images, video, and other media in relationship to each (above, below, next to, indented, …) as you have specified.  The coding of your website will then modify this according to your unique design, but will generally adhere to the standard formatting rules applied within the text editor, (for example if you bold some text, it will show in bold in the text editor, but your website may be coded to indicate a bold state by also enlarging the size of the font or giving it a more prominent color).  You will get to know the unique styling of your website as you work with it.

The HTML Editor. The HTML editor will display your text along with any code.  If you only enter text, then the HTML editor will only show text.  If you add an image, then instead of seeing the actual image, you will see some code that will specify where the image is located, how it is to be displayed, and so on.  Code is very specific.  If you do not understand it or do not have specific instructions on how to edit it, then you are better off not using the HTML editor.

Special Note – If you want to Copy and Paste into WordPress

Often times it is convenient to type your content in another program on your computer, off-line, and then copy and paste your finished version into your WordPress program.  Unknown to beginners (and why would you know), when you copy and paste text or other content from Microsoft Word (most commonly used) and some other text editing programs, you will end up pasting code along with your content.  Although you cannot see it when you copy text from Word, it is there, and it will end up in your post.  There is no harm in doing so if you are curious, just be aware of what you are doing.

Pasting Text Options » You have a few options.

  • Type in a plain text editor. One option is to use a plain text editor to type your content on your computer, one that does not add code to your text.  On a PC you can use Notebook (usually the default plain text editor found in your applications folder).  On a Mac, you can use Text Edit, (again, usually the default plain text editor found in your applications folder).
  • Convert your text before you copy and paste into WordPress, by first copy and pasting from Word (or whatever program you are using) into a simple text editor such as Notebook or TextEdit, and then copy pasting into WordPress.
  • Using the “Paste in Plain Text” button.  You would copy from Word (or other program), then put your cursor in your WordPress Editor where you want the text, and then click on the “Paste as Plain Text” button.  This will open a plain text editor which will strip the code from your text.

You certainly can simply copy and paste from a Word document into your WordPress editor, if your desired result is to retain the formatting from your Word document.  However you may not end up with what you want, and your results may not harmonize with the rest of your website as your website’s design will have a specific look and feel built into it’s automatic styling.

Adding Image and Other Media » The best way to add images and other media to your post or page is to use the buttons on your editor for doing so.  You can read about them here:  Add Images, Video, Audio and other Media.

The Visual Editor

To enter text in the visual editor, simply place your cursor inside the white box and start typing, just as you would in any word processing program. When you use the return button on your keyboard, a new paragraph starts, just is it would in any other word processing program.  To format text, you would either:

  • Highlight the word or phrase you want to format, (i.e. if you wanted to make the text bold or italics), and click the appropriate function button (i.e. B for bold, I for italics); or
  • Place your cursor before or in the paragraph you want to format, (i.e. format the paragraph into an unordered list or make it centered aligned) and again, click on the appropriate function button.

Some functions will simply format the text immediately, and others will require additional information, such as if you want to create a “hyper-link”.  For example, to make a phrase link to another webpage, you would highlight the text you want linked, click on the link icon, and enter the URL address of your desired link into the pop-up window.

And some buttons will toggle back and forth.  For example, if you format a paragraph into an unordered list (bulleted list), then when you use the return key on your keyboard, you will automatically be prompted to enter the next item in the list.  When you are done entering your list items, you would click on the same “unordered list” button to return back to the default paragraph formatting.  This is important as some people miss this and don’t understand how to exit one of these functions.  If you are entering or editing styled text that is an ordered or unordered list, or blockquote, or indented, or other similarly formatted text, and you are done with that formatting, or want to change it back, use the same formatting button to return to editing without that formatting – it toggles back and forth.

The Toolbars » The Visual editor provides two rows of functions, or “toolbars”.  The top toolbar provides the most common editing functions along with a toggle to display or hide the second or lower toolbar (called the “kitchen sink”).  Below is a quick reference guide to both toolbars.  You don’t have to memorize them.  Passing your cursor over any icon when viewing them in your admin panel will display its name.

You can learn more about the functions of each of these tools in this article on Formatting Text Content in WordPress.  Although the article was created for an older version of WordPress, the formatting controls are the same and the information is clearly presented.

wordpress-text-editor-toolbar

wp-advanced-text-edit-toolbar text-format-dropdown

Editing TIPS

  1. Single Spacing – When you use the carriage return (Return or Enter key), generally the formatting of your website will create spacing to exist between your paragraphs.  But what if you want to have several rows of text under each other without the spacing, such as with an address.  In order to drop down a line without starting a new paragraph, you would use the following keys together: Shift + Enter (or Return).  So you would hold down the Shift key on your keyboard and hit the Enter button ( or Return button).
  2. Advanced Editor – WordPress comes with a good base of content editing tools built in, but if you want to expand that, you can install and customize your admin panel with the TinyMCE Advanced plugin. (On the left side of your admin panel at the main navigation bar, there is an option for “Plugins” where you can add them.  Once this plugin is installed, you would then look under the “Settings” tab for a link to a page to customize it for you.)
  3. Use the Indent Tool.  It is a great tool for formatting by separating out sections of content with ease.
  4. Nested Bullet Lists – If you want to create a nested bullet list, such as an outline with 1, 2, 3.1, 3.2, 3.3, 4, 5, etc.  You would first
    1. create your bullet list (see buttons above for ordered list and unordered list – place cursor where you want it, and click the corresponding button);
    2. then to create your next level, use the “Indent” button (see buttons above) to create your next level (from 1, 2, 3 to 1, 2, 3.1);
    3. when you are ready to move back out to your top level (ie, from 1, 2, 3.1, 3.2 to 4), hit your Return (or Enter) key twice;
    4. and when you are done with your list, you can again hit your return key twice.

Save Draft, Preview or Publish

SAVE YOUR CHANGES. Although your WordPress program will automatically save your work on a regular basis, and you will be offered the option to use that version if you like (top of the edit screen for any individual post or page), it is best to use the Save Draft or Publish button once your are done with your edits. You will also always have the option to revert back to a previously saved version by choosing one of the saved versions listed at the very bottom of your Edit Post or Edit Page admin screen.

Publish Options » Once you are done editing your post or page, if you have not already “published” it, then you will have the option to save it or publish it. (If you have already published your post or page, then the “Save Drat” option is no longer available.)

publish-wordpress-post-page-optionsThe following options are displayed at the top right of your screen, if you have not yet hit the “Publish” button. (See below for changes once you have clicked on the “Publish” button.)

  • Save Draft – Once you create a post or page, it will not automatically display on your website, until you use the Publish button for that specific post or page.  If you want to simply save your work, either for continued editing or to publish on a later date, then you can use the Save Draft button.  This will save your work.  You will be able to access this post or page at any time just as you would a published post or page.  In the admin screen that displays your current posts or pages, the word Draft will be displayed next to the title of any article that is not yet published.
  • Preview – Preview is not a saving option, just an option displayed under the Publish box along with the others.  Preview opens a separate browser window and displays your post or page in the context of your website, so you can see exactly what it will look like once published.  This is useful since, as stated above, what you see in your visual editor is not exactly what you will see on your website, based on the unique design of your website.
  • Publish – When you hit the Publish button, your article is “published” to your website.  That is, it will now show up on your website.  Until you use the Publish button, it will still be in a draft mode.
  • Move to Trash – You can delete your post or page from this screen using the Move to Trash button.  Moving it to the virtual trash is a new feature to WordPress 2.9 that allows you to recover something if you change your mind after wanting to get rid of it.
  • Status, Visibility, Publish immediately – These are further options that allow you to change the status of your article (Draft, Pending Review, Published); specify who can view your article (Publish, Password Protected or Private); and specify a specific date and time to publish your article rather than have it publish immediately once hitting the Publish button.

update-wordpress-post-pageIf your article has already been published, then the following changes will apear:

  • There will no longer be a “Save Draft” option;
  • The “Preview” button will change to a “Preview Changes” button;
  • The Publish button will change to an “Update” button.

That’s it.  You can read more topics in this series by selecting the WordPress Guide category or by selecting a topic listed here: A Simple WordPress User Guide for Beginners.

16 Responses to How to Add, Edit & Format Text in a WordPress Post or Page

  1. JohnnyK September 17, 2014 at 11:47 pm #

    Hi Dave
    I first came across your support when searching for how to divide up a long post using link categories. Your Youtube tutorial was very useful; many thanks for the assistance.
    Now something different.Using the visual editor in WordPress, and using shift-enter to remove the white space between, say, a heading and the text below, this causes text to take the style characteristics of the heading, in fact becoming part of the heading! is there a way to separate the styles, whilst keeping the heading and text in close order?
    Is there a simple way to overcome this (without delving into the html, or css aspects?)
    Thanks, and again, many thanks for the resources you offer to the “web students” amongst us.
    Johnny

    • David Tierney September 18, 2014 at 8:27 am #

      Hi Johnny,

      Thanks for the feeback on my posts.

      When you use shift-enter to drop down a line, you are technically still within the same HTML style tags. This is why that text takes on the same style characteristics.

      <h1>This is a header<br />and this is some text that was dropped down a line using the shift-enter command.  Notice that it is still inside the same "h1" tags which define its characteristics.</h1>
      

      How can you overcome this? You would have to use an “inline” tag such as a span tag which allows you to specify the characteristics of copy within a block tag like a header. So in the example above, you might have something like this:

      <h1>This is a header<br /><span style="margin-top:0px;">and this is some text that was dropped down a line using the shift-enter command.  Notice that it is still inside the same "h1" tags which define its characteristics.</span></h1>
      

      Although one question is, how is the space created between the header and line below? Often the spacing below the header is created as a margin or padding below the header, so you may have to use the span tag on the top part:

      <h1><span style="margin-bottom:0px;">This is a header</span><br />and this is some text that was dropped down a line using the shift-enter command.  Notice that it is still inside the same "h1" tags which define its characteristics.</h1>
      

      or something like that.

      Now, how do you do this in WP? That is tricky because you don’t have the ability to use a span tag using the visual editor, (although you could using the Text editor – just not sure if those will not be wiped out once you save and toggle back and forth between the Visual and Text editor, you could try it out). There are some common inline elements you could use such as bold and italics, but these have their specific characteristics applied, ie. making Bold text bold, etc.

      I do not think there is a way to do what you want through the WP visual editor, (unless there is some plugin that would help with this), but you could use the WP Text editor as I have indicated above. Try inserting the span code in as indicated above and seeing if it sticks. You can also use the Visual Editor to make the text bold, so it looks like this:

      <h1><strong>This is a header</strong><br />and this is some text that was dropped down a line using the shift-enter command.  Notice that it is still inside the same "h1" tags which define its characteristics.</h1>
      

      and then modify that inline tag as I did the span tag as such, (and change the font weight so that it does not go bold if not wanted):

      <h1><strong style="margin-bottom:0px;font-weight:normal;">This is a header</strong><br />and this is some text that was dropped down a line using the shift-enter command.  Notice that it is still inside the same "h1" tags which define its characteristics.</h1>
      

      Those are some ideas for you. Good luck.

  2. Hassan August 29, 2014 at 5:54 am #

    Nice Sharing
    Thanks For Sharing

  3. Isabella August 27, 2014 at 1:02 pm #

    I really like your site. I have found some great info.
    Thank you!

  4. steve macisaac December 9, 2013 at 2:31 pm #

    You appear to be a WordPress guru, and I also appreciate your frank response to that fellow in April where you basically said “I’ll help you with that, but it’s not a ‘quick question.’ So here’s a quick question: I’m an old guy, who managed earlier this year to put together a couple of pages with WordPress, but now something’s changed (or I’ve gotten really dumb) as I’m having great difficulty getting things imported (all I want to do is either “grab it” or use Text Edit to pick up text from other sources and then “paste” it into the site, preferably with a box or border or some such around it, and also (which at some point I stumbled around and was able to do) ‘crop’ pictures using the image edit feature that I now can’t seem to find and, finally, change the frigging text font from time to time in what I type in (i.e., is there more available from the WP dashboard than bold, italic?
    For this, I am willing to pay, so I can post something to the website. Maybe it’s beyond the capability of a yo-yo like me, or WordPress is the wrong program for me (given my competence)

    • David Tierney December 14, 2013 at 7:00 pm #

      Use the Paste as Plain Text button in your post/page editor to paste text from other sources, this strips out the code from the other source when you paste it just pastes the text. Then format from there, within the text editor.

      Instal a plugin called TinyMCE Advanced Or TinyMCE Ultimate to add additional formatting options.

      As for the photo cropping, they changed the interface and I cannot recall how to do it and don’t have access to look at right now. You can email me if you want help with that and I will take a little time to review and charge half an hour for my time.

  5. Joanne Garroway April 9, 2013 at 8:55 am #

    Hi. Great advice. Here’s my problem. I’m using the Genesis theme and went into my Home Page to edit the content. While working on the content I saw spaces between all of the paragraphs yet when I hit Update and viewed my site, some of the paragraphs run into each other, without the proper spacing. Any easy way to correct this.

    Also, some of my text comes out Bold as I entered it but again, further down the home page, some of the text is not presenting as Bold as it did in draft form.

    Any and all help is appreciated!

    • David Tierney April 9, 2013 at 1:47 pm #

      I would have to look at something like that specifically to troubleshoot what is going on. Specifically, I would need access to your site and we could login together over the phone, and you could walk me through what is happening. From there I could either identify something you are doing in the edit panel that I notice is causing the issue for you, or I could look at the code in my browser (if you know a little about code you can use chrome developer tools or firebug on firefox) and see what is being generated, and why you are having the problems you are.

      That kind of support I would want to be compensated for with regard to my time, given that is what I do for a living (designing, developing and maintaining websites). Feel free to contact me via my email address or phone if you want to do that. Both are on my contact page.

  6. John Mulvihill April 8, 2013 at 7:46 pm #

    I’m a WordPress beginner and very leery of what I’ve encountered so far.

    What about revising the format of a home page?

    Not a word about home page formatting in this lesson.

    I get the impression that, at least with the theme I’m using (Responsive), I cannot do simple revisions to the text formatting.

    Currently all home page text is centered. I want it left-aligned.

    But unlike the regular pages, there is no straightforward way to do this.

    Or am I missing something?

    • David Tierney April 8, 2013 at 9:21 pm #

      I have not used Responsive, so I cannot comment on that specific theme. Each theme can have their own unique features that are customized beyond the WordPress core. If you know how to left align text on other pages and cannot on the home page, I suspect there is something unique about the home page outside of the rest of the page – unique to the theme. That is, on any page, using the text editor, you should be able to highlight any text and simply click the left align button in the text editor. If that does not work or is not an option, then indeed that is a bummer.

  7. umeed December 17, 2012 at 10:36 am #

    HI..i need help..in my blog there is no “Visual” editor and the “HTML”
    there is “Visual” editor and the “Text” ,
    PLz tell me how i can change this..means text to HTML..PLZ i need help.Thanks.

    • David Tierney December 17, 2012 at 10:49 am #

      The only reason I can think of that you are not seeing the option for HTML is if your browser window is too narrow.

      Otherwise, I am not clear on your question. If you want to edit the HTML of your page or post content, you would use the HTML tab at top right of the Text editor, as is shown in the image on this blog post. If you want to email me access to your blog and call me, I can take a look and walk you through it.

  8. Phil Saviano February 10, 2011 at 6:28 pm #

    Hi David

    Boy, am I glad I found your User Guide. I am new to WordPress, having designed a bunch of websites using html and CSS. I’ve been asked to take over managing a site built with WordPress and I am finding it very slow going. I am sure your Guide will be very helpful to me.

    There is a task that I am currently stuck on, that I thought might be addressed in this chapter, but it isn’t. Client wants me to ad an introductory paragraph at the top of the Store page.

    When I go into Edit Page for the Store page, I drop the paragraph of text into the upload/insert box. When I publish the page, I see that the new text shows up at the BOTTOM of the page, not at the top. How do I get it to show up at top, right under the page title? I don’t see this addressed in the WordPress user forum. Can you help?

    Here is the page URL:
    http://dedhamhistorical.org/products-page/

    Thank you.

    • David Tierney February 10, 2011 at 8:51 pm #

      Hi Phil,

      It is a little different when you are wanting to modify a page that is created as part of a shopping cart program. Looking at the code of your site, you have the wp e-commerce plugin installed on your site. I suspect that possibly if you clicked on the HTML tab, (at the top right of the content editor in the Edit Page screen of the page you want to edit), you may see some “short code” that specifies to import content to that page from the e-commerce plugin. If that is the case, then you can put some text before all of the at in HTML mode. (That code will not show up in Visual mode).

      Once you add some content before that code, then you can switch back to Visual mode and you should see it, and then you can edit it as you like. This way you can position the text before the cart content.

      If that is not the case, then you will have to investigate how the plugin works. Go to the plugin section of your WP admin area and track down the ecommerce plugin and then from there instructions.

      Good luck.

      • Phil Saviano February 14, 2011 at 9:01 am #

        Hi David

        Well — this worked fine, and I certainly would have not been able to figure it out for myself. So, thank you for reaching out and providing guidance and a solution to my problem.

        Phil

      • David Tierney February 14, 2011 at 1:30 pm #

        No sweat. Ask anytime.

Leave a Reply