Useful Links: Designers, Assumptions, WordPress, New Students

Designers shouldn’t code is the wrong answer to the right question. A quick and interesting read from Josh Seiden’s blog, More Than This.

Assumptions. At least some of the time guys notice it when they marginalize women.

HTML5 Support in WordPress Core. Some HTML5 improvements in the comment and search form are explained.

Teaching Web Design to New Students in Higher Ed is by Jen Kramer at Smashing Magazine. I don’t agree with every point made in this lengthy article, but it’s important reading and provides some thought-provoking ideas for anyone teaching web design. If this describes you, it’s must reading.

Useful links: Migrate, AccessWorks, 10 Tips, LMS

Migrating a website to WordPress is easier than you think is a well done article at Smashing Magazine that can help you if you are contemplating a move.

I’ve worked with Knowbility for years but I didn’t realize they offered Document Accessibility and User Experience Testing. Using a group called AccessWorks, they provide people with disabilities who have been highly trained to help you with making your PDF and Office documents accessible.

10 Easy Accessibility Tips Anyone Can Use. You could build a class or a presentation around these basic tips from WebAIM.

Study ranks accessibility of Learning Management Systems.

The review examined four major LMSes: Blackboard Learn version 9.1 Service Pack 6 and 8, Desire2Learn version 10, Moodle version 2.3, and Sakai version 2.8.

WordPress 10 Year Anniversary Meetup

Ferndale WordPress Meetup (March 09)

The Albuquerque WordPress community hosted a 10th anniversary of WordPress Meetup and party last night. In attendance were 30+ Automattic Happiness Engineers from around the world. It sounded like the UN, with all the accents you could hear in the room.

During the actual meetup, the people from Automattic talked about the various jobs they perform and explained how bloggers and developers can get involved in WordPress.

The Happiness Engineers have a variety of roles, from working with people needing help and support via email, to working on the WordPress core, developing plugins like Jetpack. There were specialists in both the .com and .org issues, WordPress store, and more. There was also a ‘happiness gardener’ who works on issues and bugs no one else is assigned to do as well as developing for the WordPress core.

Someone asked about developers contributing to the core. The response suggested it’s a good way to grow and improve as a developer in an environment where there are so many people who can help you. If you develop a theme, there are a list of guidelines for what will be tested.

Some of the people from Automattic mentioned that they got their starts working in the open source part of the community and were eventually hired by Automattic. There are many ways you can contribute to the open source project that is WordPress. Here are a few suggestions I heard.

  • Use the forums to give back to the community
  • Write plugins
  • Work on documentation (the documentation in the codex is user created.)
  • Get involved in writing patches or fixing bugs
  • Work on adding feature requests
  • Translations are always needed for all the documents and other information because WordPress is in so many languages
  • There are a number of public mailing lists. [http://codex.wordpress.org/Mailing_Lists] in which you can participate
  • Contribute to the development of mobile apps
  • Join in meetups and Word Camps
  • Someone from the audience suggested that submitting ratings for plugins is helpful so that other people can see ratings and comments

At Automattic, all developers spend their first 3 weeks as happiness engineers and one week a year for every year thereafter.

2 Timely Tips from the WordPress community

You know that you should be downloading and saving a backup of your blog each time you upgrade WordPress. But did you know there’s a company that does it for you – every day – for a minimal charge? That company is VaultPress. Check it out. It could save you from a disaster.

Everyone from newbies to old WordPress hands can find something valuable at learn.wordpress.com.

Moving your Posterous blog to WordPress.com

If you have a Posterous blog you are probably concerned about losing your content now that Posterous is closing down. Posterous has systems in place that will allow you to back up your content or export it to another blog.

posterous backup button

You can move it all to a wordpress.com blog in a few easy steps.

  1. Choose the “Backup” button at the upper right of your Posterous admin screen.
  2. Again, choose “Request Backup” for any or all Posterous sites you wish to save.
  3. When the file is ready, the Request Backup button will turn green and change to read “Download.”
  4. When you download and open the zip file, you’ll see that one of the files included is wordpress_export_1.xml
  5. If you have a WordPress.com account, head for your Dashboard to set up a new blog for your import. If you do not, go to wordpress.com and set up an account.
  6. In the WordPress Dashboard for the blog you plan to import into, find Tools > Import > Posterous.
  7. You’ll see a file upload form. Browse to find the wordpress_export_1.xml file in the unzipped package you downloaded from Posterous.
  8. WordPress will ask you which Posterous users will be given author powers on the new blog.  Make those choices and click Submit.
  9. You’ll get an email when the import is complete.

How to Put a Sidebar on a WordPress Twenty Eleven Page Like This One – UPDATED

I just changed the theme on this self-hosted WordPress blog. So – no big deal, it’s as easy as pressing a button, right? Not exactly. Not if you want to modify the theme. Not if you are in the BlogHer Ad Network and need an ad in a sidebar on both the main blog page, single blog post pages and site pages.

WT sidebar ad
There’s the required ad in my sidebar.

Here’s how I got that sidebar on every page. I started with the most basic theme you can get at wordpress.org: twentyeleven. There’s a newer one called twentytwelve, too. I chose this theme for several reasons.

  1. It comes from WordPress, made by WordPress, so I know I can trust it.
  2. It’s free.
  3. It has lots of bells and whistles, and it’s a responsive design. (See Should Your Blog Use Responsive Design?)
  4. It has a very simple and clean look, which I like.

The twentytwelve theme has lots of bells and whistles, too. It is a mobile first design. (See The Mobile First Craze.) I didn’t think I needed to go that far, so I stuck with twentyeleven.

The only drawback to this theme is that the single post pages (called Single in WordPress) and the individual pages (called Pages in WordPress) did not have sidebars. No sidebar, no ad space, which means I couldn’t comply with the BlogHer Ad Network requirements for running their ads.

I had to modify single.php and page.php to add the sidebar. And I had to modify functions.php. I’ll take you step by step through the process. You can do some of this in the WordPress admin area. I also used a text editor and an FTP tool.

Step 1: Install the Theme and Create a Child Theme

Use the blog admin area where you choose a theme to get twentyeleven ready to go. Or you can download twentyeleven from WordPress and add it to your site themes directory using FTP.

Here’s the thing. You have to have twentyeleven on your server, but you are not going to switch to that theme. You are going to use a child theme.

Making a child theme is actually easier than it sounds. You add another folder to your site’s theme’s folder. I did this using FTP, but you can use your site host’s control panels to add folders, too. Just make sure it’s in the themes folder and at the same level as the twentyeleven folder.

Nothing goes into the child folder, which I named twentyeleven-child, except a style.css file and a functions.php file. I started with blank files that I made by saving text documents with those two names.

Here’s the structure you need to see on your server, according to the WordPress Codex.

  • site_root (www)
    • wp-content
      • themes (directory where all themes are)
        • twentyeleven (directory of parent theme, Twenty Eleven)
        • twentyeleven-child (directory of child theme; can be named anything)
          • style.css (required file in a child theme; must be named style.css)
          • function.php (not required in a child theme, but needed to modify the pages to add the sidebars)

Once this child folder is in your themes folder, you will see the child theme as a option in the WordPress Appearance > Themes area where you choose a theme. Let’s do a couple of things to the CSS file before we choose it as the theme, though.

What Goes in the CSS File?

In the style.css file in the child theme, you start out with this:

/*
Theme Name:     Twenty Eleven Child
Description:    Child theme for the Twenty Eleven theme 
Author:         your name
Template:       twentyeleven
*/

@import url("../twentyeleven/style.css");

Upload this into the child theme folder.

When you use a child theme, the browser uses any modification you put into the style.css file, but it also looks up to the imported stylesheet for everything you don’t modify. So when you pick this child theme as your theme, the css file tells the browser what the parent theme is and where the parent style sheet is.

Okay. Now you can push the button in the WordPress theme admin area to choose the child theme. Take a minute and go look at your blog with this new theme.

You could do nothing more than this and your child theme would work. It would be exactly like the parent theme, so you probably want to create a few style rules of your own in the child theme that will overrule the rules in the parent theme.

Just as an example, I didn’t like the looks of the h3 tags in the parent theme. They were too small, there was too much white space around them, they weren’t in bold, and they were all caps. So I figured out which rule I wanted to change and added this to the child style sheet:

.entry-content h3,
.comment-content h3 {
	font-size: 16px;
	font-weight:bold;
	line-height: 1.6em;
	text-transform: none;
}

This takes precedence over the rule in the parent theme CSS file, so now I have h3 headings that I like better.

Step Two: Modify single.php and page.php

You need to add the sidebar to pages and single blog posts. You open single.php and page.php in a text editor and upload the changes by FTP. You are going to modify these pages in the parent theme folder, not add anything to the child theme folder.

Open single.php in the text editor. At the very end of the page add

<?php get_sidebar(); ?>

It should be immediately before this line:

<?php get_footer(); ?>

Do the same thing to page.php. Save them both and upload them to the server – back into the parent theme where they came from.

Step Three: Modify functions.php

Now we come to the functions.php file. I found these directions at Twenty Eleven – Sidebar on Single Posts and Pages and they worked perfectly.

Add the following code to the up-till-now blank functions.php file in the child theme folder. Don’t do anything to the functions.php file in the parent theme.

I have no idea what this php is doing, but I can copy and paste like a champ. The author of the code says it will, “Suppress the .singular body_class from the single post or page,” so the sidebar can be added.

add_filter('body_class', 'blacklist_body_class', 20, 2);
function blacklist_body_class($wp_classes, $extra_classes) {
if( is_single() || is_page() ) :
// List of the classes to remove from the WP generated classes
$blacklist = array('singular');
// Filter the body classes
  foreach( $blacklist as $val ) {
    if (!in_array($val, $wp_classes)) : continue;
    else:
      foreach($wp_classes as $key => $value) {
      if ($value == $val) unset($wp_classes[$key]);
      }
    endif;
  }
endif;   // Add the extra classes back untouched
return array_merge($wp_classes, (array) $extra_classes);
}

Now that you have something in your functions.php file, upload it into the child theme folder again.

Anything you put into your sidebar via widgets should now appear on every page of your blog.

An Alternative

After I had done all this, I discovered Extend WordPress Twenty Eleven Theme to Include Sidebars and More Flexible Options that uses an extension to do all this and more. Sound easier? You might give it a try first. One drawback – it won’t work using a child theme. WordPress recommends that modifications to a theme be done with a child theme.  But, if easier is better in your world, you might choose to ignore the recommendation to use a child theme and go with the extension. It gives you choices in the WordPress Admin area that let you select options to add sidebars.

[Editor’s Note: Cross posted on BlogHer in slightly different form.]

UPDATE: 1/25/2013.

Since writing this post I discovered a much simpler way of insuring that the sidebar appears on each single page you might want. The theme itself provides a sidebar template, which you can find in the page attributes section of the dashboard while you are editing the page.

Page Attributes

Select the sidebar template for the page and you are good to go.

Live Blogging What I Learned at WordCamp Albuquerque

Welcome to Wordcamp

I went to several sessions at WordCamp Albuquerque and took a lot of notes. Consider it a live blog of the events I attended.

Designing for WordPress

@alternatekev alternate.org

At #wcabq @alternatekev talks about designing a WordPress theme.
(Sorry, didn’t notice it was out of focus while it was on the phone)

In designing for WordPress, forget about the canvas.

WordPress designers design for front end users and also for the back end users. WordPress has content blocks, many types of content, sidebars, custom menus. Build in the ability for users on both sides to customize. Better to lean toward customization than controls. Think about how the things you design will be intereacted with by the user within the dashboard.

Need to know what features each content type has. Some content blocks can be sticky and stay at the top.

Need to know how different numbers of menu items will be needed, what type of plugins users want, what part of the template do I build and what does the user edit.

Theme structure: home page, blog river/posts page, single blog page, category listing, author bio page, post format templates, search results, search form, sidebar(s), post s archive, 404 page, basic page template.

Posts can have different formats. Chosing a different format for a post can change the way the post looks. So could have post format for products, videos, etc.

Can have featured images. It’s a module that you see next to Insert Into Post when you add an image. There’s a plug in that makes the first image in a post into a featured image.

Pages are a custom post type, can be ordered, can be hierarchical. Pages can have different templates. Page templates for empty pages can be tied to custom post types. Use Post Type Labels to create custom post types.

Child theming. Based on a parent theme of your choice. 2011, 2012 both built to accomodate child themes. Use a comment in the index.php page to link to the parent template. Kevin was unclear about how to do this. He showed us some code but the relevant line was missing. (I was confused about this, but got it cleared up later.) StudioPress.com has a theme framework called “Genesis” and you can use child themes with it to customize. Stay away from Thesis! Carringtontheme.com has good frameworks. _s is a theme that can be customized easily (made by Automattic). functions.php will always run in the parent theme first, but can be overridden in functions.php in the child theme. An advantage of child themes is when a theme automatically updates, changes in the child theme are not overwritten.

WordPress is Just the Beginning

Kimanzi Constable @KimanziC talesofwork.com

We all want to be heard. We all want people’s attention. There are 54 million WordPress websites and 3.1 billion people online every day. So how do you get heard among all that.

Why do you want to be heard? Fame? Money? Impact? Social media creates an open door but you need to think about the quality of your audience. How many comments do you get? How many retweets. Quality, not quantity.

Quotes Peter Drucker, “People buy with their hearts, not their minds.” Connect with people through your story, emotions.

Talked about Amanda Hawking, another person who hated her job and wanted to publish a book. She self-published using only social media sold 10,000 copies in the first month. She got some book reviewers to review her books and used social media.

When Kimanzi tried it he sold 3 copies in two months after spamming everyone he knew on Facebook and Twitter. He asked himself, “Why do I want to be heard?” He refocused on the message that helped people get out of jobs that they hated. He focused on helping people. To get traffic, he tried guest posting on larger blogs. That brought in traffic and created book sales. He blogged a lot on topics that people could relate to so the traffic that came subscribed and shared.

Do companies use story? He talked about how Apple uses story and emotion to connect with buyers. Use your story. I kept thinking about that very cute Nintendo DS ad with Penelope Cruz and her equally gorgeous sister playing some Mario game as a great story example.

Be honest. Be to the point. When you use social media to tweet a link to a blog post, tap into the emotion of the post. Click through rate increases when you throw in the story. When you connect, thank people and share.

Story. Lesson. Story. Lesson.

Make your about page tell your story. Then get them to opt in and subcribe.

Use your story to network.

High-Performance Front-End Development

Ben Byrne, Cornershop Creative

Speed. Page load time makes a huge difference in making people not like your site. Google takes page load time into account when figuring your page rank.

He will be talking about what gets delivered to the page.

Enemies are DNS lookups, HTTP connections, sequential loaading, bloated DOM, bloated CSS, Payload size.

DNS lookups. Every domain mentioned on your page needs to be resolved to an IP. If you have DNS lookups for scripts, assets, images, etc, each has to be looked up. Want to keep it to four or under. Includes anything loaded to your page – script, image, css, font, etc.

HTTP connections. Site will load faster if you reduce http connections.

Can use SASS to compress files. Plugin W3 Total Cache does that on WordPress. Plugin W3 Cache also does compression. This plugin will also combine and compress your JavaScript files. Manually put jQuery plugins into a single file.

CSS sprites put all your images into a single image. There are plugins that help with this. Ben did not list them.

Lazy-load defers images from loading right when the page loads. There’s jQuery “lazyload” for images. The image loads when the browser is scrolled to where the image is needed. There are attributes “defer” and “async” that can be used with script tags that put off loading the resources immediately.

Don’t use images when CSS can do the job: gradients, rounded corners, text and box shadows, rotation. May need some fallback content for older browsers if browser doesn’t understand CSS3.

Sequential loading. Somethings load in parallel and some things load in sequence. JS files are loaded in sequence and block others. The browser basically stops everything until the JS load is finished and the browser sees what it’s going to need to do.

JS should be at the bottom of the page whenever possible. CSS should be at the top of the page and loaded with <link> rather than @import. (Did you hear that, Adobe?)

A bloated DOM with all sorts of structural elements like nested divs can slow down page loads. There’s no magic number, just don’t have elements on a page that you aren’t really using.

Bloated CSS can slow you down. Long selectors can slow you down when a short selector might do. CSS parsers read from right to left so it loops through the DOM looking for every element named in a dependent selector for everything listed in the selector. Don’t use unnecessary stuff like div#main when #main is all you need.

Reduce total number of bits by using Minify CSS and CSS and HTML, write clean code, don’t scale images in the browser, use the right image filetype. You can blur in unimportant parts of JPGs to reduce the file size.

Good resource developer.yahoo.com/yslow

Chat Me Up! Using Social Media to Promote Your Blog

Lauren MacEwen SM Cubed Consulting

Lauren MacEwen talking about social media #wcabq

No slide deck – interesting. She’s just standing there talking, no script, no speakers notes.

Numbers and analytics can tell you how you are succeeding. How many people are coming to your blog, how long are they staying there. Google Analytics, Stat Counters, and others can tell you many things – often different things – about how well the blog is doing traffic wise.

What number is success? Look at your audience. How big is your audience? Maybe 100 visitors is a big chunk of your audience, maybe 500,000 is.

She likes Scribe SEO, a plugin that helps your blog with SEO. Some ad networks may help with SEO. She mentioned adSense, but I’ll bet BlogHer’s ad networks help with SEO as well.

She says Google+ is the best website to be on for promoting your site. If you post a link on Google+, you are instantly indexed. Results coming from Google+ are integrated into search results.

Make sure your blog posts are a minimum of 300 words. Google only recognizes a post as new content if it is over 300 words. Video with text helps with indexing for SEO.

AdSense has a free keyword tool. Gives you keywords for blog posts or your whole website.

Facebook and blogging is long tail marketing. Twitter is short tail marketing. Twitter is good for SEO, especially when using hashtags. She recommends putting things on Twitter multiple times a day. A tool like HootSuite lets you schedule tweets.

Using bit.ly lets you customize your links. Then you can see specifically which tweets are getting more hits. Put the link in the first 1/3 of a tweet to get more clicks. Twitter has the broadest audience. There’s a niche for everyone on Twitter. The more you tweet, the better your results are. The bigger your audience, the more you need to tweet.

Using third party apps to post to Facebook may mean your posts don’t get the attention on Facebook.

A Chat in the Happiness Bar

I stopped into the Happiness Bar and had a chat with one of the Happiness Engineers from Automattic. He explained that you mention the name of the template that is your parent theme in the CSS file for the child theme – thus clearing up something I  misunderstood earlier in the day. He told me 2011 and 2012 both have responsive design built in, so I may want to update my theme to a child theme of one of those. Can’t imagine why – I’ve only been using Very Plain Text since 2001.

6 Best Plugins For Securing Your WordPress Based Website From Hackers

Master lock, "r00t" password
Photo by Schill via Flickr

Most everyone that has a WordPress website or blog does so out of the necessity to be creative and to generally express the thoughts that are screaming to dome out of your head onto paper (or in this case the screen). That effort to be me is where I get most of my fuel to carry on even on the worst days of cyber-attacks. A favorite quote comes from henry Ward Beecher, – In himself is a man’s true state of riches and power.

As most of you know WordPress is the very popular software that allows each of us to be who we perceive ourselves to be. With its ease of use and versatile approach to fulfilling each individual’s needs WordPress opens the doors to the virtual universe.

Thesis WordPress themes are responsible for that seamless creative time that you spend when setting up your site. But users beware! As great as this software is for the majority of people who are not techies, WordPress offers a wide open opportunity for hackers.

Thesis WordPress themes are great software products and it is an absolute necessity that you spend the little extra time that it requires to secure your blog or website against invasion by the cyber scum that inhabits our planet! With its vast library of plugins users can seamlessly manage their website without the added expense of a webmaster.

My Top 6 Selections for 2012 Best WordPress Security Plugins

1.  Akismet is a program that checks comments left on your blog or website to see if they appear to be spam and then allows you to review the spam it does catch through the blog “Comments” admin screen. Akismet comes pre-installed with Thesis WordPress themes, and once you apply for and install your API key you will find the controls for it in your options panel in your Dashboard.

2.  Website Defender WordPress Security plug-in is a free and comprehensive security tool that helps you secure your Thesis WordPress themes installation and offers suggestions for strengthening your passwords, securing your database, and lots more.

3.  BackWPUp is a plugin that backs up your Thesis WordPress themes files and database and store them wherever you decide.  You can schedule automatic backups and pick out which folders and tables you want to backup.

4.  WP Security Scan raises the level of the security for your Thesis WordPress themes installation. It does this by scanning your site for security issues then suggests the methods you can use to fix them.

5.  WP Secure plug-in provides security for your Thesis WordPress themes installation by hiding your plug-in directory and WP version from hackers and others. This is important to do because the cyber scum that inhabits our virtual world use the version and the list of plugins to locate one that they have hacked before to hack their way into your blog!  Add this plug-in to protect your website or blog.

6.  WP-MalWatch is designed to alert you when hackers have invaded your blog. When hackers do get into your Thesis WordPress themes blog site, they infest your site or blog with links to their sites. When you know they have invaded you can take the necessary actions to remove them from your world.

It is very advisable that you only use the plugins that are approved by the WordPress folks. They always test each plugin prior to posting it as available on their website. This is in no way speaking ill of the third party plugins that abound on the internet. It does suggest that you must do your own investigation of third party products so that you get a feeling of trust from the vendor.

Worrying about the safety of your site is not nearly as productive as installing the proper plugins to ensure that safety. Spend the time that it takes you to install the plugins that will protect your site!  Like William Plomer once said, – The power to connect the seemingly unconnected lied within creativity.

Guest Author Bio: As a freelance writer and research hound Jason Monroe is a young (mid 20’s) single man adding content for clients from within the WordPress Dashboard.  Jason has been online since 2003 and has been a huge fan of WordPress and the StudioPress themes since their inception. When he’s not writing premium WordPress Genesis themes reviews you might find him spending quality time with nature by walking the nearby mountain trails.