SEO

The best SEO for any site is using good, semantic code, having your most important content “front-loaded” (putting the main things you want both visitors and search engines to find in the headings and first sentences/paragraph(s) of the page), and creating an accessible site, which is good for users with visual, motor, or hearing impairments, but also for search engines. Meta tags with a good, accurate description and relevant keywords of course are helpful.

I don’t plan to implement any SEO on any of my sites until they are ready for “prime time” – right now they are in development, and I don’t want them to be found, so I’ve set them to not be indexed by Google. When I’m ready to go public with them, I’ll change that setting, and make sure my meta tags are good, but until then, I’m using best practices for semantic web, and also one of the first things I did when I set up my sites was set up better post titles (which will help them show up in searches as well as making more sense to readers). The standard plug-in that everyone seems to use is the All-in-One SEO Pack plug in, and I’ve downloaded and installed it, but I’m going to wait on activation, again, until I’m ready to go public with my sites.

My main project site is a local nonprofit, so SEO is not a big concern – although we do want people looking for what they have to offer to find them. I’ve started working on another site that is a business, and they currently come up first in searches and we want to keep it that way, so SEO will be very important. I’ll be looking at what keywords and description they are using in the meta tags and keeping (and possibly adding to) those, along with making the site more semantic and accessible.

Site Security

We  are learning about site security this week, and have been asked to share stories of websites we know of that got hacked – how it happened, how they fixed it. I’ve asked an acquaintance at the Mono Lake Committee to share what happened when their site was recently defaced, but other than that, and until I get the inside story on that, I really don’t know of any websites that were hacked, but I do know of an email account that got phished.

It was the webmaster email account of the site I used to be webmaster for – the new webmaster got phished. So embarrassing! I saw the email, and it was pretty obvious to me, but she had the flu and was barely keeping up with the email, and for some combination of those reasons and carelessness, she bit. It was a Yahoo! account, and we had tons of addresses saved in it (mainly to keep emails from going into the spam folder, but also for reference) and the phisher sent out emails to all the contacts saying the webmaster was stuck in Europe and needed money – it was obvious to everyone who got it that it was more phishing, but in the meanwhile, the webmaster was locked out of her email account, where job postings and events and all sorts of web updates came in daily. She had to frantically email everyone to not respond to the phishers, apologize, and set up a new email account for online forms, at the same time as working with Yahoo! to regain access to her account, change the password and lock out the hackers.

The annoying thing for me, as former webmaster, is she never changed all the emails on the website – even though she regained access to the Yahoo! account, she switched to a gmail account as they are so much better at filtering spam and phishing emails. But the old email account was on practically every page of the website! And it was not a dynamic site or even made with templates – each page was separate. However, all she had to do was a global find and replace in Dreamweaver – except it was more complicated than that as the emails on the site were disguised with Spam Vaccine, but it would have only taken a few passes to get all the old email addresses updates, and if it were me, I would have rather changed them all by hand than leave them on the site! Sloppy.

Of course that sloppiness is what got her phished in the first place.

Lesson: even if you are fairly tech savvy, you still need to “make haste slowly” to avoid making a fatal error.

To Do List

I’m getting farther (further?) behind on my to do list, and I have no one to blame but myself. I started out on the right track, researching and learning the right way to customize a WordPress theme for use as a CMS – using frameworks, a relatively blank theme, and creating a child theme that imports most of the parent theme’s features but overrides some with customized functions and styles. I started on that path on my main wordpress.org site, but when I started my project site, for some reason I didn’t keep on that path – I fell for an attractive theme that was harder to customize, and started editing the theme’s functions and styles directly, so now my code is all mixed in and harder to update. Why did I do that? It’s like a bad relationship – it started out as just a fling, but now I’m fully involved. Well, it’s time to break up and start fresh, and this time I’m going to do it right!

Here’s my To Do list, and it’s just a start:

• Make it work in the domain, not just the wordpress folder
• Research which starter theme to switch to – I already started on Thematic, so I may stick with it, or I may try Sandbox or other good starter theme. My previous post on the starter theme article will be a good place to start!
• Change to sandbox or thematic or other theme frameworkGet site structure and content in place – pretty easy, since I have that done, just need to get it done on the site
• Get dropdown menus working – easy in Thematic – they are working on my main wordpress.org site.
• Add some style – I’m good at CSS, but you wouldn’t know it! I need to add my own styles and also play around with Photoshop and create some custom backgrounds, banner, logo, icons, etc. for the new site. This is a pretty big project, so I may just try using wireframes to be placeholders for future graphics and images. But I can at least add some basic styles for now.
• Continue researching and testing gallery plugins for images
• Continue researching and testing event calendar plugins
• Continue researching and testing role management
• And work on security, too!

That’s a big list, but I just need to suck it up and get started on it! If getting the index to work in the root of the subdomain (bristleconecnps.naturallygeeky.net) instead of the wordpress subfolder where I put a separate installation of wordpress, then I can just install wordpress in the root, or live with it in the subfolder, for now. This isn’t my actual client site, anyway, but a place for me to learn WordPress. In fact, maybe I’ll just skip that first “to do” and create a whole new subdomain and do yet another wordpress installation – it’s all good practice, anyway. And maybe I should just stick with Thematic, since I’ve already started learning it and it’s well documented and has a great community – Ian Stewart seems to have “written the book” on using child themes, anyway, so best to stay close to the source.

Okaaaay… that’s the first two checked off already, and using Thematic, it will be easy to check off a few more in no time! Ahhh… I feel better already

New Sitemap/flowchart generator

In the article “WordPress 2.8 Resources for Developers” I found out about SlickPlan, a free flowchart and sitemap generator, and so I thought I’d try it out, since my experiment with OmniGraffle (a few posts back) was not all that easy. This was super easy, and you can copy the html for your sitemap, and save the flowchart as a pdf! And did I mention it’s free? Pretty cool.

Here is a link to the flowchart on the SlickPlan website: Bristlecone CNPS

Here is a JPG of the PDF that SlickPlan generated:

Here is my sitemap (links don’t go anywhere – they are in the generated html from SlickPlan so you can replace # with the proper URLs):

• Home
• News
  • Events
    • Plant Sale
    • Sojourn
    • Walks
    • Lectures
    • Meetings
  • Newsletters
    • Current
    • Archives
• Resources
  • Plants
    • Species
    • Gardening
    • Plant Sale
  • Books
  • Links
• Get Involved
  • Join
    • Membership Form
  • Participate
    • Plant Sale
    • Other Events
  • Volunteer
    • Board Meetings
    • Work Parties
  • Donate
    • Donation Form
• About
  • CNPS
  • Bristlecone Chapter
    • Our Namesake Trees
    • Photo Gallery
  • Mary Dedecker

Note that the 3rd sub-level categories may not necessarily be their own pages, but sub-categories on a page, depending on content.

This is a great free tool! Easy to use, generates useful code and images to share with clients, and did I mention it’s free?

List of Starter Themes

A very useful article for those of us starting out in WordPress theme development:

• Definitive List of Free WordPress Theme Frameworks | W3Avenue

  GREAT resource for starting points in developing your own WordPress theme using frameworks – including blank/startup themes, and theme frameworks with full support for child themes, among others.

  Be sure to check the "Useful Articles" section at the bottom for more great resources on theme development.

• tags: webdesign, wordpress, themes, frameworks, childtheme

Posted from Diigo. The rest of my favorite links are here.

Modules, Plugins and Widgets, Oh My…

I guess plugins are the “modules” of WordPress, so my title is a bit redundant. But whatever. All of this post refers to work I’m doing on my project site: bristleconecnps.naturallygeeky.net.

Plugins So Far

I’ve been experimenting with different plugins to try to achieve my site goals. I learned in my original “sandbox” site about child themes, but I haven’t been using one for my project site – I think I need to start over and fix that, because it’s so much easier finding a theme with the functionality you want already built in and playing with the CSS or doing minor changes – I found a nice looking theme for my project site and started trying to add functionality with plug-ins, and it’s a royal pain so far.

CSS Drop-down Navigation

I tried another drop-down plug-in, and it made a menu bar up at the top of the page that looked like you-know-what. I know, I know, I can use CSS and fix all that… What I really wanted was a plug-in to work WITH my current theme and make the sub-pages show up as drop-downs. The way they do in my Thematic theme. The one I’m trying to make work now is here: WordPress CSS Dropdown Menu. I think I just need to start with a stripped down theme, add a child theme for changes, and start over – get the functionality the way I want it and do the nice pretty stuff later. There are lots of plugins to do these sorts of things, though, if you search on the wordpress.org site.

Events Calendar

I found one that works, but not with all the functionality I’d like. It’s a child-page of News, but since I don’t have the drop-down menu working, it’s hard to find. What I like about this calendar is that you use shortcode to put it right on your page, where most calendar widgets and plugins go in the sidebar. I want a fully functioning calendar, full size, on the page. I also want users to be able to click on the links to events to see a page (or post) with a description, and I’d like people to be able to subscribe and/or download calendar info. I did this 5 or 6 years ago using iCalShare, but I’d like something that seamlessly integrates into WordPress. The one I’m using right now is here: WP Events Calendar.

Role Manager

This is a handy tool, but one I haven’t yet played with. I installed it, but haven’t tried to set up a user with a specific role yet. I found it because I wanted to give someone the ability to edit the calendar and add events, but because it is its own menu item on the dashboard, it didn’t fall under any user permissions except for “admin” (and I didn’t want to give admin rights away like candy or anything!) I’ll report on how it works once I try to set it up. Here is the site: Role Manager

Widgets and Other WordPress Tricks

Widgets

I added a site search widget, pages for sidebar navigation, and the Events Calendar sidebar widget as well. On naturallygeeky.net, I used the text widget to create a different kind of sticky post. It seems like it would be good for quotes, taglines, etc.

Static Homepage

Okay, this seems like it should be straightforward, but is another example of how we are shoehorning a blogging platform into a CMS role. My theme shows the home page, and now there are two home pages showing in the navigation of the original theme. The new CSS drop-down plugin shows only the current static home page, but I’m having a little trouble with it right now. And the “news” page is the new posts page (blog), and shows the home page message as well, so it shows up all over. I think I can use code to make it “exclude” certain posts, but sheesh… I think building a static xhtml/css site would be SOOOO much easier!!!! All this stuff is super easy that way. Grrrr. I just think my clients need the easy editing ability of WordPress through a web interface, anywhere, without needing to purchase software (like Contribute). I am pretty sure there are easier and more appropriate CMSes to work with, though!!! Here is the WordPress Codex page on creating a static homepage, FYI.

Also, while I’m whining, sometimes it’s like an Easter Egg hunt trying to find settings in the WordPress Dashboard! The static homepage setting is buried under “Settings > Miscellaneous.”

Wishlist

• Static homepage (welcome, intro, what this is, what you can do here, who we are, etc) – I want that page to be “home” in the navigation – and not a duplicate!
• News page where posts go:
  • Any news updates
  • Events
  • Meetings
• Category pages that appear in the navigation and will automatically update with additions (events, meetings, etc) – I want to try out different ways of doing this. When a post is tagged (or categorized?) with something like events (or “calendar”) it automatically gets added to the calendar.
• Calendar that can be downloaded, subscribed to, etc, and also that allows users with less than admin rights to add/edit events
• Slideshows that are lightweight, easy and intuitive to use, for past event photos, and also for images of native plants.
• Menus with dropdowns to sub-pages

I think that is it for now – I’m working on all of those things – haven’t installed a slideshow plug in yet, though.

Project Site Planning

My project site is fairly simple – home and four main (primary navigation) sections, with a few sub-sections of each. I made an outline with how I thought the site should be structured (see below), then downloaded OmniGraffle (as suggested in the Visual Vocabulary link in the Boxes and Arrows “Site Diagrams: Mapping an Information Space” article) and started to play around with mapping it visually.

Wow. Seems a LOT more complicated that way. I never liked mind-mapping, and I don’t like this or see how it’s helpful – the outline seems WAY more clear to me! Not only that, but it took a long time because I was figuring out the program, which is neat if you like that sort of thing. I’ve had it on my computer, as it comes bundled with Macs, forever, but must have deleted it or moved it to an external drive to save space because I had to download it. I didn’t want to buy a license for $99, so I kept grouping my objects so I could add more, which was a bit of a pain. It’s a neat program, but I could do it on paper much more easily, although I think it would get complicated looking pretty quickly that way, too. I mean, on the web, everything is connected to everything else – that’s why we call it the WEB, right? So all those lines… ick.

I find outlining very useful for IA, but boxes and arrows, not so much. Note that the different sizes and locations of the boxes don’t really mean anything – it’s just where/how I could fit them all in and have the lines not get covered up.

Here’s the Site Diagram:

(Isn’t it pretty? I think that’s why people use these things – they look much more impressive than an outline.)

Here’s the Site Outline:

(Now isn’t this much more clear?)

Original Site: http://www.bristleconecnps.org/

Project Site: http://bristleconecnps.naturallygeeky.net/wordpress/

Site Architecture:

• Clear branding – not about Bristlecones – about native plants of the eastern Sierra
• Consistent design and navigation
• 4-5 primary navigation links, with drop-downs showing secondary navigation to sub-sections:
  • Home
  • News
    • Newsletters
    • Events/Calendar
      • *Plant Sale
    • Announcements (blog?)
  • Resources
    • Plants
      • Species info
      • Gardening with natives
      • *Plant Sale
    • Links
    • Books
  • Getting Involved
    • Membership (Join)
    • Participate/Volunteer
      • Attend events
        • Photos of past events
      • Write an article
      • Join the board
      • Offer your services
      • *Plant Sale
  • About
    • CNPS
    • Bristlecone Chapter
      • Bristlecones
      • Mary Dedecker
      • Photos of past events
      • *Plant Sale

* The Plant Sale is the main fundraiser for the organization, so that’s why we link to the event from all the other pages.

Other Site Features:

• Site Search
• Calendar/Events that can be edited by event leaders or board and downloaded/subscribed to (like a Google Calendar)
• Newsletters in member area with sign in or open to public?
• Registration? Email list/newsletter generated by database? Auto-notification when newsletter is online? (or easy to do manually)

These are my thoughts so far – it will obviously evolve as I work with the Bristlecone CNPS board and also with WordPress. For example, I found a neat plug-in for an events calender, but it is only editable by someone with admin rights, so it may not work the way I’d like it to. I want any board member with editing rights to be able to add events. This is another example of how WordPress is being shoehorned into the role of a CMS, but may not actually be a perfect fit (yet).

Site Configuration

I began working on what will be my actual project for the site management and theming class – I set up a sub-domain on my wordpress site for it (bristleconecnps.naturallygeeky.net), and did a separate wordpress install. So far, that’s all I’ve done on that site, besides play with themes a bit and make a sticky post (from the original site’s home page text). Also, I installed wordpress in a folder instead of the root, so right now it only shows on bristleconecnps.naturallygeeky.net/wordpress/ but I hope to use the information from the Codex on putting WordPress in its own folder to make it work in the subdomain root as well.

I’ve been doing much more experimenting with site configuration on my root site, naturallygeeky.net. On there, I added an image to my header (I guess you could call it a logo – ha) and have done a little work on customizing my own child theme (of the parent theme, “Thematic”). Most of that is described in the “Labor Day Discoveries” post below, so I won’t repeat it here. But I did figure out how to make a sticky post – something we can even do with these WordPress.com sites! It’s under the Publish sidebar, under “Visibility” check the box for “Stick this post to the front page.” It took me a while to find that! So now there is a custom header, site name and tagline, and a “welcome message” sticky post on both my experimentation site and the project site.

Next I’ll be working on Information Architecture – I think it will be pretty basic – a home page plus 4 main content pages with sub-pages. I’m excited about all the features I can build into the site using WordPress plug-ins, so I’ll be playing around with those quite a bit, too. Coming soon – my project site plan!

WordPress: Tutorials and Resources for Designers and Developers

Every so often you come across a site that makes you wonder why you never found it before, and Andy Gongea’s GraphicRating site is one of those for me. His collection of favorite WordPress Tutorials and Resources is extremely helpful, as is his WordPress “Cheat Sheet.” I often gauge the quality of sites by who they link to, who they cite as authorities, and who they admire. Andy’s heros are my heros: Zeldman, Molly, Meyer, Shea, Moll, Croft, Snook are some he specifically names in his Ten Things a Web Designer Should Consider article.

In the Tutorials and Resources article, he links to quality tutorials from other designers I know and respect, like Chris Coyier’s CSS-Tricks and Ian Stewart’s ThemeShaper.com among many others. In other words, if I hadn’t already found a lot of these great sites, this one post would have set me up really nicely! I look forward, therefore, to exploring all the great tutorials and resources I haven’t yet discovered on my own that he lists. This one is definitely going in the sidebar!

A neat side benefit of getting into web design is the awesome international community out there. Andy is from Romania, and I also subscribe to designers’ blogs from Italy, the Czech Republic, Great Britain and Australia, to name a few off the top of my head. I’m always impressed when I realize the non-native English-speaking web designers have to learn all this code in another language than their own. I know in Europe, speaking several languages is more common, but it always impresses me. I’m grateful that English is the language of web design!

Random Discoveries on Labor Day

So I’ve got an icky cold, and pretty much just messed around with WordPress all day Monday and learned quite a few new tricks. The results of all of this experimentation can be seen on my hosted site now: naturallygeeky.net

I’ve been trying to remember all I learned to document it, because it was a case of searching for an answer to one thing, realizing I could do the first thing if I could figure out how to do a second thing, which led to a third thing, and so forth. Here’s a summary:

• Finally figured out how to add an RSS feed of student blogs, plus content, to a PAGE (not just the sidebar). I used Feedstitch as Elaine suggested, then learned about Shortcode, and found an RSS Shortcode Plug-in that finally worked! I had to edit the php, though, because it only showed the titles. I added <p><?php the_content(); ?></p> using the Plugin Editor. It works!
• It’s sort of ugly, though, as it outputs the RSS as a bulleted list – which lead me on another search, since I don’t think I can change that (the RSS comes from Feedstitch that way, not something the plug-in was doing). I figured I could do a page-specific CSS rule styling the bulleted list the way I want. To do that, I needed to give the page a unique ID. Unfortunately, the code snippets I tried created error messages, so I need to work on that, but I think it will happen!
• I figured out how to make a sticky post – easy but sort of hidden. Also inserted text with a widget on the index page.
• Glitches – the page navi plug-in adds a “1″ to the end of page totals, so I have “1 of 21″ instead of “1 of 2″ – I looked at the php but didn’t see anything glaringly obvious to make it do this, but my php skills are weak.
• I figured out how to make a PAGE that shows one category – I think that makes it work more like a website – it does the same thing as clicking on the category, but shows up on the menu like a static page. I’m thinking that will be helpful for events, for example, on the site I’m redesigning. To make this work, I learned to create and edit a template page. I uploaded it and now I can edit it through the themes editor. THIS is the one I had to add the content to – I’m getting the stuff I learned today mixed up! Here is the code I added to a template page that I renamed and edited, including the source where I found it:
  

  <?php //======================================================================
// code from http://wordpress.org/support/topic/246892?replies=5
// this is a test!
if (is_page()) {
$cat=get_cat_ID($post->post_title); //use page title to get a category ID
$posts = get_posts ("cat=$cat&showposts=5");
if ($posts) {
foreach ($posts as $post):
setup_postdata($post); ?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php endforeach;
}
}
?>
//======================================================================
// end category

  I changed the tags to h2’s and added the content.

• Another Glitch: I have random </p> showing up when I view source, which are causing validation errors, but they are not in my code, and I can’t see any php code that is adding them. It’s not on every page, but it is on all the posts I have Lorem Ipsum text on (it also added <br /> tags after form button options – weird).
• I played with the css a little more – added some hover styles to the menu, for example. I also added a home page (with an edit to the php of the functions file), and made two sub-pages which show up as drop downs on the menu – a nice feature of my parent theme!

I’m just trundling around semi-blindly, bumping into solutions, finding more problems to solve along the way, learning so much that I’m having a hard time keeping it all straight (as you can tell from the above list)!

It’s good, though – I haven’t done too much damage, at least