CHAPTER 5

Creating Written Content

Get to Know the Add New Post Screen

The Add New Post screen is the primary location for creating new posts. After you save or publish a post, the title of the screen changes to Edit Post.

Find the Add New Post screen by clicking Add New under Posts in the left admin menu. You can also use the New menu on the toolbar and select Post.

image

001.eps Title Box

Where you type your post’s title.

001.eps Add Media Button

Clicking this button opens the Media Uploader window where you can add images, documents, video, and audio, or select from previously uploaded content, all of which is covered in Chapter 6. WordPress.com has three more buttons here: Add Poll, Add Contact Form, and Add Location.

001.eps Button Bar

Provides tools for styling and formatting text, adding links, and more. In Visual mode, the bar is a set of icons; in Text mode, the bar is a set of text buttons.

001.eps Content Editor

Where you type and work with your content. The default display is like a word processor — what you see is what you get (WYSIWYG) — but you can also view content in pure HTML, the language of the Internet.

001.eps Save Draft Button

Saves your content without publishing it to your site. Note: Each time you save a draft, WordPress keeps a copy of that revision.

001.eps Preview Button

Displays how your draft post would look if published.

001.eps Move to Trash Link

Puts an unwanted post into the Trash, but you can recover it within 30 days.

001.eps Publish Button

Publishes the post to your site for visitors to read.

001.eps Format Box

If your theme supports multiple formats for posts, you can select one here.

001.eps Categories Box

Every post must be in at least one category, and here you find all available categories. You can also add new categories from here.

image

001.eps Writing Helper

WordPress.com offers these two writing tools: Copy a Post and Request Feedback, which solicits comments from other users.

001.eps Likes and Shares

WordPress.com has a built-in tool for choosing whether to display how many Likes your post has and buttons that make sharing your post easy. WordPress.org users can add these functions using plugins.

001.eps Tags Box

Lets you assign tags, which are more specific than categories, to your posts.

001.eps Featured Image

Lets you assign an image to be the thumbnail used in lists of posts and so on. How that thumbnail is used varies by theme.

image

001.eps Screen Options

Toggles the Screen Options panel open and closed. Not all meta boxes are shown by default on a Post screen. Screen Options allows you to choose which ones appear.

001.eps Custom Fields

WordPress.org has an area where users can edit additional fields used by plugins or themes. You can also add your own fields, but unless they are coded into theme files, nothing will happen.

001.eps Discussion

Lets you choose whether to allow comments on an individual post. Overrides default selection under Discussion Settings.

001.eps Slug

Another way of editing the post’s permalink.

001.eps Author

Presents a drop-down list of authors, which is helpful for multiauthor sites.

001.eps Excerpt

Provides a text area to write a summary or teaser for your post. It may be used in some themes or in RSS feeds.

001.eps Send Trackbacks

Lets you notify non-WordPress blogs when your post has linked to them.

Introducing the Visual Mode Button Bar

With the WordPress content editor, you can view your content two different ways. The default is called Visual mode and it looks like a word processor — what you see is what you get — or WYSIWYG. The button bar contains the functions for the content editor and varies depending on which mode you are in.

Mousing over any button shows the name of its function. Most buttons work like a toggle switch, turning the effect off or on.

image

001.eps Visual Mode Tab

Is bright when active, which means you are using the WYSIWYG editor to write or edit your post. The other tab is Text mode and is described in the next section.

001.eps Text Styling

These three buttons make text bold, italic, or strikethrough, respectively.

001.eps Text Formatting

These three buttons format text in the following ways: bulleted list, numbered list, and block quote, used primarily when quoting others.

001.eps Horizontal Line

Inserts a horizontal line.

001.eps Text Alignment

Three buttons that align text to the left, center, or right.

001.eps Links

Two buttons that allow you to insert or remove links.

001.eps Read More

Inserts a More tag to tell WordPress where to stop displaying text and create a Read More link to the remainder of the post.

001.eps More Buttons

Shows or hides an additional row of buttons. WordPress.com also has a spell-check button.

001.eps Distraction-Free Writing

Removes all screen boxes except the content editor.

image

001.eps Headings

Drop-down menu primarily used for the headings of sections of text.

001.eps More Styles and Formats

Three buttons for underlined text, justified alignment, and coloring text.

001.eps Pasting Tool

Lets you paste text from browsers or other applications without formatting errors.

001.eps Format Eraser

Removes formatting from selected text.

001.eps Special Characters

Opens a pop-up window in which you can choose special characters such as mathematical operators, bullets, letters with accents — or diacritics — and dashes.

001.eps More Indentions

Changes the indention on paragraphs you select but does not add bullets or block quote formats.

001.eps Undo and Redo

Undoes actions in order since the last save/update, or redoes what was undone.

001.eps Help

Provides added information about the visual editor, including keyboard shortcuts.

Introducing the Text Mode Button Bar

The WordPress content editor displays a WYSIWYG view of your content by default. If you want to work with the HTML underlying what appears in Visual mode, you can switch to Text mode.

You can find Text mode by clicking the Text tab at the top right of the content editor.

image

001.eps Text Mode Tab

The lighter color tells you Text mode is active.

001.eps Quicktag Buttons

Only a few of the buttons from Visual mode are available here. If you select text and then click a button, opening and closing HTML tags are inserted around the text. Simply clicking a button inserts an opening tag; when you are finished typing, click again to insert the closing tag. Note: You are not limited to the HTML tags created by these buttons.

001.eps Distraction-Free Writing

Removes all screen boxes except the content editor.

001.eps Content Editor

You see the post’s content with only its HTML tags instead of how it would appear in a web browser. There is no syntax highlighting, but WordPress.org users can add a plugin to provide that.

Try the Alternative Post Screen at WordPress.com

As of early 2015, WordPress.com is making available an alternative version of the post admin screen. Some form of this will likely be the new default screen in the future.

image

001.eps On WordPress.com, at the top of post screens, you see this message, inviting you to try a new version of the post admin screen. Click the link to be taken to the alternative post screen.

image

001.eps No Left Admin Menu

There is no admin menu running down the left side of the screen. As of this writing, you must click My Sites and then click the WP Admin link to access other admin screens.

001.eps Drop-Down Functions

Meta boxes have been replaced with a series of dropdowns which reveal the various functions for controlling the post you are working on, such as Publish, Categories, or Featured Image. Click a heading to reveal the functions. Click again to close.

001.eps Content Editor

This functions the same way as the old design: Visual and Text modes, each with its respective button bar.

Write and Publish Your First Post

There may be many options in WordPress for writing and publishing a post, but there are only four steps you must take to make a post live on the web.

Write and Publish Your First Post

image

Write and Publish a Post

003.eps Click in the title box and start typing.

001.eps If you have a permalinks structure other than the default one, your title will appear in the permalink area with dashes between each word. It is possible to edit that portion of the permalink before publishing.

003.eps Click in the text area of the content editor and type your post’s content.

001.eps If you want to see what your post will look like when published, click Preview.

003.eps You must choose at least one category for your post.

003.eps When you are finished, click Publish and watch for the success message. You can now see your post on your site.

image

001.eps If the post is successfully published, you see this success message.

001.eps The title of the screen changes to Edit Post.

001.eps The main button in the Publish box changes to Update.

image

Publish Later

001.eps When adding a new post, a line appears in the Publish meta box that says Publish Immediately. A date selector drops down.

003.eps Change the date and time.

003.eps Click OK.

003.eps WordPress displays the scheduled time. The Publish button changes to read Schedule, which you click.

image

Change Visibility

001.eps WordPress defaults to making new posts publicly visible.

001.eps If you do not want your post to be moved off the home page by newer posts, click Stick this post to the front page (9781119047759-ma003.tif changes to 9781119047759-ma004.tif).

001.eps Clicking Password protected (9781119047759-ma001.tif changes to 9781119047759-ma002.tif) limits viewing to visitors who have the unique password you enter here.

001.eps If you want only visitors logged in to WordPress to see the post, click Private (9781119047759-ma001.tif changes to 9781119047759-ma002.tif).

003.eps Click OK.

Add Styling and Formatting to Your Text

Styling and formatting your text is partly about making it look good, but it is also about making it easy for visitors to read and understand.

Styling involves qualities like bold and italic, whereas formatting refers to the layout of the text, such as when creating lists.

Add Styling and Formatting to Your Text

image

Change Text Styling

003.eps Select the text you want to style.

003.eps Click the appropriate button on the button bar.

In this example, the Bold button is being clicked, but the process is the same for italic, strikethrough, and underline.

WordPress applies the styling to the selected text.

image

Change Text Formatting

003.eps Text formatting applies to paragraphs of text. You can select the whole paragraph, or position your mouse pointer anywhere inside the paragraph.

003.eps Click the appropriate button, or use the drop-down menu on the second row of the button bar.

In this example, the Block Quote button is being clicked.

WordPress formats the paragraph.

image

Create Subheadings

Note: It is important to create subheadings in your text when the post is long or has clearly separate ideas within it.

003.eps Make sure your heading text is on its own line.

003.eps Click 9781119047759-ma005.tif on the second row of the button bar in Visual mode.

003.eps Choose from one of the heading levels other than Heading 1, which is generally reserved for your post title.

WordPress changes the paragraph format as you specified — in this example, as Heading 2.

003.eps Click Preview Changes to see how your changes will look.

003.eps Click Update to save changes.

image

View Your Changes

001.eps An example of boldface.

001.eps An example of a Heading 2.

001.eps An example of a block quote.

Add Text Hyperlinks to Your Content

A hyperlink allows visitors to jump to another location on the web — including elsewhere on your site. This allows visitors to verify a quote, read a recommended article, use an online tool that was reviewed, or take any number of valuable actions.

WordPress makes it easy for you to include links within your posts or pages.

Add Text Hyperlinks to Your Content

image

Link to Other Sites

003.eps Select the URL on the page you want to link to and copy it.

Note: With most browsers, you can copy the URL by pressing + ( + on a Mac). Or, you can select Copy from the Edit menu.

image

003.eps Highlight the text that you want to make into a hyperlink.

003.eps Click the link icon (9781119047759-ma010.tif) on the button bar. The Insert/Edit Link window appears over the top of your post.

003.eps In the Insert/Edit Link window, paste the URL in the URL field.

Note: Make sure you overwrite the default http:// in the field or you end up with two and break the link. The default is there just to remind you that a full URL is required.

003.eps Type a descriptive title for the page to which you are linking.

Note: Although the Title text is optional, readers see it when they mouse over the link, and search engines use it in assessing your content.

003.eps Click Add Link.

image

The Insert/Edit Link window closes.

001.eps The text you highlighted is now linked to the website you referred to in your post.

image

Link to Your Own Site

Note: The process of linking to your own site is no different, except WordPress provides an even handier tool.

003.eps In the Insert/Edit Link window, click the Or link to existing content link near the bottom.

001.eps A search function and a scrollable list of all content drop down.

003.eps Click the item when it appears on the list.

001.eps WordPress automatically fills in the URL and the content title for you.

003.eps Click Add Link to create the link on whatever text you highlighted in your content.

Use Distraction-Free Writing Mode

If you find the Add New Post screen a bit distracting for writing — crowded as it is with menus and meta boxes — then you will appreciate distraction-free writing mode.

Use Distraction-Free Writing Mode

image

003.eps With a post open, click the Distraction-Free Writing button (9781119047759-ma009.tif).

Note: The same button is on the button bars of Visual and Text modes. It toggles Distraction-Free Writing mode off and on.

image

Clicking the Distraction-Free Writing button (9781119047759-ma009.tif) moves everything off-screen except for the title box and the content editor.

The screen remains minimized until you move your mouse outside the content editor.

Even though all elements are back on screen, they disappear again if you move the mouse back over the content editor.

However, if you click one of the elements while it is momentarily displayed, then the screen returns to normal.

The elements stay visible until you begin making additions or changes in the content area. Then they disappear again.

003.eps These actions continue until you click the Distraction-Free Writing button again (9781119047759-ma009.tif).

Publish from Your Mobile Device

With more and more people using smartphones and tablets, often as their primary device, being able to manage their website from these devices is crucial, and WordPress is mobile-friendly in a couple of ways.

Responsive Admin Screens for Smartphones

image

When your device has a very narrow screen, WordPress collapses the admin screens so that the menu drops down from the top. Although all functions can be run from a smartphone, some are complicated by the narrowness of the screen, such as trying to edit images.

Responsive Admin Screens for Tablets

image

Although tablets can vary greatly in screen width, a typical size produces a collapsed version of the left admin menu and a single column in the main content area. This is plenty of room to manage all WordPress functions.

Apps for Administering WordPress

image

The ability of WordPress admin screens to conform to mobile devices means having to open a browser and log in, in addition to other functions that are awkward to perform on very small screens. That is why some people prefer using an app focused on key tasks like adding new posts, and WordPress has one each for iOS and Android.

Create Post Teasers

When WordPress lists posts, say, on the home page, most themes display the entire post. Instead of forcing visitors to scroll through the full content of each, it is better to use the Read More tag and give them a taste of each post.

Create Post Teasers

image

003.eps Position your cursor at the point in the text where you want to insert the Read More tag.

The content before your cursor will be visible to the public, and what comes after will be hidden until they click the resulting link to the full post.

003.eps Click the Insert Read More tag button (9781119047759-ma011.tif).

image

001.eps A Read More tag appears at the point in the text that you chose.

003.eps Click Update.

image

001.eps On your site, the post now appears in listing pages with just the opening paragraph and a Continue Reading link to the full contents.

The wording of the Continue Reading link can vary by theme, and some themes allow you to change the wording yourself. On WordPress.org sites, there are also plugins that provide that function.

image

WordPress.com enables you to very easily change the wording of the Read More link.

In Text mode, you are able to modify the Read More tag. By default, it looks like this:

<!--more-->

001.eps But by adding your own text, you can change the wording of the link:

<!--more Keep reading…-->

Note: Be careful not to change the opening and closing tags or you will break the function.

image

001.eps The Read More link now uses the wording you specified.

Write and Publish a Page

With the exception of personal blogging sites, WordPress pages play just as important a role — if not more so — as posts do. Although most of what you have learned about posts applies to the creation and editing of WordPress pages, there are some differences.

Find the Add New Page screen by clicking Add New under Pages in the left admin menu. You can also click the New menu on the toolbar and select Page.

Write and Publish a Page

image

003.eps Under Pages in the left admin menu, click Add New.

The Add New Page screen opens.

003.eps Type a title in the title field.

Note: Make your title descriptive of the page content. Do not worry if it does not fit on the navigation menu because WordPress lets you customize the navigation label.

003.eps Type your text in the content editor.

003.eps Click Save Draft.

image

001.eps Watch for the success message to indicate that your page was saved.

001.eps The screen title changes to Edit Page.

001.eps If pretty permalinks are turned on, as shown in the section “Set the Permalinks Structure” in Chapter 4, and you need to edit this page’s link, do it before publishing.

Note: If you have a good descriptive title, the permalink should need no editing.

003.eps Click the Parent 9781119047759-ma005.tif.

The default setting is (no parent).

image

003.eps Click 9781119047759-ma005.tif and click a page from the dropdown to make that page the parent of the new page you just created. If you prefer to keep your page as a main page rather than a subpage, simply collapse the menu and proceed.

001.eps Pages usually appear in alphabetical order in default WordPress page listings, but you can assign each page a number to specify the order.

image

001.eps If your theme offers more than one page layout, called templates, then a drop-down menu appears here. The number of templates varies widely. Simply choose the template you want for this page.

003.eps When you are ready to publish your page to your website, click Publish.

Note: The Publish box works the same for pages as it does for posts. See the section “Write and Publish Your First Post” for more.

Restore an Earlier Version of Posts or Pages

The WordPress content editor has an undo function, but once you have saved a draft or published, the ability to go back with undo is lost. However, WordPress also keeps copies of saved revisions so you can go back and retrieve what you had written earlier.

WordPress.com saves the last 25 revisions of a post or page. On WordPress.org sites, the number of revisions is unlimited, but there are plugins to set a limit.

Restore an Earlier Version of Posts or Pages

image

Note: You can access the revisions screen in two ways, if any revisions exist. In the Publish box, you see the number of revisions available.

003.eps Click Browse to get to the revisions screen.

001.eps Alternatively, you can click Screen Options and then click Revisions (9781119047759-ma003.tif changes to 9781119047759-ma004.tif).

image

003.eps Scroll to the bottom of your Edit Post screen.

001.eps A list of post revisions appears.

003.eps Click the version that you think you would like to restore.

WordPress opens the revision screen with that version selected.

image

001.eps WordPress displays two consecutive versions side by side and highlights places in which the two versions are different. The older version is on the left, the newer on the right.

001.eps A timeline of all revisions appears. Mouse over it to see the date and time of each revision.

001.eps Moving the indicator along the timeline changes the revisions that appear.

001.eps If you want to compare two nonconsecutive revisions, click this option (9781119047759-ma003.tif changes to 9781119047759-ma004.tif) and two indicators appear on the timeline.

003.eps When you have identified the desired previous version and it appears on the right-hand side, click Restore This Revision.

image

001.eps WordPress restores the desired version and returns you to the Edit Post page. Check the success message for the correct date of the revision.

003.eps Make any changes you want and then click Update if the post already has been published (or Save Draft if the post has not been published).

Import Posts from Existing Sites

If you have been writing a blog on platforms like Blogger or Tumblr and would like to import that material into a WordPress.com or a self-hosted WordPress.org site, WordPress provides tools to help you make the transition.

Another common scenario is to move from WordPress.com to a self-hosted site.

Import Posts from Existing Sites

image

Import Posts from a Non-WordPress Platform

Note: In this example, the move is from a Blogger account to a self-hosted WordPress site.

003.eps Under Tools in the left admin menu, click Import.

The Import screen opens.

Note: WordPress.com offers many more choices of platforms from which to import, including Posterous, Storylane, GoDaddy Quick Blogcast, and more.

003.eps Click Blogger.

On WordPress.org sites the import tools are not built in, so they must be loaded as needed.

image

A Blogger Importer window opens.

003.eps Click Install Now.

003.eps Click Activate Plugin & Run Importer on the next screen.

image

The Import Blogger screen opens.

003.eps Click Authorize to allow Google to send your Blogger data.

003.eps The Google Accounts window opens. If you are already logged in to Google, you can click Grant access. Otherwise, log in to Google first.

image

If authorization was successful, you are returned to the Import Blogger screen, which now shows all Blogger blogs associated with your Google account.

003.eps Click Import for the blog you want to import.

001.eps The Posts and Comments columns indicate the progress of your import. If your previous blog was large, the import process may take a while.

003.eps When the import is complete, the boxes for posts and comments change color, and the Import button at the far right changes to Set Authors. Click Set Authors.

image

The Author Mapping screen opens.

003.eps Click 9781119047759-ma005.tif to choose a WordPress user to associate with the Blogger username.

003.eps Click Save Changes.

The process of moving from WordPress.com to a self-hosted site is very similar to importing content from Blogger and other platforms. On your WordPress.com site, you need to create an export file of your content.

image

Import Posts from WordPress.com to a Self-Hosted Site

003.eps Click Export under Tools in the left admin menu.

001.eps There is also a paid service for moving your site to a self-hosted version of WordPress, but if you already have a hosting account and WordPress installed, you do not need this.

003.eps Click Export.

image

The Export screen opens.

003.eps Choose what parts of your content you want to export.

003.eps Click Download Export File.

003.eps Save the file to a location on your device where you can easily find it later.

003.eps Switch to the admin screen of your self-hosted WordPress site.

003.eps Click Import under Tools in the left admin menu. On the list of import tools, click WordPress.

003.eps A WordPress Importer window opens. Click Install Now, and then click Activate Plugin & Run Importer on the next screen.

image

The Import WordPress screen opens.

003.eps Click Choose File and find the file you exported from WordPress.com.

003.eps Once the name of the file appears, click Upload file and import.

image

001.eps The Import WordPress screen changes to the Assign Authors function.

003.eps You can assign any available WordPress user as the author of the imported content using the drop-down menu, or you can create a new user.

Note: If you create a new user, you will need to go to the created account afterwards and add email and other details, as well as change the role from the default Subscriber to Author or higher.

003.eps To import attachments such as images and documents, check the box for Download and import file attachments (9781119047759-ma003.tif changes to 9781119047759-ma004.tif).

003.eps Click Submit to begin the import.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.149.228.138