Facebook Like Button on Websites for Small Biz

By Leora Wenger, August 17, 2010 12:35 pm

Like button for FacebookI just added the Facebook Like button to each of the posts on Websites for Small Biz.

How did I do that? Easy, if you have a single.php file in your theme. Use the code in this WP Recipes post. I added it just below
<div class=“postmetadata”>
- code will vary from theme to theme.

Why the Like button? Folks can Like your post with one click. Easy exposure. No need to comment, just click.

Thanks to Robert Kopacz for his encouragement (who also has the Like button on his Madison, NJ video posts).

Has anyone tried out the new Tweet button from Twitter? I clicked on it on one post and find it created a funny looking shortened url. But that was just one post. Just did another one – it worked fine! Update: I just added the new Tweet button from Twitter and deactivated the BackTweet button.

Popularity: 4% [?]

Learn about Child Themes

By Leora Wenger, August 8, 2010 8:51 pm

What is a Child Theme?

mother leading to child

A child theme is a way to make changes to a WordPress theme without making changes to the main theme, the parent theme.

Why Create a Child Theme?

Whenever the theme is updated, if you apply the updates, all your changes will be lost. You will have to re-apply theme to the files. Instead of re-applying the changes every time there’s an update, it’s simpler to keep the changes in what’s known as a child theme.

How Do I Create a Child Theme?

You create a folder inside the themes directory and give it a name similar to the parent theme. For example, I decided to name the child theme for the theme I use for this blog, Panorama, “pandaughter.” Then, at the very least, you need to create a style.css with certain code at the top. See this post on the Codex to get the proper code for your child style.css:

Codex: Child Themes

Finally, you need to activate the child theme by going in the Admin menu to Appearance and selected your child theme from the theme choices.

Can I Do More Than Change Styles?

You can create (or re-create) any of the files in your parent theme in your child theme, such as functions.php, header.php, and sidebar.php. If it doesn’t exist in the parent theme, you can still create it in the child theme, such as category-3.php, for example. You can get quite sophisticated with your theme manipulation by unhooking functions and then recreating them in functions.php. You will find recreating the header.php will take you far in getting your header specific to your site. Then, when a theme update comes along, you won’t have to remember and redo all of your changes.

Are Some Themes Easier Parents than Others?

Certainly. You might have a very complicated theme with lots of coding, and it may be difficult to create a child easily. Conversely, some themes lend themselves to creating children. Here are a few examples:

Thematic
Twenty Ten Default Theme
Hybrid
Carrington

For more posts on child themes, visit:

Note: the mother and daughter in the illustration are from this painting by Robert Walker Mac Beth.

Popularity: 5% [?]

Installing New Default Theme for WordPress 3.0

By Leora Wenger, July 15, 2010 7:05 am

WordPress 3.0 comes with a new default theme known as Twenty Ten. I was eager to try it out on a WordPress site.

Why did I choose Highland Park Environmental News for the new default theme? I don’t like the old theme, don’t have updates for it, and never cared for the colors. Here’s the old theme:
screen shot of hpenv old theme
As this news site doesn’t get updated as often as one might like, it is a good test site for a new theme.

I want a theme that is easy to update. So I wondered – menus, header – will they be easy to tweak as well?

Here’s what I did:
1- I took a screenshot of old theme. I also copied the header image to my hard drive.

FYI, the photograph of the running deer was taken by Arnold Clayton Henderson, who spent a lot of time on environmental issues in Highland Park, including providing most of the content for the website. He has since moved to California, and we miss him!

2 – I looked at widgets. I must be using all hard-coded widgets – there is nothing listed. But you might be, so copy them down.
3 – I clicked on Themes, clicked on the Twenty Ten theme, previewed then activated the theme.
4 – The header was ready on my hard drive.
appearance Twenty Ten theme WordPress
The menu on the left has a header item now – I just clicked on that and added the header.
5 – What did I want in the sidebar? Since I had done a screenshot, I could look at it to recall all the details. Or I could reactivate the old theme and look in that manner.
6 – Creating menu: Why doesn’t it appear? Need to save something somewhere.
7 – I clicked Save Menu and the new menu appeared. Need to click Save Menu each time you add a new item to the menu.
8 – Sidebar – Widgets. All I had to do was click, drag, save. Easy. Looks like lots of options for widgets are available – I just drag those to the sidebars, as I do in other themes.

The only issue I had was the font for the main content showed up as a serif font, and I wanted sans serif. So I went into style.css (you can do it from the Adminstrative back end, but better yet, do it on a copy on your hard drive and upload the changes while saving the original, just in case) and moved body down to the sans serif section.

I also found this post called WordPress Twenty-Ten theme modifications with even more discussion about tweaking the CSS for Twenty Ten. You might want to refer to this post, for example, if you are unhappy with the spacing in your blog.

I asked if anyone else has used Twenty Ten on Twitter, and Mark Headrick showed me his blog in Twenty Ten. Note how he changed his menu color to blue – you don’t have to stick with the standard black if you can tweak a little CSS.

I noticed my good friend Michelle of Rambling Woods is using Twenty Ten on her nature blog, because one of the commentator said, I like how you keep changing the background. I looked “under the hood” (i.e., in the source code), and I saw this:

<link rel=”stylesheet” type=”text/css” media=”all” href=”http://s0.wp.com/wp-content/themes/pub/twentyten/style.css?m=1276189752g” />

See that twentyten directory in the path name? That means she’s using our theme.

Here’s the screenshot:
rambling woods blog
This is a smart approach for Michelle, because she can easily change her header or her background. Also, she made use of the menu in a creative way, making it much longer than just one line of links.

Finally, here’s how my new Twenty Ten themed blog now looks:
hpenv new look
The background is still a dull gray, so if you have any ingenious ideas for what to use as a background that’s not too distracting, feel free to let me know.

More on the new Twenty Ten theme:

Popularity: 10% [?]

When to Choose Drupal over WordPress

By Leora Wenger, June 16, 2010 6:39 pm

drupal dressed upFor most of you, I will suggest you use WordPress. End of story. It is easy to use, easy to optimize for search engines, easy to install and to upgrade. Drupal is complex and typically needs a web developer to set it up (will this change with Drupal 7? Wait and see).

So why should some companies or organizations go with Drupal? I’m sure Drupal experts will have more answers than these, but at present I have three:

  1. Dates: Dates and its various formats are built into the Drupal core. I did a calendar for WordPress, and the only place dates are set up as dates is in the scheduling and publishing function, so at first I used that for the calendar. Later we switched to using custom fields, which I would suggest with WordPress. Will WordPress 3.0 and its new content type functionality help make dates easier to use in WordPress?
  2. Fine tuned Roles and Permissions: Also built into Drupal is the capability to put users in certain roles and fine tune the permissions allowed for each user. I am currently using a Drupal module called Taxonomy Access Control to do the fine tuning of permissions.
  3. Views: once you learn how to use Views in Drupal, you can display your data in multiple ways and locations on your site.

If you have worked with both WordPress and Drupal, what do you see as the strengths of these two systems? Weaknesses? Looking forward as both grow and continue to compete with each other.

Some links that discuss WordPress and Drupal:

(Oh, and that’s not the *real* Drupal icon on the upper right of this post – that’s my dressed up version).

Popularity: 14% [?]

Three Twitter Styles: Smart, Friendly and Responsive

By Leora Wenger, June 8, 2010 6:36 am

If you are new to Twitter or you find it difficult to connect with others, try one of these three approaches (or combine all three):

SMART

Show others that you know your stuff about a technical topic. You don’t have to write the post yourself; in fact, you can link to a post and give credit to the person who wrote the post, showing that you are both smart and friendly.

Examples:
seo_copy tweets

media_modus tweets

Warning: don’t just tweet links. Every now and then, add something personal to your tweets, such as a short comment about the link. Or mention a favorite hobby that you do when you are not working.

FRIENDLY

Say hello to others who are online. Surprise! They will probably say hello back to you. If you add a personal note, all the better.

Example:
On Friday morning, I said hello to four Tweeps who I saw were online. Guess what? All four said hello back. Here are two of the responses:
realestatechick responds to Leora

njmovingguy

Warning: you don’t want to overstay your welcome. Not everyone has all day to sit around and chat (most don’t). And if someone doesn’t respond, try someone else.

RESPONSIVE

If you see someone tweeting how do you do X or asking a question or talking about a problem, respond. You don’t have to know the answer. If you have some ideas for the person, great, but you can also pass on the question by retweeting it to your followers.

Example:
Here’s an example where webpc responds to Eva_Abreu about a Skype question:
webpc responds to eva abreu on Twitter

Warning: Using any or all of these Twitter styles could be addictive.

So, how do *you* connect on Twitter?
webpc, njmovingguy, seocopy, realestatechick

Popularity: 4% [?]

Behind the Scenes of a Website Upgrade

By Leora Wenger, May 26, 2010 3:19 pm

icons - drupal, wordpress, joomla and checkmarkI see posts and workshops where people say, learn how to do your website yourself. I am all for someone learning how to code, learning HTML, learning CSS and SEO. However, if you think all this is simple, then you haven’t learned much. I’ve discovered that most difficult website challenges happen around the time of upgrades. This post will end with some common precautionary steps one should take in upgrading a CMS (content management system) software using one of the big three, WordPress, Joomla! or Drupal. I also note a few tales specific to those systems.

Recently, we upgraded a site at Rutgers from Joomla! 1.0 to Joomla! 1.5. When an upgrade this major is done, first it is done on a “play” copy of the site, called a sandbox. That way initial problems are discovered and fixed before going live. I encouraged my clients who use WordPress to do the same: do the initial upgrade on a copy of the site. Although at first I found few problems, as I went through our newly upgraded site, I noticed that the global settings had been changed. So there is a warning specific to Joomla!: check the global settings. We also had to change several modules related to playing videos, a photo gallery, and a slideshow. So I had to tweak specific files to get those to work again.

Some upgrades are small, and some are big. Last year I started working on a site that was done in Drupal 5. I discovered it was so much work to change that particular site (because a lot had been tweaked and tailored to the site) to Drupal 6 that the client and I decided it was a fine time to switch the entire site to WordPress. An upgrade from Drupal 6.2 to Drupal 6.3, on the other hand, would not have nearly been as dramatic.

Sometimes you can use upgrade time as a time to reassess how your site is done. Soon WordPress will release WordPress 3.0. You can read this post on Six Revisions to learn more about the new features. One of the new features is a new default theme. I am strongly considering using the new default theme for one of my sites instead of the current one, as the new default theme looks promising and has flexible options.

Here are a few basics steps in upgrading (can you think of others? feel free to say so in the comments):

  1. Make a complete copy of your site and upgrade that one first. Look at it carefully to see what might have stopped working and what may need fixing.
  2. Back up both your database AND your theme files. If for some reason your site doesn’t work after upgrading, try the default theme. Does that one work? Then something in your theme files needs fixing. Or consider switching themes. If you have tweaked your theme a lot, you may find you need to rework the theme to get the tweaks to work again.
  3. Check the pages, the posts, the videos, photo galleries, the forms, and any other specialized feature you have added to your site.
  4. Sometimes a plugin that worked before will not work with a new upgrade. Remember that you can delete a plugin by renaming the plugin folder (or deleted the plugin files) so it doesn’t get picked up by your CMS.
  5. Permissions: I find this is more of an issue with Drupal or Joomla than with WordPress. Make sure the people that need to see a page can see it, and those who should not cannot.
  6. Conflicting plugins: You may proceed to use your site for a while and then discover something that used to work no longer works. In one case with WordPress, for example, we had loaded two plugins that conflicted, so a page no longer sorted properly. We deleted the less useful plugin, and the problem was fixed.

Finally, if something does go wrong that you cannot fix, be aware that someone else may have had the problem. Search the web for a solution or ask on Twitter. If you don’t find an answer that way, try asking the question in a forum.

Do you have any upgrade tales?

Popularity: 3% [?]

5 Busy Websites – Do These Sites Work For You?

By Leora Wenger, May 12, 2010 10:30 am

How can you tie together a lot of elements into one page? In this post I will explore some sites that have busy designs.

busy websitesHere are some ways a site might make a busy design “work”:
Element Schemes – the design might use only certain colors or might repeat small, intricate details over and over again.

Expectations – if you repetitively post the same information in the same spot on the page, readers will expect to find information in that spot. Changing around where information is placed can be a bit like when a supermarket rearranges the aisles – the customer may have a hard time finding what was once familiar.

Repeated Shapes – similar to element schemes like repeated colors and design details, one can have a lot of the same shape (rectangles, squares, circles).

One Large Element – even if there are lots of details on a page, often one large, emphasized element can draw the design together.

Page Divisions – simple page divisions, often into three, is another way to unify a design.

The examples:

Rutgers University Home Page

Rutgers University
Large universities have much information to present, and Rutgers is no exception. Rutgers has the red of Rutgers in the banner and the emblem below. The top section under the banner presents Rutgers’ highlights, and the white section below has many details. To my eye, the page division is a simple three parts. The Rutgers site gets updated often; however, when one returns, the user sees what is going as expected: news is on the right, highlights in that block right below the banner. See Rutgers University.

Tate Kids

Tate Kids
The funky design of this page makes it quite busy; however, in terms of finding information, I see three navigation bars at top and four consistent rectangular shapes in the center. Even as the designer allows you to change the background, those main elements remain. The color scheme matches the funky design; you won’t find earth tones on this site, for example. See Tate Kids.

Amazon.com

amazon.com
What a busy site! Amazon hopefully will keep its information in expected places, unlike some supermarkets. The color scheme and the repeated shapes of the books help tie the page together. See Amazon.com.

Via Rail Canada

via rail canada
Via Rail Canada, a new site done in Drupal, uses the photo of a woman serving the public in a railway car as a way to draw the viewer into the page. Repeated colors include the red of the Canadian flag, yellow of the logo, and the beige of the cushioned train seats. The page is divided into two, with one long banner at top and boxes with information below. See Via Rail Canada.

Bob Reasso Soccer School

Bob Reasso Soccer School
When the Reassos asked me to put *all* of Bob’s biography on the home page, I was hesitant. Wouldn’t that make it too busy? But with the idea of highlighting one element (Bob Reasso) and using the red color of the logo along with the grassy green of a soccer field, the design ties together. See Bob Reasso Soccer School.

Do you have an example of a busy site that works? Or perhaps a busy site that could use a better design?

Popularity: 13% [?]

Do You Have Social Media Icons? – Poll

By Leora Wenger, May 4, 2010 5:31 pm

social media iconsIn an effort to explore the question of “Do you have social media icons with links on your website or blog?” I set up this poll. I am hoping we can all gain from the information.

The poll will be open for one week. If you could also answer the question about your background, that would helpful as well.

Do you have any of these social media icons on your blog or website?

  • Twitter (to a Twitter account) (100%, 16 Votes)
  • Facebook Fan/Like Page (link to page) (56%, 9 Votes)
  • Facebook Profile Page (links to person) (50%, 8 Votes)
  • LinkedIn (38%, 6 Votes)
  • Tweet Meme Button (or other Tweet icon) (31%, 5 Votes)
  • Delicious (25%, 4 Votes)
  • StumbleUpon (25%, 4 Votes)
  • Facebook Like Button (Like a post) (13%, 2 Votes)
  • FriendFeed (6%, 1 Votes)

Total Voters: 16

Loading ... Loading ...

Please tell us about yourself:

  • I am a small business owner or I work for small business. (61%, 11 Votes)
  • I have a personal blog. (17%, 3 Votes)
  • I have a personal blog that also makes some money. (17%, 3 Votes)
  • I am a consultant. (6%, 1 Votes)
  • I manage or work for a non-profit organization. (0%, 0 Votes)
  • I am a student. (0%, 0 Votes)
  • I am a professional blogger. (0%, 0 Votes)
  • Other (feel free to explain in the comments, but not necessary). (-1%, 0 Votes)

Total Voters: 18

Loading ... Loading ...

Upcoming: a slideshow of social media icons on various websites or blogs. Feel free to submit a link to your site, if you wish me to include it in the slideshow. Also, if you have a linked icon to social media not included in this poll, please mention it in your comments. I didn’t want the poll to get too long.

For those wanting more explanation: A social media icon is an image that represents a social media site, with Facebook and Twitter being the two most popular. Users are encouraged to click on them to connect and to gain more information about a person, business or organization. These two polls were created with a plugin called WP-Polls.

Popularity: 7% [?]

Blog Interviews – How To

By Leora Wenger, April 19, 2010 12:24 pm

Shari Weiss, Raritan Air logo, Leora Wenger, wine in a kitchenOne way of adding conversation and ideas of other knowledgeable people to your business blog is by conducting blog interviews.

Is there someone you know who is 1) good at writing or talking 2) knowledgeable about your business or organization who can add valuable information to your blog? Do you have a client or employee or affiliate who might add valuable information about your business? Perhaps someone who runs a similar business or organization in a different geographical location might be able to present new approaches or ideas.

Locate Person to Interview

Whom to interview? People who already have a blog are good choices. They know how to write and express themselves verbally, so this will help make a coherent interview. Someone you know professionally who can educate your readers in a succinct manner might also be a good option. If you find a blogger online with whom you have had no previous connection but might want to interview, leave a few comments on their posts to start an interaction and see if this blogger might be a good person to ask. I have a good relationship with my heating – air conditioning – plumbing company, and I was pleased to present an interview with Raritan Air Water Power Service as a way to learn about a small business, how the business uses social media, deals with difficult customers and says thank you to clients.

Ask a Few Questions

What to ask? I usually come up with about 4 to 6 questions for the person I am interviewing and suggest the interviewee may skip any they choose and create any new ones. For question examples, read this interview with me by Shari Weiss. Here is one question you can ask almost any person you interview online: “When did you get started with what you want to call social media, and why did you start?

You can ask questions that are specific to the person that you are interviewing as well as general questions that might be useful for almost anyone. Another question that Shari asked me: “What are the top lessons you have learned about life and/or business since you began your Life on the Net?” (Read my answers, including Put it in writing and Listen to your client.) How would you answer that question? How might someone else? We could probably come up with some great business and life advice if we asked 100 knowledgeable and articulate people that question.

Present the Interview

How can one make the interview easy to read? Going back to the example of Shari’s interview, note how she highlighted certain parts of the interview:

The point is, whatever your handicap is, there is an employer or client who is NOT put off by your handicap.

Shari took a list of my business – life learning lessons and organized them in an easy to read manner:
What are the top lessons you have learned about life and/or business since you began your Life on the Net?

You can organize the information you get from the client and edit any parts that you might consider a bit too wordy for a blog post. Remember, attentions are short on the web. Grab your readers attention – you don’t get paid by the word (unlike Charles Dickens).

Show Relevant Images and Media

What kinds of images might enhance an interview? If you are interviewing a person with visual skills, show off their work – see my interview with Elke Reva Sudin. If they do well as speakers, perhaps a video or audio presentation would best show what they have to say. For examples of podcasts as interviews, visit Bella Buzz by Desiree Scales. Hannah Katsman regularly interviews cooks on her Cooking Manager blog – some show photos in the kitchen, working away at a culinary creation. For my interview with Hannah I sent her a photo of my family at a winery, raising our wine glasses.

On the Raritan Air interview, I used their logo and business information:
Raritan Air Water Power Service
Now that adds color and interest to the many words of the interview.

Encourage Comments

How can one get readers to respond? Say so! Ask for responses to the interview at the end of the post. Announce the post on Facebook, LinkedIn, Twitter and other social media networks to give others the opportunity to read the post and give feedback. If you are interviewing someone who is not used to blogs, be sure to let them know that readers may want feedback, and there may be an opportunity to add further to the interview by responding to comments.

Have you ever conducted a blog interview? Have you ever been interviewed on a blog? Feel free to add a link to the interview in the comments if you feel it will add to the discussion.

Popularity: 11% [?]

Links to tutorials on HTML and CSS

By Leora Wenger, April 18, 2010 6:53 am

I put together this page of HTML and CSS tutorials a few years ago when I conducted a teen webmaster class at our library. The tutorials are still useful for those who would like to learn these essential web building tools. Click the image below to get to the page:

css and html links

Feel free to suggest more HTML or CSS links. If you are serious about learning to build websites, PHP, jQuery and how to set up and tweak any of the big three content management systems (WordPress, Drupal or Joomla!) are also key skills to master.

css html

Related Posts:

Popularity: 2% [?]