*Show / Hide 2nd row buttons.
Normally 2nd row buttons are hidden by default but Seja Framework sites keeps this row visible.
We’ve found that this reduces confusion in support sessions 🙂
While Posts and Pages have two different functions in WordPress the writing application is exactly the same.
For these examples we’ll be working with Pages but we will also look at some of the differences in Posts.
To start, simply select Add New
Shortcut: You can also select New from the drop-down menu in the admin bar
You will notice that the WordPress editor is not unlike a word processor. In fact, WordPress will auto-save and keep revisions making accidental data loss rare.
Editor Icons:
- Row 1
- Bold
- Italic
- Strikethrough
- Unordered List
- Ordered List
- Blockquote
- Align Left
- Align Centre
- Align Right
- Link
- Unlink
- Insert More
- Full Screen
- Kitchen Sink *
- Insert YouTube video
- Facebook like button
- Div anchor
- Clearfloat
- Row 2
- Format
- Underline
- Justify
- Colour
- Insert Text
- Insert from Word
- Remove formatting
- Special characters
- Outdent
- Indent
- Undo
- Redo
- Help
- Horizontal Ruler
- Style
Most of the buttons in the WordPress editor are self explanatory so this article will concentrate on the ones that are not immediately obvious.
Blockquote
A blockquote is a block of text that is indented. It’s great for separating a section of text from the rest of the page (just like we’ve done here).
Link / Unlink
These buttons are greyed out until a section of text is highlighted. WordPress makes it very easy to link to content both on your site and externally
Insert More
This breaks the content, allowing you to place a teaser paragraph or two to encourage people to read the full article.
Kitchen Sink
Show and hide the second row buttons
YouTube (Seja Framework)
Copy the URL of the YouTube video you wish to embed into the input box in the popup window. YouTube options can be configured in the Appearance > Theme Settings > YouTube tab. You can also configure sizes in individual videos.
Facebook (Seja Framework)
Insert the facebook like button into the page.
Seja Framework also supports the embedding of Facebook feeds
Div Anchor (Seja Framework)
An anchor point is a section of content that can be directly linked to. You can use it to link to important information lower on the same page or other pages.
Clearfloat (Seja Framework)
Clearfloat is a solution that overcomes the issues that can be created by floating images.
Colour
While this is self explanatory we do recommend that you use the colour button with caution. If you’re intending to use specific colours in the site it is better for SEO to include them into the stylesheet. We then then add a custom style to the Styles drop-down.
Insert from Word
Microsoft Word is a great tool for writing documents but it’s a terrible web editor. While basic documents are not an issue, copying and pasting from documents that have heavy formatting create excessive code. This image shows the code created by writing directly in WordPress (left) verses code created after a Word document was pasted (right).
Remove Formatting
If you have pasted content that has messed up your layout, you may be able to remove the formatting by highlighting the text and clicking this button
Special Characters
Including Copyright, trademark, currency symbols and many others
Horizontal Ruler
Puts a line across the page to break up content (there’s one just below the next paragraph). This is another solution to the floating images issue.
Styles
Custom elements that help you format your page. Some of the default styles allow for colour and positioning but we can also add styles to suit your needs.
Page Titles, Permalinks and other elements
The input box at the top of the page is clearly the page title but what’s a permalink?
The permalink is the address as it will appear in the URL. By default WordPress uses web addresses which have question marks and lots of numbers in them, however when we set up your site we generally set the permalinks to be easily readable which is great for SEO.
The permalink address for this page, for example, is http://wordpress.seja-design.com.au/tutorials/writing-content-part-one/ whereas the default address would actually be http://wordpress.seja-design.com.au/?p=173
Experiment: Try copying and pasting the default address http://wordpress.seja-design.com.au/?p=173 into the address bar and you’ll see it opens up this page again
Page Attributes
We mentioned in the Permalinks section that the address of this page is http://wordpress.seja-design.com.au/tutorials/writing-content-part-one/
This address is made up of the site address + the page address but you’ll also notice that in between we have ‘tutorials’. This is because we’ve created a parent / child relationship between this post and the tutorials post.
Page Attributes also allow us to control some template settings. By default the Seja Framework is a single column page but you can create a two column layout using the Template settings or a three column layout using a mix of Template settings and div blocks in the Styles drop-down. We’ll look at that in more detail later on.
Custom Fields
This section in red refers to elements that are not part of the default WordPress but included in the Seja Framework
Meta Description
Puts in a meta description for SEO purposes
Meta Keywords
Add page keywords, separated by comma (SEO)
Title
The Seja Framework adds the site name and page name to the <title> tags but if you want to use something else you can replace it here (SEO)
This tag appears within the sites head code and is not the title that is visible on the page
Top Content Block
Allows you to place text or shortcode between the header and the page title (yes, this IS the one that appears on the page).
Custom Sidebar Text
A widget that allows you to put page specific text onto the sidebar.
Publish
Publish, save drafts and make reviews of your page’s content. You can also set privacy and passwords.
Other Features
A Word count is available at the bottom of the editor block on the left hand side and information about the last save is on the bottom right.
Handy Hint: You can resize the editor block by dragging the bottom right corner
