© Grant Smythe:

Hey people, here’s a rough guide to help you understand the WordPress Editor you will have to use and become familiar with when submitting articles and reviews for OXCGN. It is also a space where new WordPress web owners can browse and get some great ideas on formatting, as well as understand some of the finer points of making your site look a little more visually appealing.

Note to OXCGN team members. You do not HAVE to do this, but it does help the admin team a great deal, as it allows us to get your items out there into the wild much faster. It also gets you familiar with the work that goes on once you normally submit an article or review.

I do advise you read this first section properly, and follow the directions as laid out. If at anytime you feel stuck, lost or confused, simply SAVE and hop out and contact an Admin team member.

What I’ll do here to help some of you out, is to lay out what is the ‘basic format’ for a post so that you all can get familiar with doing it yourself. This will save “heaps” of time my end.

Things to remember:

Two of the BIGGEST things to remember when working in WordPress Editors is:-

1) Write all your work straight into the WordPress Editor rather than using Word or NotePad or any other text editor. If it is not possible, then use a simple text editor, do NOT formatting whatsoever, not type or font changes, just raw plain text.

2) Write out your article/review in full before doing the “Layout” in the WordPress editor . . . do not format as you go.

This way you work uninterrupted and are focused on your work, not how it looks.

Plus, if you format as you go, you begin to fill the html backend with rubbish code and it makes life harder for you when it comes to changing things around.

So stick to the Write-first-edit-format-later style please!

Once you have all your work completed, the first thing we have our headings . . .

More hints for contributors:

I will be doing a visual tutorial on this soon, but for those wanting to increase the viability of their submissions. here are a few tips to take onboard.

1: Look for “viable” links to back your article and reviews up. They should ideally appear in the first 2 paragraphs. Or, if it is an article rather than just a review, then make sure they are relevant to the article, just not links to something semi related.

2: Do a search on google for the word, if it appears in Wiki, grab that, if it has a main official website, then grab that as well, tie links in with the sentences so they are relevant to the sentence and will lead readers to factual information on your topic.

3: Do the link work yourself. This speeds up editing and my publishingtime. There’s been times I’ve had to spend a few hours doing link hunting for several articles before I can even ad images. The more you do, the closer you get to getting more work done, submitted and LESS EDITING by staff.

4: Look for high ranking sites to link to, as the higher the site, the better your out-bound link is, and the more chance google will rank the article when it gets “pinged” onece submitted/published on such places as Google, Yahoo, domz, MSN, Digg etc etc. They then send out bots to search the page, find relevant links and then rank the page acordingly. No links, no ranking,

Note:

 

For those wanting to work straight into the WP editor while still having a page open, say if you were quoting or making up an article from something you have seen on the web right then and there. There is a great little FireFox 3 Add-on called ScribeFire.

Go to this link, and click Ad To Firefox, and then you can set it to have a small icon at the very bottom of the Firefox browser frame. You simply click this, and half the window will then log you into your WP site account, and you will have instant access to the site as if you were normally in there.

You will of course have to give Scribefire your login details, but as this is on your own computer, it is safe to do so.

For those of you with iPhones and iPod Touches, there is a WordPress App from iTunes, simply do a search in iTunes for WordPress app. It’s FREE and it will be uploaded to your iPhone when you next plug your iPhone/iPod Touch into your computer. It allows access to your WP account.

One thing to remember. As these are drafts, you can’t really screw the site up, But ALWAYS make sure you SAVE your work as you go, even though there is an Auto-Save enabled. Plus, when you’ve written something (not formatted it), it’s a good idea to simply copy the entire work into a simple plain text file and store in a folder called My submissions etc.

Leave it handy so you can return other items to it. This acts as a back up incase something goes terribly wrong.

If you must do your work in say Word, (we really prefer direct into the WP editor) please try a simple text editor first such as TextEdit in Apple and Typepad in Windows. If you use these, you will have to insert them via a tool on the bottom row of the tool bar.

You will see two text icons like a page. One with the letter “T” on it and the other with “W” on it. Click the appropriate icon, a small box will appear. Insert/paste your copy from the Word or Simple Text file in the box provided, and then click “Insert in Editor”.

It will drop it in, take a few seconds to alter it, then lay it out for you. Click the HTML view tab and ensure there is NO html that has been trasferred to the editor. This is what causes So many issues in WP. Which is why it’s best to simply do your work directly into the WP editor via your browser, iPhone and iPod Touch etc.

Okay, let’s get on with it. Just note that over time I will be adding to this, reworking the page for easier navigation and use. So bear with me on this, it’s a big job, as you’ll start to see when you start playing inthe editor.

• Article Heading

This is reasonably simple, but the reason for following this method is that Google actually searches pages and looks for this html hierarchy in the page. If it is here, it grabs it over the pages that do not have it at the beginning.

All these things count on how google, Yahoo and other search engines locate and rank pages. Ideally, by following what we have here, you’ll come to understand SEO (Search Engine Optimisation) a little better.

1) This is done by highlighting the heading then selecting Heading 1 from the drop down menu in the (2nd) ‘second’ row of the tool  bar.

Note:

If you only have one row of tools, click the very last icon in the toolbar – it has many small coloured squares on it, this will open up the second tool bar which has additional tools you will need to expand you abilities in the WordPress Editor.

It will stay open for you as a ‘default setting’ so long as you don’t close it when quiting.

2) With the heading still highlighted, click the 4th tool set in the second toolbar which shows the Letter A and a drop down menue showing colours.

3) Select the colour green, (3rd) third row in, (2nd) second green down. This is the green for ALL headings and sub-headings and the green used in the review scores (not the/10 that is the 3rd green down)

4) If you have a sub-heading, do the same process, but this time select Heading 2, and also select italic and keep it the same green.

Note:

There is no need to select BOLD on any heading settings, as all Heading are BOLD by default.

• Your gamer tag:

by XboxOZ360:

This is just normal type not a heading (paragraph style) and simply in BOLD and ITALIC and is the orange second row in, second colour down.

• Your actual name

©2009 Grant Smythe:

1) NB: This is done much the same way but using Heading 6, and then italic and soft grey which is the second down in the first column of colours.

Note 1:

There is no need to select BOLD when setting Headings, as all heading are BOLD by default.

Note 2:

To get the © on mac use the Option (alt) and “G” to get the symbol and I believe it’s Ctrl+Alt+C in windows?

• Body Text:

Well this needs no explanations other than spacing things out. Write your article, do all editing you want etc, and when you’ve finished and happy with it, and how it is written, then break it up even further for easier on-screen viewing once published.

As a rule of thumb, 3 – 4 lines of text in the WP-editor is all you need, as that will be around 5 – 6 lines when published, more if the text appears next to an image. So while your paragraphs may have been around 6 – 7 lines or more in the editor, you will need to simply break them in two at the first available full stop.

Otherwise what happens is a huge block of text in between pics or items, and it doesn’t encourage ppl to read the larger blocks. Whereas around 4-5 lines of text etc is just about right. Sometimes this can’t be avoided naturally, but as a rule of thumb, it’s a good measure.

This helps me in also spacing pics and video Was when pics are positioned to the right or left, it makes those 4-6 lines of text even longer and again makes for harder reading if it’s in one huge block. Web is different to printed media where this is not so much of a problem.

If you check this in edit (editor mode) you’ll see what I mean, as most of this is 3 lines of text in the editor, yet shows up more in the finished published viewable page.

Once finished, place your ©By-Line once more

©2009 Grant Smythe:

Note: Just highlight and ‘copy’ your by-line you did in Maroon at the top and paste it under the finished body text.

• When it comes to the score in a review:

1) At the very beginning of your score always add  2 of the “ characters immediately before the actual score ie; “9.5/10.

2) When you have this done, then set it as a Heading 1. Then you will need to select the colours.

3) The 2 “ are actually selected as “white” from the colour selection box, making them invisible when published.

4) The actual score is the normal Green used in the main headings and sub headings.

5) The /10 is the 3rd green down which is the lighter green, so that the focus is on the actual score not the ‘out of 10′ section.

So basically it should look like

“9.5/10

I will be sending around a file to everyone so that you can also add the submit icons to your work, again speeding things up for me and those that will be publishing things. The code will give you the icons above, formatted to suit their positioning on the page, so all you need to do is insert them in the html editor.

Which has all the main code in it to help us submit articles or readers in submitting items to their various share sites.

The ‘current’ submission button layout is at the end of the tutorial. It must appear exactly as it is now. So to make sure of this, please insert it as html, the following explains how to do this task very simply.

When you ready to place them in the item you are working on, you need to the following:

1) Locate the file I have sent you that has the Sibmission icon html code in it.

2) Copy the code where it says : Use the following code (copy this to your clipboard etc)

3) click the HTML view tab in you article/review the html side of your article will appear. Scroll right down to the very bottom, and youwill see the cursor already there blinking away at you like a friend .. .

4) Hit “Return” twice then “Paste” the code in.

5) click the View Tab and you’ll then see the icons appear as they should at the very base of the article/review already formatted and ready for the editors to do their thing on.

That is it from your side re these buttons. The rest is up to the admin team.

* Adding image

---

NOTE:

Editors/Admin only:

Adding Images is only available for those with full administration access. You can now upload the following file types.

jpg, jpeg, png, gif, pdf, doc, ppt, odt, mp3, mp4, m4a, wav, ogg, mov, wmv, avi, mpg.

This is how we insert images.

Inserting images:

• 1 Collecting images from the web:

1) First off, when you find an image you wish to use from the web, re-name the image to suit the article or review. This is VERY important when it comes to Mr Google. Google will search for names, not numerical orders.

So if you give your image a name, then do so in proper readable text not abbreviations which google has difficulty in reading . . . Let’s say it’s about the game Fallout 3, then make the file name that includes the word oxcgn such as the following ‘fallout 3 – oxcgn #1‘ etc etc.

It is very important to do this with ALL images you chose to upload.

• 2 Uploading your image:

1) Click on uploader and insert image. Select the first square icon of the 5 different upload/insert icons. A large box will appear which allows you to select where you wish to get the image from. For the most part, images you have grabbed are on My Computer, so select that, which is the first tab from the selection.

2) Then click “Select file” -  navigate to the file you want from inside your directory, select it and press Select in Mac/OKAY or Save in Windows. The WP editor will then upload the file to the WP Servers, “crunching” it’s file size automatically to save storage space, but not degrade the image.

The image is now on WP’s servers ready for you to insert into your page.

• 3 Including Link URL:

1) Link URL allows the image to be viewed by readers at it’s original size you grabbed it at from the web initially. It must have the button ‘File URL‘ clicked.

2) This will place the images internal WordPress location URL in a field box . This is automatically generated and needs no alteration. Once you have selected it initially, the next image you upload will do this by default . . but just check to make sure it’s there with the first one or two images you upload.

• 4 Next choose Alignment:

1) First off select where you want the image to appear otherwise known as Alignment. ‘None’ places the image with no text wrapping, usually used in between paragraphs or for Headers etc.

2)Then select either ‘Left‘ or ‘Right‘ if you want the image to appear in those areas with the text wrapped around it as shown in the selection window.

3) How you do this is by placing your cursor at the beginning of a selected paragraph, then select Left or Right. The image will appear there once you have finished with sizing etc and pressed the final Insert Image button.

Note:

As mentioned, alignments can be place to the left, right or have none. If you want no alignment, always place your cursor in a space between paragraphs first.

• 5 Next it’s Size.

1) There are usually 3 sizes available (which you can re-size later in the editor if you need to, other than thumbnail). These sizes are Thumbnail, Medium and Large. When I place images in the article, I ‘usually’ use Medium for all normal sized items (excluding header Imagers and ones that need to take the whole width of the page.

2) Medium is ‘usually’ (250 wide), with other images grouped in pairs that you have seen me place under paragraphs I then resize down to (221 or 222 wide – no larger), making sure you have placed two (2) ‘spaces’ between each image. I do the re-sizing AFTER I have finished uploading the images.

3) The bottom Images which appear 3 across (thumbnail) are simply done by selection ‘Thumbnail” . . .

Important, place Two (2) ‘spaces between each thumbnail before uploading the next, and at the end of a row 3 thumbnails, simply give it one (1) “return” and that will move it down to the next row correctly.

Example:

Here I have initially placed my cursor at the beginning of a paragraph, selected “Right” for it’s alignment/location, and selected “medium” for its size. Once that is done, make sure the image appears where you wantged it, remembering that what you see in the WP-editor is notg “exactly’ how it will appear in the finished page.

To get a proper look at it, simply click “Preview” to see the page as it would appear once published. (yes, the text below does not match the images, it’s simply an example).

Notice that there are 2 images inserted, one to the right, and one to the left. The one of the right also has a ‘caption’, which can be inserted when placing the image in position.

Next I inserted two images next to each other. Once they were uploaded, I then re-sized them to 222 wide by grabbing the corner ‘handle’ of the selected image and dragging in diagonally to the required dimension, focusing on obtaining the WIDTH of 221 or 222.

This allows 2 images to appear next to each other (in this theme, other themes have different width of their main columns, so you will need to work that one out based on the width of your page) any larger and the images will break and be place one on top of the other wasting valuable space.

Then I did a Heading for any additional images that will appear as ‘thumbnails’. Notice I also made mention that a reader only has to “click on any image to see full size images” etc. This has to be done. It’s basically “idiot proofing” the page. Yes, many people have to be told what to do.

I then inserted the Submission icons using the current submission icon layout. When it come to actual publishing and adding published urls to the submission button code, we’ll deal with that – next . . . oh bugger.

---

Example:

Fallout 3 takes place 30 years after Fallout 2 and has changed substantially in both the way that the game is played and also in the setting.

The nuclear war that tarnished the world began when the earth finally ran out of vital resources, with America, China and Russia all becoming involved in trying to secure the depleting resources of the world which lay in Alaska.

The mystery over who fired the first nuclear missiles is not known, but the world was left in disarray and nuclear ruin, making habitable conditions an extremely rare occurrence.

Fortunately many people survived by living in man made constructions called Vaults, these Vaults are sealed off from the outside world.

That included you, with Fallout 3 taking place in Washington DC, It opens with a scene that depicts your birth and also your short but entertaining stint in the Vault. Upon hearing the tragic news of your father’s mysterious disappearance, you immediately attempt to escape the Vault to search for him. In the process of escaping, you can see just how flawed the idea of the Vault is, as you unravel the many dark secrets that lie surrounding the Vault concept.

The Gamebryo engine which was previously used in Bethesda’s other major titles “The Elder Scrolls III & IV”,  is now used in Fallout 3. Like Oblivion, the initial impression once you leave the vault is one of awe. The sheer open-world beauty is immediately present.

Tomb Raider Underworld Media Blowout

Click any image for full view.

---

Editors/Admin only:

Submission code URL insertion:

This of course is for editors and admin staff only, but it will give those who want to know just how much work goes into dropping just one item up on the site has to go through. What often appears simple, is a longer task than first thought.

When you have completely finished formatting the article/review, make sure it is 100% ready for publishing, and that all editors have done their thing with it, the following process is what is done in order to have a site include “Submission buttons that get your news out there, and enable reders to submit your work to sites such as Digg, Yahoo Buzz, Game Grep etc.

Final Process:

The very first thing to do is to do a “split text” insert. This allows only a prescribed amount of text to appear on the Main Page, which is basically an alias of all items on the site. The front page has 10 items that appear, and then scroll over into the next page etc. To make sure that the front page isn’t HUGE, we “split-text” the articles so that the barest minimum is shown, giving a link to the actual real post.

1) To do this, open the article in Edit as per normal.

Remember that what you see in the editor is not how it appears in the published page/post. So before going into editor, check the Preview. Find an end of a paragraph that is just at the end of the first image, or if there’s no image, then after the 3rd paragraph. Note that, then open the article in Editor.

2) Place the cursor at the end of that paragraph you chose, irres[pective of where it appears in relation to any images.

3) In the WP Editors top tool bar you will see a small icon that shows 2 text boxes that are split. It's right next to the Link tools. click this and a faint line will appear with a small box saying "more" . . .

While this will appear in the front page once published, it will not appear in the actual post or article. In order to get people to click it from the front page, which actually gets viewed less than the actual articles, I like to replace the word "More" with a direction encouraging readers to click on it.

Something comical or even outragious, so long as it's short, sharp and to the point, and simply no longer than a few words. This is easily done, but MUST be done in the HTML tab.

4) To access this . . . once you have inserted the Split-text bar . . . click the html tab, scroll down to where you see the end of the paragraph you chose. You will then see a line of symbols and text inside tags with the word 'more' in it. Place your cursor immediately after the word 'more', give one 'space', then type in what you want to say . . . something like - Lots more Raiders info here . . . - include the 3 full stop with a space between each.

5) Then switch back to 'View' . . . you will NOT see the words you have typed, but they are there once published.

6) Click Update/save post and those items you have just done will be saved.

Now you are ready for Publishing:

1) Back in the editor, click the "Publish" button and WP will then publish the post, placing the alias on the front page along with the new article in a post within the viewable site. The item is now published - but not ready for submissions.

2) Go to the front page. Note that the split-text has placed the text you selected up on the front page, click the active link for the article, and you will be taken to the "real" article.

3) Grab (copy) the complete URL from the URL field.

4) Click "Edit" for the post, you will go into the 'view' section of the post in the editor. Click HTML tab.

5) Scroll right down to the very bottom where all the submission button codes are. You will see the code for the various submission buttons and there are 3 which you have to alter. You will get a better idea of where to place them if you open the file I sent you that has the code in it.

This file has the areas that need replacing in CAPS and BOLD and in RED. Everything in CAPS RED BOLD must be replaced with the url you have copied. But only appears as CAP in the code within the actual code in the editor. Use the coloured code to gove you an idea of where the code that needs replacing is located.

6) There are 2 that say YOUR URL HERE . . . make sure you place the complete url in the html tab section of the editor 'exactly' where it needs to go by selecting ONLY the words that need to be replaced. Do not ad spaces, or cut off ANY code whatsoever. Paste the complete URL into those areas.

7) Next come the final step. One of the codes only requires the Date-Timeline code of the url. Highlight the code that begins with 2009/ and finishes with a / (ie: 2009/01/05/lips-review-the-social-interaction-and-music-game-for-xbox/) that has the heading of the article in it. Simply grab/copy this from the url you just pasted in one of those two areas.

8] Insert the date line url over the bold-capped text including all dates and words and the last /in between the quotation marks “2009/01/05/lips-review-the-social-interaction-and-music-game-for-xbox/“ No spaces, or code missing or added other than the time line and file name. Again, use the file I sent you as a guide.

9) Once all 3 sets of codes have been completed, the 2 full urls and the one date line url, the article is ready to be saved. Click Update Post; and the item is completed.

10) To check if it works. Hop out of the editor, go to the front page, click the article link to get to the real article, not the alias . . scroll down to say the N4G submit icon.

11) Click the N4G icon and it “should” open up a N4G submit page with the correct url already ina text field ready for you to past in the “exact” heading of the article you are submitting.

12) Copy and paste the original posts Heading into the N4G text field, make sure the url matches the one of the ‘actual’ article correctly, as once submitted, it can not be changed or re-submitted. Once you are sure it is correct, ensure you pick a Catergory or Channel to place the N4G Tip in.

13) Once completely satisfied, click Submit.

It will then appear in a list of Tips . . .

14) Click the Thumbs up once and it will change once more and give you a different url. Use this url to post to team members.

I will be working on a point-by-point visual walkthrough of the process once I have managed to reduce the video file sizes so you can view it off the WP Servers from within our site.

It sounds complicated when in words, but once you have done it a few times, it becomes easier. Shit, If I learnt how to do it, anyone can.

Visual walk-through for the WordPress Editor

What follows are tutorials on various aspects of the WordPress backend for staff and others who use this excellent software.

• Inserting Videos;

This is for people who have access to the complete backend such as administrators.

Part One:

Part Two: