#1: Links & Images

Rather than the somewhat daunting task of trying to write a complete primer on how to make the most of your smelly-baby-new APP site, I’ve decided to try and simplify my task by breaking it into individual posts that will (eventually) appear in their own feed, and will be accessible to only contributors.  Hoping to further perfect the primer, I’ll be writing it entirely within WP (except, of course, when I need to annotate an image or some such—WP is powerful, but it isn’t that powerful.

So, first things first.  The WordPress Codex is your ultimate living repository for all things WordPress-y.  Granted, it’s a bit much, and fairly techy, but the Getting Started, WordPress Lessons, and Working with WordPress sections are all quite helpful (and less techy) from time-to-time.

Now, seeing as this is intended as a primer, and not just a brush-off to another website, how about a quick refresher on how I created the links above?  Here’s the toolbar for the visual editor:

Visual Editor Annotated

Toolbox for the visual editor; including the “kitchen sink” buttons (highlighted in red).

If your toolbar doesn’t look like this, try toggling the “show/hide kitchen sink” button to reveal the added row of buttons highlighted by the red box in the image above.  Also, please note that we’re doing everything on the “Visual” tab of the editor.  Life’s generally just easier that way (unless, of course, you’re fluent in HTML/CSS).

Anyway, links are easy.  You’ll notice the arrow in the middle is pointing to a greyed-out icon representing pair of chain-links.  Why are they greyed-out, because I haven’t highlighted anything yet, so there’s nothing to link.  Lesson learned: links only work on tokens.  So, if you want to link a particular word/phrase to another page (either internal or external to APP), highlight the text you want linked, and aim for that button.  If your aim is true, you’ll get the following dialogue box:

Insert_Edit Link

Dialogue box for inserting/editing a link.

If the site you’d like to link to is external to APP, then you’ll want to enter the full URL (including the “http://” bit at the beginning) and give the link a title that’s describes where the link is taking the reader.  Linking internally to the APP site is even easier: either search for the page/post in question, or scroll through the list at the bottom of the dialogue.

Okay, great, but how the hell did you get these images in here in the first place?  Q, are you some kind of unholy daemon with supernatural powers?  Although it is true that I’ve been accused of worse, establishing that sort of power would require a level of dedication and success that is clearly beyond me.  Nope.  Adding images is nearly as easy as linking text.

Refer again to the expanded toolbar for the visual editor.  Clinking on the “Add Media” button will open—yup, you guessed it—another dialogue box.  Any images already on the server will be available by default, but you can also Upload Files to add additional images/videos/whatnot to the site.  Once the file has been uploaded, you’ll note some additional setting on the right-hand side of the dialogue box:

The "Insert Media" dialogue.  Upload Files to add new files to the server.  Additional information and display options are found on the right side of the dialogue.

The “Insert Media” dialogue. Upload Files to add new files to the server. Additional information and display options are found on the right side of the dialogue.

Clicking “Insert Into Post” will drop the image at the last location of your cursor, so it’s typically best to add images after you’ve finished writing in order to give yourself a better idea of where they’ll work best with respect to white space and textual references.

Once you’ve inserted the image (or other file), you can click on it in the Visual Editor to bring up a final set of options:

Edit_Delete Image Annotated

Clicking on a media file highlights it a provides buttons for editing or deleting the image from the post (but not the server).

Editing the image reveals a set of advanced options for floating the image inline with the text, resizing the image, and providing additional information such as a caption.  (Note: these are basically the same options as in the “Add Media” dialogue, but are somewhat easier to use since they modify the image post-insertion.  Advanced Settings allow for even more control.

Screen Shot 2013-07-29 at 7.19.48 AM

The “edit image” dialogue. Note the Advanced Settings tab at the top for the truly brave and/or OCD among you.

And that’s about it for links and images.  At this point you’re essentially free to upload and include most anything you find.  Remember to be kind to copyright whenever possible (the caption and description fields are a good place to start).  Obviously, if you’re looking to have something customized, q-ified, or otherwise transformed into an knock-off homage to the knock-off known as MBW, arrangements can be made.

Keen experimenters will note that I didn’t mention the Featured Image option.  That’s because it’s broken at the moment.  Maybe it’ll be fixed by the time this post goes live, and maybe it won’t.  You’ll just have to wait and see.  [Update: The wait is over, and Featured Images are working as desired, if not as intended.] Everything else is easiest to learn via trial-and-error.

Next up: dealing with these incredibly longs posts, some hidden grooviness of the Visual Editor, and whatever else I can fit in.