WordPress Apps

You can post to WordPress (and perform administrative tasks like approving comments and checking your stats) from your phone or tablet with the WordPress app.

IMG_5848.PNG

When you start up the app, choose Add Self-Hosted Site. That will give you the extra option of putting in your site’s URL. For your class blog that’s the full address “http://students.iam.colum.edu/~your.name/wordpress/” (replacing, of course, your.name with your name.) The login and password is the same as what you use to log into your blog to post.

IMG_5849.PNG

 

When you first sign in, the app will detect if you have JetPack installed (you do, don’t you, to get some analytics captured?) and prompt you to login to that. That’s your WordPress.com account, the same as for Jetpack or Akismet.

 

IMG_5850.PNG

If you have Jetpack installed (like you should already) you can check your site’s latest stats in the pp. You can also approve comments and add or edit Pages and Posts. You can even upload pictures from right within the app—I was able to add the screenshots above directly from my phone.

With post frequency being one of the factors of blog success, the ability to post on the fly from a phone app could be a great benefit for your blog.

Survival CSS

In class this week I talked about Survival CSS—knowing enough CSS to be able to troubleshoot an issue with a plugin or change a color of an element of your Theme.

CSS stands for Cascading Style Sheets. The “Style Sheet” part means just what it sounds like—it’s what gives a web page its style and appearance. The “Cascading” part means that you can have multiple style sheets applied to the same web page; styles get processed in order and later or more specific styles “win”. That’s what will let us tweak our CSS without actually editing the original CSS files—we can add our own CSS styles into a special style sheet that gets applied last of all to our blog, so it’ll always win.

A CSS style consists of a selector (what part of an HTML document the style will be applied to) and then pairs of properties and values assigned to that property.

For example, if we wanted to set the font and color of everything in a paragraph tag in our HTML, the CSS would look like:

p {
font-family:”Helvetica Neue”,Helvetica,Arial,sans-serif;
color: black;
}
To get more specific in CSS, we can assign a class or id to tags. In survival CSS, you’re mostly going to be dealing with classes and ids that have already been set up in the themes you’re using. Classes are noted with a period and ids with a hashmark.
One of the most common things you’re going to want to edit in CSS is the color of something. Colors in CSS can be represented in several ways and the most common are:
  • As names—140 colors have specific names in CSS, ranging from common colors like blue and red to things like mediumorchid.
  • As RGB (Red, Green, Blue) values in hexadecimal notation. For example, blue is #0000FF, red is #FF0000, and mediumorchid is #BA55D3.
  • If both the numbers in each pair of RGB values are the same, a shortcut is to simply type the repeated digits once. So blue is #00F, red is #F00, and mediumorchid cannot be written with this shortcut, because the BA and D3 pairs are each different.

Let’s say we’ve got a Theme we like for our blog, but we want to change the color of just the description text under our blog name. In any of the major browsers, right-click on the description and choose “Inspect Element”. This will open a new panel in the webpage that shows you the HTML of that part of the page and the CSS that is being applied. Each of the browsers deals with this slightly differently and I happen to like the one in Chrome.

inspect-element

In the CSS panel we see all the different styles that are being combined to produce this section, in reverse order. If you scroll down the list you’ll see more and more elements with a line through them, indicating that they’re replaced by a later direction above. Right at the top we can see that the element we’re interested is part of the header and has the id “description” and is getting it’s color from a style that contains a few other properties as well:

header #description {
color: #888;
margin-bottom: 40px;
font-style: italic;
}

To change that color, we’ll go to our WordPress dashboard to Appearance > Edit CSS and create a style that overrides just the color definition.

header #description {
color: red;
}

Ta Da!

Look, My Text is in Red

You Want Links? I’ve Got Links.

In class this week, Sam presented our single Blog Talk. She presented Peanut Butter Fingers, an interesting cross between a personal blog and a healthy eating/living blog.

Our guest speaker this week was Keidra Chaney of The Learned Fangirl. She mentioned a bunch of interesting sites during her talk that I wanted to document for my own purposes, and this is as good a place to do that as anywhere:

This idea of the “note I’m keeping for myself, but I might as well share it with others”, has anyone expressed that more eloquently? Of course they have. Long-time blogger Cory Doctorow wrote in 2002: My Blog, My Outboard Brain.

Survival HTML

Last week in class we talked about “survival HTML”—knowing at least enough HTML to be able to troubleshoot your posts when the Visual Editor in WordPress has failed you and you need to dive into the Text side, or similar situations with widgets or a wonky theme. A couple of resources if you want to explore that further:

  • HTML Dog has some well-written tutorials covering all the basic HTML elements and Intermediate and Advanced sections as well.
  • W3Schools isn’t quite as cleverly written, but they have a “Try It Yourself” button built into every page that lets you work with the tags in an interactive editor/browser.

Blog Talks

Every week a couple of students in our class are presenting favorite and/or interesting blogs. Perhaps they will be of interest to you as well. Here’s what we’ve seen so far this semester and I’ll post future weeks’ Blog Talks throughout the semester.

9/9

Lorenzo – http://www.favoritepoem.org/
Maggie – http://www.danamadeit.com/

9/16

Rachel – http://abeautifulmess.com/

9/23

Deanna – http://chicityfashion.com
Bridget – http://www.intothefashion.com

9/30

Ashley – http://ourcitylights.org
Amelia – http://blackgirllonghair.comhttp://naptural85.com
Gianna – http://refinery29.com – http://lovelaurenelizabeth.com
Anna-Laura – http://abduzeedo.com

10/7

Megan – http://mollyjacquesillustration.com

Akismet

A couple of weeks ago I asked you to install Google Analytics and/or Jetpack, so you could start collecting analytic data. If you haven’t already done so, you should, and ask in class if you need help. In that post I breezily mentioned that getting a WordPress.com account, like you need for Jetpack, would also let you enable Akismet, to fight comment spam. I was reminded in class that there’s a little trick to the Akismet setup that you should probably know.

When you go to Activate the Akismet plugin, you’ll be prompted to get an Akismet API key. The sign-in for that is your WordPress.com login, and then you’ll be prompted to choose between Personal, Business, or Enterprise plans: choose Personal. The Personal sign-up screen has fields for you to put in your credit card, but don’t! (I mean, unless you really want to support their efforts: but I’m not asking you to shell out any more for this class.) Instead, notice the slider in the upper right of the form that asks how much the service is worth to you. Slide the slider all the way to the left to $0. You’ll get a little frowny face, but the credit card fields go away and become a Continue button. Press that and you’ll get your Akismet API key, which you can then use to activate Akismet on your blog.