WORDPRESS Lesson 02.02 WordPress Editor WordPress Editor WordPress - PowerPoint PPT Presentation

WORDPRESS Lesson 02.02 – WordPress Editor

WordPress Editor WordPress uses a simple HTML editor that allows users to create and update content for blog posts, pages, comments, and other content types that require a rich editing environment. Overall, if you’re familiar with word - processing software such as Microsoft Word or Apple’s Pages, then you are well on your way to understanding the WordPress editor.

Standard Toolbar The standard toolbar that appears within the editor contains the following options: • Bold / Italic / Strike-Through • Bulleted List / Numeric List / Block Quote • Left Justify / Center / Right Justify • Create Link / Delete Link / Insert "More" tag • Spell Checker / Full Screen View / Kitchen Sink (more options). The two tabs, " Visual " and " Text " allow you to toggle between working with your content visually (much like a word processor), and using HTML mode (much like a developer would). The " Add Media" icon on the upper left is used to upload media files such as images, audio, pdf, and other document types.

Kitchen Sink Here is the expanded version of the toolbar, showing all options available for the visual mode of the editor.

Kitchen Sink Options The additional "Kitchen Sink" options include: • Text Type (Paragraph, Headline, pre-formatted types) • Underline / Full Justification / Text Color • Paste as Text / Paste From Word / Remove Formatting • Symbols / Out dent / Indent • Undo / Redo / Help

Working with Content You can add your content directly into the editor, or copy and paste content from web pages, text files, or word processing documents. Note that it’s possible to bring in unwanted formatting when copying and pasting, so be sure to check your work often to make sure that the correct fonts and sizes, and colors are being used. When pasting from word processing files, such as Microsoft Word, be sure to use the Paste from Word option (Kitchen Sink), which will remove the unwanted content.

Working with Content While working with the editor, keep the following in mind: • Editor will display content differently than how it will appear on the public web site. This is not an exact "WYSIWYG" (what you see is what you get) environment. How content is displayed on your public site is largely dependent on the theme you've chosen for your web site. • No options for changing font sizes – Many people ask me about this, and I insist that you do not need this feature. Font settings for your site are determined by your theme. Additional "overrides" can be created by setting up your own style sheets. • No tables – That's right, there is no feature in this editor to allow you to create tabled data. Again, this is on purpose. Tables cause all kinds of problems for layouts and search engines. You will not miss the feature, but if you absolutely must use a table, one can be pasted into the editor, or created directly in the Text mode. • You can always switch between Visual and Text tabs without loss of content. There may be cases when editing content using the Text tab (HTML) is more efficient or convenient than editing it visually.

Working with Media You can upload image, video, or other type of files using the editor, or the Media Library feature in WordPress. While in the editor, position the cursor at the place where you'd like to add an image (or other file type), and click on the " Add Media " option (upper left corner of the editor).

Working with Media You are able to upload multiple files at the same time using the feature. Simply drag-and-drop files onto the dialog, or use the "Select Files" option to choose one or more documents from your local PC. Other options include: • Media Library - Add content already part of your site. • Create Gallery – This allows you to create a photo gallery using multiple images that you upload to the site. • Insert from URL – Add content that is already available somewhere on the web. • Add Featured Image – Some themes allow posts to use a "Featured Image", a graphic that appears as part of the header of each post you create.

Insert an Image After uploading one or more images, you are able to insert them into your post. Note the various options available to you for customizing the graphic being inserted. With the image selected, you are able to set it's size, determine what it links to (if anything), align it within the page (left, right, or center). You can also set it's title, alternate text (alt text), caption and description. There is also an option to delete the item permanently.

Insert an Image Here's an example of an image inserted into a page (or post). The image is left-aligned, and has a caption of "The road ahead!".

Editing Image Properties When the image is selected (click on it), two options appear – the first allows you to modify the image properties, while the second allows you to remove the image entirely.

Image Properties You can use the Image Properties ( Edit Image ) tab to re-align the image to your liking, change the title, alternate text, caption or link URL, as well as set the image size to a percentage of what it currently is.

Image Properties The second tab (Advanced Settings) allows you to further customize the image. You can change size, CSS class, or add a custom style. Borders and vertical / horizontal spacing is also supported. If the image is linked to a page, post, or to a larger version of the image, you can use the "Advanced Link Settings" to customize how that link should appear. This, again, includes options to change the text of the link (title), specify a CSS class, styles, and even a target (open a link in a new tab or window).

Image Gallery Using the Image Gallery feature, you can quickly and easily create nice looking image galleries that showcase your photos. Simply select the images you want to use in the gallery using the Media Library tab, and re-arrange them in the order in which you want to display them at the bottom of the screen (where small thumbnails can be seen). Use the " Create a new gallery " option to add this to your page.

Gallery Settings Before inserting the gallery into your page (or post), you have the ability to modify some of it's settings. Drag-and-drop to rearrange the images, add captions, and decide on the number of columns and what each thumbnail in your gallery should link to.

Image Gallery The image gallery won't appear in the WordPress editor, but a placeholder will be added to the page. When viewing your web site, you'll see the gallery in its full glory!