Blog 2 | Beyond Paper

Tables That You Can Sort and Search

Tables, or grids, are a good way to present data on websites. I really like jQuery DataTables for handling tables of information. In the demo below you can sort by column or search the entire grid.

Responsive Newspaper-Style Columns are Easy with CSS

Newspaper or magazine-style columns are a good way to break up large blocks of text, especially if images are included. With CSS, responsive columns are really easy to achieve. The following demo shows two blocks of columns, one with a title that spans all of the columns, and one with an image. Here is the CSS I used (this was done pretty on the fly and some of the code could be condensed a little better in a production environment). If you want to play with the original and see how it reacts to browser widths just click here.

Newspaper or magazine-style columns are a good way to break up large blocks of text, especially if images are included. With CSS, responsive columns are really easy to achieve.

The following demo shows two blocks of columns, one with a title that spans all of the columns, and one with an image. Here is the CSS I used (this was done pretty on the fly and some of the code could be condensed a little better in a production environment).

article{ 
	width: 100%;
	height: auto;
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -webkit-column-gap: 5%; /* Chrome, Safari, Opera */
    -moz-column-gap: 5%; /* Firefox */
    column-gap: 5%px;

    -webkit-column-rule: 1px outset #ccc; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px outset #ccc; /* Firefox */
    column-rule: 1px outset #ccc;	
	margin: 0 auto;
	text-align:justify;
}
figure{
    column-span: none;
    -webkit-column-span: none;
    -moz-column-span: none;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	text-align:center;
}
img.aa{
	height: 150px;
	width: auto;
}

article h1{
	column-span: all;
    -webkit-column-span: all;
    -moz-column-spam: all;
	margin: 0;
}


.newspaper
{
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
	text-align:justify;
}

.newspaper h1, .newspaper img.aa {
    column-span: all;
    -webkit-column-span: all;
    -moz-column-span: all;
}
.newspaper p {
    -webkit-margin-before: 0;
}
@media only screen and (max-width: 840px) {
	.newspaper {
		-moz-column-count:2; /* Firefox */
		-webkit-column-count:2; /* Safari and Chrome */
		column-count:2;
	}
	article{ 
		width: 100%;
		height: auto;
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count: 2;
	
		-webkit-column-gap: 5%; /* Chrome, Safari, Opera */
		-moz-column-gap: 5%; /* Firefox */
		column-gap: 5%;
	
		-webkit-column-rule: 1px outset #ccc; /* Chrome, Safari, Opera */
		-moz-column-rule: 1px outset #ccc; /* Firefox */
		column-rule: 1px outset #ccc;	
		margin: 0 auto;
		text-align:justify;
	}
	
}
@media only screen and (max-width: 700px) {
	.newspaper {
		-moz-column-count:1; /* Firefox */
		-webkit-column-count:1; /* Safari and Chrome */
		column-count:1;
	}
	article{ 
		width: 100%;
		height: auto;
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-moz-column-count: 1; /* Firefox */
		column-count: 1;
	
		-webkit-column-gap: 5%; /* Chrome, Safari, Opera */
		-moz-column-gap: 5%; /* Firefox */
		column-gap: 5%;
	
		-webkit-column-rule: 1px outset #ccc; /* Chrome, Safari, Opera */
		-moz-column-rule: 1px outset #ccc; /* Firefox */
		column-rule: 1px outset #ccc;	
		margin: 0 auto;
		text-align:justify;
	}
	
}

If you want to play with the original and see how it reacts to browser widths just click here.

Use Tooltips to Add Context

Tooltips are boxes that pop up when a user hovers (or clicks) on a link. They can be used to add context to an external link – for example to advise that the link leads off-site or will play a video or sound. They are also useful as a substitute for footnotes in longer articles. Use them to cite a source in a less obtrusive way, or add a comment to a word or phrase. The following demo shows a lightweight tooltip plugin that is easy to use and reader-friendly. I especially like them in article where a lot of acronyms or foreign words are found – it is easy to hover over the link to display the expanded meaning of the word.

Updating Inspiration Posts Plus New Additions

Recently I’ve been going over beyond-paper.com, making sure links are working and tutorials are current. After several server moves, a switch to https and time, I found quite a few of my Inspiration posts were out of date. Inspiration posts are neat little ideas for websites, each with a working demo, so it is important to get them up to date. A few were impossible because some information providers (Facebook and Twitter, I’m looking at you) have removed or substantially changed how data is shared. I noted on the post if the demo is not working. For the posts where the demos are working, I embedded the demos in iframes so that you can interact with the demo right on the page. In going through the demos, I have about 50 that I have never even posted about! I’m going to go through them one-by-one and get them all posted over the next 3 months. Have an inspiration you want me to take a look at? Contact me at diane@beyond-paper.com.

Review: Amazon Echo Dot (2nd Gen) and Alexa

Star Trek and science fiction prepared me as a child for computers with voice activation. Who wouldn’t like to get information my asking a question? How about manage a connected home with just a few phrases? Amazon’s voice assistant Alexa and its hardware sidekick are inching closer to that reality. I installed Dot only five days ago, but have already experienced the highs of the coolness factor as well as the lows of limitations. There is a lot to like about it, but it definitely is a work in progress. Installation The Echo Dot is hockey-puck sized and comes packaged with a usb cable and plugin for power and a cable to connect it to speakers. I placed it on a side table next to where we sit in the living room. After plugging it into power you will need to download the Alexa mobile app. Setup via the app is a simple step-by-step process. It took about half an hour total for me from the time I opened the box through integrating my Philips Hue lights, Google Calendar and Amazon Prime Account. The packaging includes a booklet with commands to try such as “Alexa, why is the sky blue?”, “Alexa, […]

”Star Trek and science fiction prepared me as a child for computers with voice activation. Who wouldn’t like to get information my asking a question? How about manage a connected home with just a few phrases? Amazon’s voice assistant Alexa and its hardware sidekick are inching closer to that reality.

I installed Dot only five days ago, but have already experienced the highs of the coolness factor as well as the lows of limitations. There is a lot to like about it, but it definitely is a work in progress.

Installation

The Echo Dot is hockey-puck sized and comes packaged with a usb cable and plugin for power and a cable to connect it to speakers. I placed it on a side table next to where we sit in the living room. After plugging it into power you will need to download the Alexa mobile app. Setup via the app is a simple step-by-step process. It took about half an hour total for me from the time I opened the box through integrating my Philips Hue lights, Google Calendar and Amazon Prime Account.

The packaging includes a booklet with commands to try such as “Alexa, why is the sky blue?”, “Alexa, how many ounces are in a cup?”, and “Alexa, what is on my calendar tomorrow?”. Trying these out serves as a sort of training or tutorial session.

My Setup

Besides my Philips Hue lights, I also connected my Harmony Élite remote. It was thrilling to say “Alexa, turn on the living room lights” and have the lights go on! Even better was “Alexa, watch Netflix” and “Alexa, turn off TV”. I also connected my setup to IFTTT to create additional commands such as “Alexa, we are going to bed” which turns off the TV and living room lights and turns on the bedroom lights.

The Pros

Ease of use is the main thing Echo Dot and Alexa have going for it. My husband got the hang of it right away and in a matter of hours it became natural to ask Alexa to do things. Our favorite commands center around music: “Alexa, play Green Day’s new album”, “Alexa, play Handel’s Water Music”.

While the Dot’s speaker is not the best, it is really easy to connect to bluetooth. My soundbar has a bluetooth in feature, so I just turn the source to “BT” and say “Alexa, connect to speaker” and it connects up. When finished I can say “Alexa, disconnect from speaker” and the bluetooth is terminated. We have a Bose bluetooth speaker somewhere which I am going to set up so that the Dot is always connected to it, rather than changing my soundbar source all the time.

Another cool feature is Alexa’s (limited, see below) integration with Amazon sources such as Kindle and Audible. While I haven’t tried the Kindle feature, saying “Alexa, play Audible” will start up my current audio book and play it. “Alexa, pause” and “Alexa, stop” are handy when I’m knitting and don’t have hands free. Listening to music and you don’t like the current song? Just say “Alexa, skip”.

The timer and alarm features are also handy (“Alexa, set alarm for 7am” or “Alexa, set timer for 30 minutes”) as is “Alexa, add milk to grocery list” which adds the item to my ToDoist grocery list. The timer and grocery features are reasons in themselves to have an Echo Dot in the kitchen, but there are skills you can add to look up recipes.

Another feature is the Flash Briefing. Using the mobile app you set up what kind of information (news, weather, etc) you want included in your briefing. I have NPR selected which plays the actual NPR headlines.

Finally, getting your calendar and adding things to your calendar are super easy: “Alexa, what is on my calendar tomorrow?” “Add family brunch to my calendar for Sunday at 10AM.” I include my husband’s Google calendar on my calendar (we use Google Apps), so appointments for both of us are included, which I like. There is a way to have multiple accounts on Alexa – you just have to remember to switch between them.

The Cons

The biggest problem is with Alexa – she is dumb, even when asking questions about Amazon products. “Alexa, how much is a Kindle Fire” gets a response of “I don’t know that”, which is just stupid. You would think tight integration with the Amazon store would be a given.

Alexa says she uses the Bing search engine, but does terribly at searching. “Alexa, what time is the Seahawks game” and “Alexa, what is the Seahawks game score” worked, but “Alexa, what channel is the Seahawks game on” did not work. My android phone’s Google assistant answered it in a heartbeat. Other requests that didn’t work included:

“What is three quarters of a tablespoon plus two thirds of a tablespoon?” (I was increasing a recipe)
“Are the frets on a guitar based on the square root of two?”
“Who does Gene Belcher’s voice on Bob’s Burgers?”
“Who are the members of Green Day?”
“Who played Rusty in Ocean’s Eleven?”

However, questions that worked included:

“When does daylight savings time end?”
“What is two cups in litres?”
“Where is Buenos Aires?”
“How old is Donald Trump?”
“How much wood can a woodchuck chuck?”

Keep in mind there are skills which you can add to Alexa. Skills are little programs that add functionality. I just added the Cinemate skill and asked “Alexa, ask movie guide who played Rusty in Ocean’s Eleven” which gave me a list of the cast members of Ocean’s Eleven. Two skills, WatchAid and TV Shows, adds some TV guide features. Both knew when the next episode of Big Bang Theory is on, but only TV Shows knew when Expedition Unknown (on Travel channel) airs next.

The problem with using skills is that you need to remember a specific way to ask. You can’t just ask “Alexa, when is Expedition Unknown on?” Instead you have to use the skill’s special terminology:

TV Shows skill: “Alexa, ask tv show when Expedition Unknown is on”
WatchAid skill: “Alexa, ask watchaid when Expedition Unknow is on”
Cinemate skill: “Alexa, ask movie guide who played Rusty in Ocean’s Eleven.”

Conclusion

The cons are more annoyances than anything else and I suspect that they will go away at some point. As a voice controller for home automation, the Echo Dot is currently more than adequate and I look forward to further integration as we add more smart home devices such as a thermostat, light switches, etc. At $50, give or take, it is worthwhile to pick one up just to play with it. I plan on adding one in the bedroom next month.

Subtle (or not so) Background Animation

Recently my computer updated and while the updates were running a message appeared on the screen with a blue background. The background kind of pulsed from light to dark blue and looked really neat. It got me thinking how to make something similar for a website. As an experiment, I have two demos. The first is for the body tag and affects the entire background and fades smoothly between six different colors. Here is the CSS that sets the colors: The effect is achieved by using @keyframes. In short, keyframes are a way to specify CSS styles which the browser will scroll through, doing each change in order with blending from one change to the other. I used percentages here to specify when the change will happen – so each color lasts 20% of the total animation running time. Now we have to tell the browser which element to apply this animation to. See the “rainbow” right after @-webkit-keyframes (and @keyframes)? That is the name for this animation. We will use it to assign it to the body tag: Here we tell the browser to use the “rainbow” animation, make the whole animation last 15 seconds and keep looping around. The image […]

Recently my computer updated and while the updates were running a message appeared on the screen with a blue background. The background kind of pulsed from light to dark blue and looked really neat. It got me thinking how to make something similar for a website.

As an experiment, I have two demos. The first is for the body tag and affects the entire background and fades smoothly between six different colors. Here is the CSS that sets the colors:

@-webkit-keyframes rainbow {
  0% { background: #FFABAB; }
  20% { background: #FFDAAB; }
  40% { background: #DDFFAB; }
  60% { background: #ABE4FF; }
  80% { background: #D9ABFF; }
  100% { background: #FFABAB; }
}
@keyframes rainbow {
  0% { background: #FFABAB; }
  20% { background: #FFDAAB; }
  40% { background: #DDFFAB; }
  60% { background: #ABE4FF; }
  80% { background: #D9ABFF; }
  100% { background: #FFABAB; }
}

The effect is achieved by using @keyframes. In short, keyframes are a way to specify CSS styles which the browser will scroll through, doing each change in order with blending from one change to the other. I used percentages here to specify when the change will happen – so each color lasts 20% of the total animation running time.

Now we have to tell the browser which element to apply this animation to. See the “rainbow” right after @-webkit-keyframes (and @keyframes)? That is the name for this animation. We will use it to assign it to the body tag:

body {
  -webkit-animation: rainbow 15s infinite ;
}

Here we tell the browser to use the “rainbow” animation, make the whole animation last 15 seconds and keep looping around.

The image animation is done similarly.

@-webkit-keyframes images {
  0% { background-image: url(Colored_Pen_Background.JPG); }
  20% { background-image: url(IMG0.JPG); }
  40% { background-image: url(IMG1.jpg); }
  60% { background-image: url(IMG5.jpg); }
  80% { background-image: url(IMG8.JPG); }
  100% { background-image: url(IMG9.JPG); }
}
@keyframes images {
  0% { background-image: url(Colored_Pen_Background.JPG); }
  20% { background-image: url(IMG0.JPG); }
  40% { background-image: url(IMG1.jpg); }
  60% { background-image: url(IMG5.jpg); }
  80% { background-image: url(IMG8.JPG); }
  100% { background-image: url(IMG9.JPG); }
}

Notice that I called this animation “images”. Here is where I assign it to div with a class of “imagechanger”.

div.imagechanger{
	background-image: url(Colored_Pen_Background.JPG);
	height: 400px;
	width: 500px;
	background-size: contain;
	background-repeat: no-repeat;
 	-webkit-animation: images 15s infinite;
  	margin: auto;
	color: white;
}

In my demo the pictures are not the same size, which is why the height keeps changing. In real use as a background you would want the images sized appropriately and probably use “cover” instead of “contain” to make sure it spreads to fill the element. I also set a starting background-image so that there is an image already there when the page loads.

There is one more fix that needs doing when using images; you need to preload the images or the first time they appear there is a pause, the animation jumps, and it looks awkward. So I just add the images in a hidden div:

<div id="preload">
   <img src="Colored_Pen_Background.JPG" width="1" height="1" alt="Image 01" />
   <img src="IMG0.JPG" width="1" height="1" alt="Image 02" />
   <img src="IMG5.jpg" width="1" height="1" alt="Image 03" />
   <img src="IMG8.JPG" width="1" height="1" alt="Image 03" />
   <img src="IMG9.JPG" width="1" height="1" alt="Image 03" />
   <img src="IMG1.jpg" width="1" height="1" alt="Image 03" />
</div>

div#preload { display: none; }

If you look at Demo 2, you can see the images as a whole page background. Again, the images are not sized correctly, but you get the idea. I used some different animations settings, which you can find at W3Schools. Here is the code:

@-webkit-keyframes images {
  0% { background-image: url(Colored_Pen_Background.JPG); }
  20% { background-image: url(IMG0.JPG); }
  40% { background-image: url(IMG1.jpg); }
  60% { background-image: url(IMG5.jpg); }
  80% { background-image: url(IMG8.JPG); }
  100% { background-image: url(IMG9.JPG); }
}
@keyframes images {
  0% { background-image: url(Colored_Pen_Background.JPG); }
  20% { background-image: url(IMG0.JPG); }
  40% { background-image: url(IMG1.jpg); }
  60% { background-image: url(IMG5.jpg); }
  80% { background-image: url(IMG8.JPG); }
  100% { background-image: url(IMG9.JPG); }
}

body{
	/*background-image: url(Colored_Pen_Background.JPG);*/
	background-size: cover;
	background-repeat: no-repeat;
 	-webkit-animation: images 30s infinite alternate;
	animation-timing-function: ease-in;
}

.imagechanger {
	width: 80%;
	margin: auto;
	min-height: 400px;
	background-color: #FCF7F7;
	border-radius: 25px;
	padding: 20px;
}
div#preload { display: none; }

The Danger of Free WordPress Themes

I was recently asked to assist a new client in restoring their hacked website. The client is a small alternative medicine practice with a self-hosted WordPress installation that seemed to suddenly have developed a mind of its own. Banner ads appeared without warning, content was replaced by political rants, and sometimes the site wouldn’t even load. It was a nightmare for the client. A quick review of the files showed that the culprit was two-fold. First, the WordPress install had not been updated in two years. In WordPress time two years is forever and definitely left the site open to vulnerabilities. Although only five plugins were used, none of them had been updated in two years either. However, lack of updates wasn’t the culprit here; it was the theme. About a month prior to noticing the hacked site, the client had asked an employee who claimed to be WordPress savvy to update the site. She had found a free theme somewhere (she couldn’t remember where), installed it, made a few content changes to the site and then didn’t check back until a patient advised that the site was hacked around a month later. There are a number of problems at […]

I was recently asked to assist a new client in restoring their hacked website. The client is a small alternative medicine practice with a self-hosted WordPress installation that seemed to suddenly have developed a mind of its own. Banner ads appeared without warning, content was replaced by political rants, and sometimes the site wouldn’t even load. It was a nightmare for the client.

A quick review of the files showed that the culprit was two-fold. First, the WordPress install had not been updated in two years. In WordPress time two years is forever and definitely left the site open to vulnerabilities. Although only five plugins were used, none of them had been updated in two years either. However, lack of updates wasn’t the culprit here; it was the theme.

About a month prior to noticing the hacked site, the client had asked an employee who claimed to be WordPress savvy to update the site. She had found a free theme somewhere (she couldn’t remember where), installed it, made a few content changes to the site and then didn’t check back until a patient advised that the site was hacked around a month later.

There are a number of problems at work here; problems that I see quite a bit with small businesses and, frankly, I’m guilty of some of them as well.

Check your WordPress site at least weekly.

Once a week load up your site just like a customer would. Look at a couple of pages and verify everything looks fine. You don’t need to look at every page, but if you have a store on your site check that the store is working properly, i.e. pages load, you can add things to the cart, etc. Next, log in as an admin and check for updates. Updates appear in the top toolbar:

”

You can see here that I have two updates on my site. Now, I have a backup that runs weekly and had just run, so I didn’t run another before updating. Assuming you have backups (see below), just click on the link and it will take you to a page where you can run your updates.

Back up your site at least monthly, preferably more often.

With a backup, if something happens your site can be back up and running in an hour. Without a backup you may lose all of your content! Case in point: I’ve had four former clients who chose to save money by having their friend/teenager/employee/volunteer who “knew about WordPress” move their WordPress website to another host. The sites were moved and…they didn’t work! The person moving the site in each case hadn’t realized that all of the content is stored in a database. Since they’d cancelled their former hosting, everything was lost. In one case it was ten years of daily blog posts!

I run weekly backups of both the database and site files because I don’t post as often as I should. If I posted daily, I would run daily backups of my database and monthly backups of my site files. Why monthly? Because site files don’t change very often. I also run a backup before installing new plugins or updating plugins. I only keep two backups. That way if my last backup was bad I have another I can fall back on.

In this case the client did have a backup from about a year previous. Since they didn’t make many content changes, I was able to use it to fix their site.

“Free” WordPress themes may not be free.

Needless to say, use extreme caution in downloading free themes, even from otherwise reputable places like Themeforest. While Themeforest vets paid themes, I’ve heard of problems with some of their free themes. The only free themes I recommend using are ones from WordPress.org. They are closely examined and should be free from malicious code or other nastiness.

Like everything “free” you get what you pay for. My client ended up paying around $750 for me to restore their site. (I actually gave them a discount since they were referred by a friend.) This included the initial troubleshooting, attempting to clean the database (before the client realized they had an old backup), re-installing a fresh installation with the old backup, and changing all passwords, including ones for their hosting and FTP accounts. Additionally they virtually disappeared from search engines because for a month their site was seen as spam. If they had just purchased a paid theme they would have spent $29 – $150.

WordPress is not hands-free.

The main take-away is that WordPress is easy to add content to, but it isn’t hands-free. Someone needs to be checking your site on a regular basis, both front-end and admin side. Run updates when they appear and make sure regular backups are occurring. Most important, don’t rely on free themes unless you can read code and are willing to look at every theme file to ensure it isn’t harboring malicious code.

If you can’t spare time for this yourself, many WordPress professionals offer service contracts that cover backups, updates and site checks for less than $50 a month. I charge $500/yr for this service, which also includes a file change notification plugin. Every time the files on your WordPress installation change I review the report to make sure the changes are legitimate (updates, page changes, or new blog posts) and not malicious (hacked files).

Removing Image Links in WordPress

By default WordPress adds a link to images you upload and place in posts and pages. The link just goes to a page that shows the image. This behavior is undesirable for two reasons. First, it is unexpected behavior. Users expect links to take them somewhere useful and most of the time a page with just the image on it may not be what they were expecting. This confuses users and, if they aren’t computer-savvy, they may leave your site altogether if they can’t figure out how to get back to the page they were reading. Second, it may hurt your SEO ranking by adding unfruitful links to your page weight. In some cases the search engine may return the image page instead of your post in a search result! While you can choose what to link to when you upload new images, what is the solution for the oodles of images you’ve already uploaded? WPBeginner has a quick, easy solution. First, log into your WordPress admin and then click on Appearance->Editor. There will be a list of files on the right side. Look for functions.php and click on it. It will load in the central edit box. Copy and paste […]

”By default WordPress adds a link to images you upload and place in posts and pages. The link just goes to a page that shows the image. This behavior is undesirable for two reasons.

First, it is unexpected behavior. Users expect links to take them somewhere useful and most of the time a page with just the image on it may not be what they were expecting. This confuses users and, if they aren’t computer-savvy, they may leave your site altogether if they can’t figure out how to get back to the page they were reading.

Second, it may hurt your SEO ranking by adding unfruitful links to your page weight. In some cases the search engine may return the image page instead of your post in a search result!

While you can choose what to link to when you upload new images, what is the solution for the oodles of images you’ve already uploaded?

WPBeginner has a quick, easy solution. First, log into your WordPress admin and then click on Appearance->Editor. There will be a list of files on the right side. Look for functions.php and click on it. It will load in the central edit box. Copy and paste the following code at the end of all other code, but before any final ?> tag.

function wpb_imagelink_setup() {
	$image_set = get_option( 'image_default_link_type' );
	
	if ($image_set !== 'none') {
		update_option('image_default_link_type', 'none');
	}
}
add_action('admin_init', 'wpb_imagelink_setup', 10);

Click on “Update File” and your images will not longer have links!

Warning: Some themes don’t allow you to make changes to the functions.php file. If you don’t see the functions.php file in the right-hand list under Appearances->Editor, or if you can’t access the Editor at all, then you will need to manually change the functions.php file. Depending on your expertise you may need professional assistance (like me).

Additionally, if you update your theme you will need to add this change back. Ideally if you want to hack your theme like this you would set up a child theme. But that is a topic for another post!

Don’t Trust Friends Who “Know About WordPress”

It has now happened for the fourth time. I received an email from a client for whom I set up a WordPress site. Instead of contracting with me to move their site, they went with their friend/teenager/employee/volunteer who “knew about WordPress”. They moved the site to a new host, cancelled the old host, but the new site doesn’t work. Why? Because WordPress works with a database and the person who “knew about WordPress” didn’t transfer the database, just the files. Three years of content lost. Except…. Huzzah for backups! I’d set up backups to be saved to the site AND emailed to the client. The client had been deleting the backups in her email, but the latest backup was transferred to their new hosting along with the rest of the files. I quoted rush pricing to get their site up and running again, which they declined. Their person who “knew about WordPress” could get it installed. I received another email. The person who “knew about WordPress” couldn’t figure out “where the database is”. As I half expected, I ended up restoring the site per my rush quote. If they’d come to me to begin with it would have cost 1/3 […]

10 Essential WordPress Plugins

With almost 40,000 plugins available to WordPress users, WordPress’ core functionality can be expanded to meet the needs of nearly anyone. Lots of sites list their “XX Must-Have WordPress Plugins” and I’m joining the parade. Here are the plugins I find absolutely necessary for every WordPress installation. 1. W3 Total Cache W3 Total Cache speeds up your site “by increasing server performance, reducing the download times and providing transparent content delivery network (CDN) integration”. 2. Yoast SEO Yoast SEO controls all aspects of managing the SEO for your site. You can add meta descriptions, custom page titles and run checks that tell you how well you nailed your keyword content. 3. iThemes Security iThemes Security has saved several clients from brute-force attacks. I use this to schedule backups, change the name of the admin folder and generally lock down client sites. Login attempts can be limited, IP addresses or even countries excluded from accessing your site and it hooks into a blacklist database to automatically exclude notorious IP addresses. 4. Gravity Forms Gravity Forms isn’t free, but I use it on nearly all of my client sites. It is flexible, has conditional logic, is easy to set up and style, […]

With almost 40,000 plugins available to WordPress users, WordPress’ core functionality can be expanded to meet the needs of nearly anyone. Lots of sites list their “XX Must-Have WordPress Plugins” and I’m joining the parade. Here are the plugins I find absolutely necessary for every WordPress installation.

1. W3 Total Cache

”

W3 Total Cache speeds up your site “by increasing server performance, reducing the download times and providing transparent content delivery network (CDN) integration”.

2. Yoast SEO

”

Yoast SEO controls all aspects of managing the SEO for your site. You can add meta descriptions, custom page titles and run checks that tell you how well you nailed your keyword content.

3. iThemes Security

”

iThemes Security has saved several clients from brute-force attacks. I use this to schedule backups, change the name of the admin folder and generally lock down client sites. Login attempts can be limited, IP addresses or even countries excluded from accessing your site and it hooks into a blacklist database to automatically exclude notorious IP addresses.

4. Gravity Forms

Gravity Forms isn’t free, but I use it on nearly all of my client sites. It is flexible, has conditional logic, is easy to set up and style, integrates with payment gateways and MailChimp and works!

5. Really Simple Captcha

”

Really Simple Captcha works with Contact Form 7, a plugin I’m not fond of, but have used for some clients. The nice thing about this plugin is the size of the captcha – it is small and unobtrusive. Because of this, it fits better in sidebars than reCaptcha does.

6. Google XML Sitemaps

”

Google XML Sitemaps is the easy way to create a sitemap that Google’s crawler and Google Analytics can easily read.

7. Widget Logic

”

Widget Logic is a little difficult for non-coders to use, but it adds extremely powerful control of what page or post you want a particular widget to appear on.

8. UpDraft Plus

”

UpDraft Plus is a backup and restoration plugin that can save your site files and database to Dropbox, Google Drive, email or other cloud services. I use both this and iThemes Security to run backups, just for insurance.

9. Editorial Calendar

”

Editorial Calendar lets you easily schedule posts and keeps track of your drafts. This plugin is essential if you want to blog ahead and makes following an editorial plan simple.

10. WP Smush

”

WP Smush strips unnecessary information from your images, reducing file size and helping them load faster. It does not affect the quality of your images, but the images load faster, which Google loves. One problem, though; it slows down uploading and dropping images into your posts/pages.

What plugins do you find essential? Let me know in the comments.

Morning Routine: Social Media, The Brain and Walkies

First things first Every morning I go through the same routine. First the email check and delete. Select All email and then click off the email I want to keep. These are usually all actionable items. The rest gets deleted. Next come the local news, online. Our local newspaper sucks, so this takes maybe three minutes to peruse before taking a look at Google News headlines just to make sure something momentous hasn’t happened overnight. Next comes Facebook, about 3-5 minutes of seeing what my friends are up to. At the most I’ve now spent 15 minutes of my morning and usually at this time Peanut comes in ready for her walk. By “ready for her walk” I actually mean nothing will get done until I take her for her walk because she’ll try and climb in my lap until my full attention is centered on her. Social media time Back from my walk I fire up TweetDeck and check my notifications and various searches. Buffer gets loaded in another window; I use it to schedule tweets and posts to LinkedIn and Facebook. I have two screens, so in my main screen I start Feedly and browse the feeds from all of the blogs […]

First things first

”Every morning I go through the same routine. First the email check and delete. Select All email and then click off the email I want to keep. These are usually all actionable items. The rest gets deleted.

Next come the local news, online. Our local newspaper sucks, so this takes maybe three minutes to peruse before taking a look at Google News headlines just to make sure something momentous hasn’t happened overnight. Next comes Facebook, about 3-5 minutes of seeing what my friends are up to. At the most I’ve now spent 15 minutes of my morning and usually at this time Peanut comes in ready for her walk. By “ready for her walk” I actually mean nothing will get done until I take her for her walk because she’ll try and climb in my lap until my full attention is centered on her.

Social media time

Back from my walk I fire up TweetDeck and check my notifications and various searches. Buffer gets loaded in another window; I use it to schedule tweets and posts to LinkedIn and Facebook. I have two screens, so in my main screen I start Feedly and browse the feeds from all of the blogs I belong to. There are usually 150-400 posts, but I can get through them quickly, stopping only to read one fully when it interests me. Most of the time I just open the article in a new window and keep reviewing Feedly. By the end I usually have 5-10 articles open in browser tabs and usually I create Tweets for these, complete with images I get from screenshots.

I keep TweetDeck open all day, though not usually maximized when I’m working. During breaks or thinking periods I will check a search I set up for people looking for WordPress help. I also keep an eye out for interesting articles, breaking news, notifications and direct messages. I check Twitter more often than I check email (3x daily) or my voicemail (1x daily if I remember).

My Brain

” via Flickr: Liz Henry

I also save articles to The Brain because I find them easily with their comprehensive search features. For example, today I had two articles about CSS, the Tufte CSS guide and the Trello CSS guide, which I want to save. I drag-and-drop each under “CSS” in The Brain with a thought type of “reference”. Another article “A Checklist for Designing Mobile Input Fields” gets added to the thought “Forms” and also to HTML5 and Javascript/JQuery. The article is linked to all three because to me it relates to all three. And in typing this I realize it needs to connect to “web design” as well.

I try to remembers to link the article to the person who wrote it and/or the website. For example, I might recall an article about forms that appeared on the Nielson Norman Group site. If “Nielson Norman Group” is added to The Brain, then I can see all of the articles by them I’ve saved. Or maybe browse other articles that might apply to whatever I’m thinking about. Many articles under the same author means that author is probably a thought leader and I should follow them on Twitter or elsewhere.

The best part about The Brain, however, is the “add it and forget it” aspect. Unlike bookmarks or lists, I know that I will be able to find this article again when I’m needing information about forms. All the information is linked in a way that I can’t help but run into it when I’m looking for information.

Let’s say a client needs a responsive modal form with a custom form handler. If I type “form” into my Brain’s search I can see all of the forms, including custom handlers I’ve built, other clients that I’ve done forms for, and all of the articles relating to forms. There are links to front-end validators, back end validators and custom styling information. I even see code snippets I’ve saved reminding me how to get the value of a radio button or select field in jQuery (something that I keep forgetting).

And now to work….

Everything above takes about 2 hours, including walking my dog which is about 45 minutes to an hour. By 9 or 10 a.m. I start working through my email, getting to inbox zero and then client project work. Right now I’m a little slow so instead I’m learning Python and also reading the WordPress source code. I spend a couple hours a day on each.

HostGator’s Support Approaching Comcast Levels

I’ve been with HostGator for several years, migrating there from GoDaddy due to extremely slow hosting. It was love at first site; my WordPress sites ran fast, support was fast and easy (phone, chat or email) and everything just worked. Then I started to have problems. The first problem was my sites slowing down to a crawl. HostGator helped me identify WordPress’ heartbeat API as the issue and things went well for awhile. Then my account went down. My account has my business website as well as 7 other websites, set up as subdomains. Three of those sites are customer websites who just needed basic brochure-website style hosting. It was a shared hosting account and worked just fine for years. None of the sites (including my business site) get a huge amount of traffic. My bandwidth usage is just a fraction of what I’m allowed. Two weeks ago, after running nine updates for WordPress for my business site not only my business site, but my entire account was “turned off” by HostGator due to excessive server usage. All of my sites were down, including my customer accounts. All without notice. It took 20 minutes for me to receive notification by […]

” I’ve been with HostGator for several years, migrating there from GoDaddy due to extremely slow hosting. It was love at first site; my WordPress sites ran fast, support was fast and easy (phone, chat or email) and everything just worked.

Then I started to have problems. The first problem was my sites slowing down to a crawl. HostGator helped me identify WordPress’ heartbeat API as the issue and things went well for awhile. Then my account went down.

My account has my business website as well as 7 other websites, set up as subdomains. Three of those sites are customer websites who just needed basic brochure-website style hosting. It was a shared hosting account and worked just fine for years. None of the sites (including my business site) get a huge amount of traffic. My bandwidth usage is just a fraction of what I’m allowed.

Two weeks ago, after running nine updates for WordPress for my business site not only my business site, but my entire account was “turned off” by HostGator due to excessive server usage. All of my sites were down, including my customer accounts. All without notice. It took 20 minutes for me to receive notification by email. I was working in my WordPress account, so I knew my site was down, but this was the first inkling that all of the sites were down.

I disabled all of my plugins by FTPing in and adding “-disabled” to the end of all of the plugin folders. Then I filed a support ticket. My site came up about two hours later, so I began activating plugins, only to get three activated and have the site go down again.

At this point I got on chat with HostGator to be told that they don’t support WordPress, yada yada. Not much help. So, I deactivated the plugins again, re-opened the support ticket and eventually got the account online again. Only to have it go down again the next day. After much more to and fro-ing I finally got the account to stay up by deactivating Yoast’s SEO plugin. However, this wasn’t an optimal solution, so I considered switching to a VPS.

I have a limited budget, so I looked around at larger, reputable companies, got prices and then went and talked to HostGator customer retention. I’d already paid a year in advance to HostGator for my shared account, which I would lose if I switched. Hoping I could get the balanced switched over to my VPS, I told the rep the pricing I was seeing elsewhere, what I needed, yada yada. In the end I negotiated a one year half-off deal with my balance applied to the new hosting account. I’d be getting managed hosting and was assured that support would transfer everything to the VPS account. I was given a URL to step-by-step instructions to get it going.

I was a little confused by the instructions, but I got my VPS transferred and emailed the department identified in the instructions to get my DNS set up correctly. Everything seemed pretty smooth, but once I was given the go-ahead to switch my domains to the new DNS I found it wasn’t working. Another ticket, 24 hours with no response, and a chat session and phone call later I finally got it working, though they didn’t transfer the domains that were registered with HostGator as they were supposed to, I got that done.

All my sites were finally working. The emails for my subdomains were working correctly. However my main domain’s email – which is my main business email – was not working correctly. Another ticket, another 24 hours, another call and finally I’m told something wasn’t set up right, but it is right now. But I still can’t log into my email account. Using the control panel webmail interface I get an error messages that my domain doesn’t exist. I file a support ticket on August 1st (a Friday and later in the day) By mid-Monday I’ve received no response. As the wait time for the phone is excessive, I go to chat. The rep reviews everything and tells me that the ticket is in the hands of the “Linux guys” and there’s nothing he can do. I ask if they are working on it and he assures me they are. I ask if I can talk to them and he says they don’t take phone calls.

He then suggests I just use Google Apps to manage my email! The hosting company can’t set up email accounts correctly themselves, but expect users to do it or use a third party server?

Tuesday, still not working. No response to my ticket. I add a note to the ticket documenting my chat session and also the fact I tried setting up a different email account for my business – no accounts for my business will work at all. I DM @HostGatorSupport on Twitter and ask them to escalate my ticket. No response.

Wednesday, still not working, no response to my ticket. I write this blog post, which will be Tweeted, not only to show the problems with HostGator customer service, but maybe, possibly, to get someone at HostGator to either get my account working correctly or agree to refund all of my money so I can go elsewhere.

Note: I am now receiving business emails. I achieved this by redirecting all email to my business account to my personal account. But I still can’t access my business emailboxes.

Updated on 6 Aug 2015: After another very long chat session where the chat person could see the problem (the VPS was set up incorrectly) but couldn’t fix it, I was assured the problem would be escalated. Within an hour I received notification that it was fixed, which I confirmed this morning. We will see how the next year goes (I’m paid up a year in advance). I’ve been contacted by several companies including Host4Geeks and DreamHost and I plan on checking them out before renewing.

Help Me Find WordPress Plugins to Make Your Life Easier

Regular readers know that I write custom WordPress plugins. Currently I have three plugins in the WordPress repository: BP Pretty Quote: Creates nicely formatted quotation blocks BP Expire Category: Removes a post from a category on a certain date BP Post to Google Map: Add lat/lng coordinates to WordPress posts so they can be displayed on a Google Map BP Post to Google Map also has a premium version which adds custom markers, geocoding and the ability to import GPX files or create coordinates for polylines for Google Maps. Solving Problems Each of these plugins were initially created to solve a problem for a client. BP Pretty Quote was a collection of CSS formats I’d collected and which a client wanted to be able to insert into her blog easily. BP Expire Category came about after a client wanted a “break news” category where posts would only be associated with the category for a specific period of time. BP Post to Google Map was inspired by a sector of my clients that currently use custom-coded back end applications to manage Google Map markers for their tourism-based sites. Their sites are +5 years old and I hope to switch them to […]

Regular readers know that I write custom WordPress plugins. Currently I have three plugins in the WordPress repository:

” Default
BP Pretty Quote: Creates nicely formatted quotation blocks
BP Expire Category: Removes a post from a category on a certain date
BP Post to Google Map: Add lat/lng coordinates to WordPress posts so they can be displayed on a Google Map

BP Post to Google Map also has a premium version which adds custom markers, geocoding and the ability to import GPX files or create coordinates for polylines for Google Maps.

Solving Problems

Each of these plugins were initially created to solve a problem for a client. BP Pretty Quote was a collection of CSS formats I’d collected and which a client wanted to be able to insert into her blog easily. BP Expire Category came about after a client wanted a “break news” category where posts would only be associated with the category for a specific period of time. BP Post to Google Map was inspired by a sector of my clients that currently use custom-coded back end applications to manage Google Map markers for their tourism-based sites. Their sites are +5 years old and I hope to switch them to WordPress.

Addressing Aggravations

I’m working on a plugin right now that addresses how difficult it is to find a particular page or post to edit. The client that inspire this plugin has a deep, multi-layered page set up. Lots of sub pages and sub sub pages. Searching for a particular page is difficult because the search function looks at the content of the post or page, not just the title.

My work-around has been to log into the admin area and then, in a separate tab, find the page in the site and click on the “edit” link which appears when logged in as an admin. The plugin I’m working on will add a drop-down filter box to the page/post listing. This filter box has top-level pages in it – just pages that have sub-pages. Filtering the list will show only the sub-pages for that top-level page.

Not only does this make it easier to find pages, it makes it easier to change the order of sub-pages.

What Plugin Would Make Your Life Easier

This is where you come in. What plugin(s) would make your life easier? I’m looking for more plugins to code for the (free) WordPress repository and need your inspiration. Here are a few possibilities:

A popup calendar for the post scheduling box. Why oh why isn’t this standard?
Some themes limit the amount of space used in your editing box to better match how the text will display. How about a toggle that will switch between full-length lines and the limited width?

Let me know in the comments what plugins you would find useful.

How a WordPress Plugin Brought Down My Entire Hosting Account

After a five day break enjoying the blues at the Winthrop Rhythm and Blues Festival I was back in my office on Tuesday morning, ready for a blog post. Logging into WordPress revealed 9 plugins that needed updating so, as I’ve done countless times before, I chose all of them and hit “update”. Everything went smoothly enough, except for one plugin that had some problems, Yoast’s WordPress SEO plugin. I disabled it and then re-enabled it and, to my surprise, got a “Could not connect to database” error message. Logging into my hosting cPanel everything looked fine there, but soon I received an email from my hosting company, HostGator, that said my account was shut down because of excessive mySQL useage. I have a shared hosting account, which is what most people use, and the database associated with my business website was exceeding 65% of the database processing power for my server. My account hosts 9 other websites, so this was a huge problem – everything was down, not just my own business site. I won’t relate the headaches I had dealing with HostGator other than to relate that although my problem was finally escalated after my account was down for […]

After a five day break enjoying the blues at the Winthrop Rhythm and Blues Festival I was back in my office on Tuesday morning, ready for a blog post. Logging into WordPress revealed 9 plugins that needed updating so, as I’ve done countless times before, I chose all of them and hit “update”.

” via blog.brendanvance.com/2013/11/02/problem-attic/

Everything went smoothly enough, except for one plugin that had some problems, Yoast’s WordPress SEO plugin. I disabled it and then re-enabled it and, to my surprise, got a “Could not connect to database” error message. Logging into my hosting cPanel everything looked fine there, but soon I received an email from my hosting company, HostGator, that said my account was shut down because of excessive mySQL useage. I have a shared hosting account, which is what most people use, and the database associated with my business website was exceeding 65% of the database processing power for my server.

My account hosts 9 other websites, so this was a huge problem – everything was down, not just my own business site.

I won’t relate the headaches I had dealing with HostGator other than to relate that although my problem was finally escalated after my account was down for almost 24 hours, I was never actually allowed to talk to anyone on the phone. I was advised that my case was escalated, they would priorize email replies and that was that. I combed through all of the links HostGator sent me to “optimize my database useage”, most of which I was already doing.

After disabling all of the plugins I updated and much headache in trial and errors the problem was finally tracked down to Yoast’s plugin. This is extremely strange, because Yoast is used widely, I’ve used it for years without issues, and all of my clients use his plugins and aren’t experiencing problems. However, at this time my site is working fine and it is the only plugin I’ve left disabled.

Query Monitor

The HostGator tech suggested I install Query Monitor, which has a ton of features, but allows admins to see which plugins are making queries to the databases. For example, as I’m writing this post the report shows 20 queries for iThemes Security, 16 for Easy Digital Downloads and 10 for Buddy Press. Just this page alone generates 88 queries to the database!

I am very wary of re-activating the SEO plugin because I can’t afford for my sites to go down again.

Going Forward

I was really unhappy with HostGator’s response of just shutting down my account and sending an email (which I received 20 minutes after my sites were offline). I’ve done some research and found this is a typical HostGator response. None of my sites get much traffic. My business blog receives the most hits and I see less than 1,000 hits a day. Dedicated hosting is far beyond my budget. I’m looking at switching hosting providers and had a great conversation with someone at WestHost. Unfortunately I just paid for 3 years of hosting last January, so I’m going to hold on and see what progresses before I eat that cost and just switch.

Can You Maintain Your WordPress Site?

I logged into my WordPress-run website this morning after being gone for 5 days to find 9 updates, 4 of which were ‘critical’. Critical updates are those which fix bugs or security issues and really need to be run immediately. This isn’t unusual, of course. WordPress and their plugins are constantly updating, which is actually a good thing. Active updates mean improved features and if you apply those updates it means your site is better protected and has the latest functionality. There is the cost of your time however. Like this morning. As usual I updated all 9 plugins at once and immediately crashed my site. I had to disable the plugins I’d updated manually (see below) and the re-activate them one at a time to figure out which one was causing the error. Wouldn’t you know it, the error disappeared. It took me about 20 minutes to resolve the error and get my site up and running again. Then I did a manual backup to be on the safe side. So 30 minutes out of a busy day. Of course, I knew exactly what steps to take when the updates failed – so what took me 30 minutes might take you […]

”I logged into my WordPress-run website this morning after being gone for 5 days to find 9 updates, 4 of which were ‘critical’. Critical updates are those which fix bugs or security issues and really need to be run immediately.

This isn’t unusual, of course. WordPress and their plugins are constantly updating, which is actually a good thing. Active updates mean improved features and if you apply those updates it means your site is better protected and has the latest functionality.

There is the cost of your time however. Like this morning. As usual I updated all 9 plugins at once and immediately crashed my site. I had to disable the plugins I’d updated manually (see below) and the re-activate them one at a time to figure out which one was causing the error. Wouldn’t you know it, the error disappeared. It took me about 20 minutes to resolve the error and get my site up and running again. Then I did a manual backup to be on the safe side. So 30 minutes out of a busy day.

Of course, I knew exactly what steps to take when the updates failed – so what took me 30 minutes might take you an hour or a whole day.

I also knew that I had a recent backup in case all else failed.

How about you? Can you afford to have your site go down when running updates? (You are running updates, aren’t you?) Do you know what steps to take to get your site up and running quickly? When was your last backup?

If you can’t answer these questions you need to find a service that will do it for you and send you reports. As an example, and a plug for my own business, I do the following for clients who are on my weekly plan (only $25/mo):

Manual backup of site files and database before running updates.
Running updates.
Check site to ensure everything is still up and running.
2nd backup when everything appears clear.
Email to client of all clear.

I also offer a service ($15/mo) that runs constantly on your site and checks for changed files or new files added to your site. This protect against hackers; the quicker we find your site has been hacked, the quicker we can restore it. While this is something you can set up yourself, I read the reports and can tell the difference between a legitimately changed file (i.e. you’ve uploaded a new image or a plugin has updated) and a file that shouldn’t have been changed.

Contact me today about setting up your site for automatic backups/updates and changed files.
[gravityform id=5 title=false description=false ajax=true tabindex=49]

Friday: My Learning Day

Fridays are low-production days for me. My mind is on the weekend, sometimes I’m getting the trailer ready to go camping, and often my husband is working around the house, which is distracting. Summer is generally slower for me as well, so I tell my clients I am unavailable on Fridays save for emergencies and use that day to clean my desk, work on my business, and especially expand my skills. If you are anything like me you probably get caught up in the daily workflow and just managing to get everything done can be a struggle. Meanwhile the coding world is moving on like the ever-expanding universe, ceaselessly creating newly created applications, frameworks, libraries, and workflow systems. Who has time to look at them, much less figure out if that new framework is better that what you are currently using? During the rest of the week I collect all references to things I find interesting in one place. Since I use The Brain, I keep the links in my master brain, but you could use a bookmarks folder or even a text file. Every Friday I go through the list, read the articles, check out what interests me and test-drive any […]

WordPress BP Pretty Quote: New Pullquote Style

The BP Pretty Quote plugin, which is free in the WordPress repository, has a new style: Pullquote. Most of the current styles are appropriate for quoting famous people or for creating a post just containing that quote. The Pullquote style is different. Use it in long, text-heavy WordPress Posts or Pages to [bpiq style = “pullquote”]highlight important thoughts or concepts and break up the wall of text[/bpiq]. This style of quote is popular in magazines and newspapers and now you can add it to your own site. How to Use It Assuming you have BP Pretty Quote installed and updated, write your post/page content first. Pick out the quote you want to highlight and put the shortcode around it like this: [[bpiq style = “pullquote” position=”right” width=”30%” color=”#FFF” textcolor=”#666″]The quoted text here in your paragraph[/bpiq]] You don’t need to include all of the options except for “style”. The position, width, color and textcolor options I used above are all defaults, so just reference them if you want to change one. The quote will stay as it is in your paragraph, it will just be duplicated to appear as the pullquote. You can see the result in the following screenshot:

Make WordPress Page Listings Work for You

While I’m a WordPress advocate there are some issues with it that push my buttons. Top and center are the Page list all pages. For small sites these views work fine, but if you have a site with lots of layers – pages that are nested with child and even grandchild sub-pages – it becomes very difficult to find the page you are looking for. One client has nearly 400 WordPress pages – many of which are child pages and many page names are similar. Searching for an individual page is impossible; if you haven’t noticed, the search action on the listing page searches for the term in the page itself, not just in the title. My client is a plastic surgeon, so if I’m searching for the page called “Skin” almost all of her other pages appear in the search because skin is a word featured on most pages! My solution was to create a plugin that would add a drop-down select box filter containing a list of only pages with children. Here are some screen shots: What is especially nice about this is that you can target children of children. The drop down shows all the pages that have children, even if that page […]

Font Awesome and WordPress as Part of Your Daily Flow

So far everything I’ve shown you in this series in cool and fun, but really on a daily basis how are you going to use Font Awesome on your WordPress site? Lists Used as bullets in lists, Font Awesome icons can add visual cues: Donec vulputate tellus ut metus lacinia, ut semper ipsum feugiat. Nullam tincidunt lorem id dictum pellentesque. Donec lacinia arcu sed metus malesuada molestie. Duis id nisl id purus scelerisque lacinia. Vestibulum finibus quam et tortor lobortis, sit amet interdum magna porta. Duis id nisl id purus scelerisque lacinia. Duis id nisl id purus scelerisque lacinia. Duis id nisl id purus scelerisque lacinia. In the above example I suppressed the default <li> circles for this list only by adding a class of “nodot” to the <ul>: As you can see from the last line, wrapping is retained as normal for a list. I did have to incrementally fiddle with the position of the icon. At first it was too high on the line, but by changing the top positioning in this CSS statement was I was able to get it lined up. Links There is a group that advocates using icons on links to show what kind […]

So far everything I’ve shown you in this series in cool and fun, but really on a daily basis how are you going to use Font Awesome on your WordPress site?

Lists

Used as bullets in lists, Font Awesome icons can add visual cues:

Donec vulputate tellus ut metus lacinia, ut semper ipsum feugiat.
Nullam tincidunt lorem id dictum pellentesque.
Donec lacinia arcu sed metus malesuada molestie.
Duis id nisl id purus scelerisque lacinia.
Vestibulum finibus quam et tortor lobortis, sit amet interdum magna porta. Duis id nisl id purus scelerisque lacinia. Duis id nisl id purus scelerisque lacinia. Duis id nisl id purus scelerisque lacinia.

In the above example I suppressed the default <li> circles for this list only by adding a class of “nodot” to the <ul>:

ul.nodot {
 list-style-type: none;
 padding-left: 20px;
 color: #666;
}

ul.nodot li {
 list-style-type: none;
  position: relative;
  padding-left: 20px;
}

ul.nodot li i:before {
  position: absolute;
  top: 5px;
  left: 0;
}

.danger {color: #FF0000;}
.ok {color: #00FF00;}

As you can see from the last line, wrapping is retained as normal for a list. I did have to incrementally fiddle with the position of the icon. At first it was too high on the line, but by changing the top positioning in this CSS statement was I was able to get it lined up.

ul.nodot li i:before {
  position: absolute;
  top: 5px;
  left: 0;
}

Links

There is a group that advocates using icons on links to show what kind of link it is. Internal links have one kind of icon, while external links have other kinds. An icon added to a download link lets the user know what to expect.

Action Items

Call attention to something in your post with a call to action that links to your order form or contact information:

Announcing
WordPress Plugins

Are you using Font Awesome in your daily routine? Let me know what you use it for!

Font Awesome and WordPress, Rotating and Animating Icons

In previous posts we’ve seen how easy it is to add Font Awesome icons to your WordPress posts and pages. But what if the icon you want to use points in the wrong direction? Or perhap it would look better animated? It is just as easy to change the orientation of an icon or animate it as it is to add the icon! Font Awesome has six classes that allow you to rotate or flip an icon however you wish: normal fa-rotate-90 fa-rotate-180 fa-rotate-270 fa-flip-horizontal icon-flip-vertical Just add the class to the icon you want to rotate: Watch for falling trees! Spinning or animating an icon is similar: fa-spin – icon will rotate constantly fa-pulse – icon rotates with 8 steps to make it look like it is pulsing The fa-spin class will work with any icon, but there are four it works with expecially well using the fa-spin class: fa-spinner fa-circle-o-notch fa-refresh fa-cog And again using the fa-pulse class: fa-spinner fa-circle-o-notch fa-refresh fa-cog Note that the animations won’t work in IE8-IE9. In the final post of our series we’ll look at practical ways to use icons in your every day posts.

In previous posts we’ve seen how easy it is to add Font Awesome icons to your WordPress posts and pages. But what if the icon you want to use points in the wrong direction? Or perhap it would look better animated? It is just as easy to change the orientation of an icon or animate it as it is to add the icon!

Font Awesome has six classes that allow you to rotate or flip an icon however you wish:

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical

Just add the class to the icon you want to rotate:

<i class="fa fa-tree fa-rotate-90"></i>Watch for falling trees!

Watch for falling trees!

Spinning or animating an icon is similar:

fa-spin – icon will rotate constantly
fa-pulse – icon rotates with 8 steps to make it look like it is pulsing

The fa-spin class will work with any icon, but there are four it works with expecially well using the fa-spin class:

fa-spinner
fa-circle-o-notch
fa-refresh
fa-cog

And again using the fa-pulse class:

fa-spinner
fa-circle-o-notch
fa-refresh
fa-cog

Note that the animations won’t work in IE8-IE9.

In the final post of our series we’ll look at practical ways to use icons in your every day posts.

More Font Awesome and WordPress: Stacking

One of the reasons Font Awesome is so popular is because it is so easy to create custom-looking icons. In today’s post we are going to stack two icons to create a whole new one like this: fa-twitter on fa-square-o fa-flag on fa-circle fa-terminal on fa-square fa-ban on fa-camera This is a little tricky because of the way WordPress tries to reformat HTML. Remember that we are working in the Text editor – it is probably a good idea to write up your post or page first and then go back and add your icons. In this tutorial we are going to add the “no cameras” icon to the following sentence: Because we are stacking two icons, we are going to put those icons inside a span so that the CSS processor knows they go together: “fa-stack” is the css that handles the stacking and fa-lg is css to use a larger version of the font. Now we are going to add the html for the camera icon: Here is where we start getting tricky. Make sure that the and everything inside it are all on one line. If you break it into separate lines WordPress will add line breaks […]

One of the reasons Font Awesome is so popular is because it is so easy to create custom-looking icons. In today’s post we are going to stack two icons to create a whole new one like this:

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

This is a little tricky because of the way WordPress tries to reformat HTML. Remember that we are working in the Text editor – it is probably a good idea to write up your post or page first and then go back and add your icons.

” Make sure you are in Text mode, not Visual

In this tutorial we are going to add the “no cameras” icon to the following sentence:

Authorities do not allow photography at this location.

Because we are stacking two icons, we are going to put those icons inside a span so that the CSS processor knows they go together:

<span class="fa-stack fa-lg"> </span> Authorities do not allow photography at this location.

“fa-stack” is the css that handles the stacking and fa-lg is css to use a larger version of the font.

Now we are going to add the html for the camera icon:

<span class="fa-stack fa-lg"><i class="fa fa-camera fa-stack-1x"></i></span> Authorities do not allow photography at this location.

Here is where we start getting tricky. Make sure that the and everything inside it are all on one line. If you break it into separate lines WordPress will add line breaks and your icons will show up separately instead of stacked.

The classes we are using for the camera are:

fa – the generic font awesome setup css
fa-camera – the css code for the camera icon
fa-stack-1x – css for the size of the icon. We want it slightly smaller than the overlaying icon.

Finally, we add the “no” icon:

<span class="fa-stack fa-lg"><i class="fa fa-camera fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x danger"></i></span> Authorities do not allow photography at this location.

The classes are almost the same:

fa – the generic font awesome setup css
fa-camera – the css code for the ‘no’ icon
fa-stack-2x – css for the size of the icon. We want it slightly larger than the underlaying icon.
danger – this is a class I added to my own stylesheet:

.danger {color: #FF0000;}

The result is:

Authorities do not allow photography at this location.

Tomorrow we’ll take a look at rotating and animating icons.

Fun with Font Awesome – Adding Icons to Your WordPress Site

Font Awesome is a collection of over 519 icons that you can scale, color, and add drop shadows. It is immensely fun and an easy way to add icons to your WordPress website. How It Works You’ll need to install and activate the AGP Font Awesome plugin. It is updated often and as of the writing of this post includes all 519 icons. If you are a designer or know that you are working with a child theme you can also just add the following line to your header file right above the wp-head tag: You won’t get the shortcodes, but you can still add icons using CSS classes as I discuss below. You can check out the documentation – there are lots of shortcodes and an icon that gets added to the post editor, but I prefer to manually add icons by class. Adding Icons by Class First of all you need to choose the icon(s) you want to use. This page displays all of the icons and you can click on the Icon dropdown in the menu to filter them by category. If you add the icon by class you will need the name of the icon, exactly as written. […]

Font Awesome is a collection of over 519 icons that you can scale, color, and add drop shadows. It is immensely fun and an easy way to add icons to your WordPress website.

How It Works

”You’ll need to install and activate the AGP Font Awesome plugin. It is updated often and as of the writing of this post includes all 519 icons. If you are a designer or know that you are working with a child theme you can also just add the following line to your header file right above the wp-head tag:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

You won’t get the shortcodes, but you can still add icons using CSS classes as I discuss below.

You can check out the documentation – there are lots of shortcodes and an icon that gets added to the post editor, but I prefer to manually add icons by class.

” Button added to editor.

Adding Icons by Class

First of all you need to choose the icon(s) you want to use. This page displays all of the icons and you can click on the Icon dropdown in the menu to filter them by category. If you add the icon by class you will need the name of the icon, exactly as written. I used “paw” for the titles on this post.

Click over to the Text view and locate where you want to put the icon. In this case, I am adding the icon to my H2 title tags so I just add the font-icon classes:

<h2><i class="fa fa-paw"></i>Adding Icons by Class</h2>

”

Changing Color and Adding a Drop Shadow

All formatting is done in CSS. Additional classes add the styles you want:

<h2><i class="fa fa-paw purple dropshadow"></i>Adding Icons by Class</h2>

Here I’ve added two new classes: “purple” and “dropshadow”. I also added a space between the icon and the text. In my CSS file I add:

h2 i {margin-right: 3px;}
.purple {color: #6600CC;}
.dropshadow {
   -webkit-text-shadow: 3px 3px 3px rgba(0,0,0,0.3);
   -moz-text-shadow: 3px 3px 3px rgba(0,0,0,0.3);
   text-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}

Next Steps

Tomorrow we will look at some more advanced way to use Font Awesome icons in your WordPress posts.

Posting to WordPress With IFTTT

IFTTT, or If This Then That, is a powerful tool that creates a bridge between your WordPress site and a slew of web based applications. You can use it to push posts from your site to different applications, but in this post we will concentrate on creating posts on your WordPress site. Sign Up for IFTTT and Activate Your WordPress Channel Signing up is easy; just go to IFTTT.com and click on the huge blue button. Once you are all signed in you need to set up your channels. Channels are the web apps that you use and setting up a channel basically consists of giving IFTTT permission to talk to your account on that web app. You will definitely want set up your WordPress channel. IFTTT will ask for your URL, login name and password and connect to your site. Now you will need to add channels that you want to post from. Popular Channels to Use with WordPress You could use any channel with WordPress, but most users stick with social media sites. Obvious choices include: Instagram Flickr YouTube Facebook Twitter LinkedIn With these you can create WordPress Posts from images, status updates and tweets. Depending on the information you want […]

IFTTT, or If This Then That, is a powerful tool that creates a bridge between your WordPress site and a slew of web based applications. You can use it to push posts from your site to different applications, but in this post we will concentrate on creating posts on your WordPress site.

Sign Up for IFTTT and Activate Your WordPress Channel

Signing up is easy; just go to IFTTT.com and click on the huge blue button.

Once you are all signed in you need to set up your channels. Channels are the web apps that you use and setting up a channel basically consists of giving IFTTT permission to talk to your account on that web app. You will definitely want set up your WordPress channel.

IFTTT will ask for your URL, login name and password and connect to your site. Now you will need to add channels that you want to post from.

Popular Channels to Use with WordPress

You could use any channel with WordPress, but most users stick with social media sites.

”

Obvious choices include:

Instagram
Flickr
YouTube
Facebook
Twitter
LinkedIn

With these you can create WordPress Posts from images, status updates and tweets.

Depending on the information you want to share on your WordPress site you could:

Activate the Android Photo channel and autopost photos you take on your smartphone.
Hook up your Sony Lifelog, Fitbit, Nike+ or Jawbone UP account to share your daily steps.
Link into Last.Fm to report the music you listened to.
Share articles from Feedly to your blog
Post NASA’s Image of the Day
Post the Weather report (tip: add a tag or category for weather and display in a widget on your home page)
Post the Daily exchange rate between any two currencies (another good one for a widget)

Watch Out for Loops!

The biggest problem I see when people start using IFTTT to repost to their WordPress blog is looping. If you have a WordPress plugin that sends a tweet each time you post and you set up IFTTT to post your tweets, you’ll get stuck in a loop. Likewise if you send your posts to Facebook. The best way around this is to assign a tag to anything you post from IFTTT (I use IFTTT as the tag) and then I exclude that tag from being shared out to Facebook, Twitter or anywhere else.

Hitting the WordPress Menu Limit

The number of menu items allowed in a menu is limited by the amount of memory allocated to PHP by your hosting provider. In real terms this limits menu items to around 70-90 items. But what if you have more? Here are some things to consider. Do You Need That Many WordPress Menu Items? First of all you really need to consider your menu strategy. Why are you including so many items? If there a more efficient way to organize the links and information on your site? Look at how Amazon (which probably has more than 90 items in its “Shop by Department” menu) organizes the millions of items. For example under “Books and Audible” instead of having all of the possible categories of books, there are just links to “Books, Kindle Books, Children’s Books, Textbooks, and Magazines”. On the Books page further navigation is provided by categories and search. There are no extensive drop-down menus. Perhaps this kind of tree-related structure would work better for your users. Instead of linking to every single subitem from a main navigation, link to major items and have menus on those pages which further drill down. For example a clothing site might have links to […]

The number of menu items allowed in a menu is limited by the amount of memory allocated to PHP by your hosting provider. In real terms this limits menu items to around 70-90 items. But what if you have more? Here are some things to consider.

Do You Need That Many WordPress Menu Items?

First of all you really need to consider your menu strategy. Why are you including so many items? If there a more efficient way to organize the links and information on your site? Look at how Amazon (which probably has more than 90 items in its “Shop by Department” menu) organizes the millions of items. For example under “Books and Audible” instead of having all of the possible categories of books, there are just links to “Books, Kindle Books, Children’s Books, Textbooks, and Magazines”.

On the Books page further navigation is provided by categories and search. There are no extensive drop-down menus.

Perhaps this kind of tree-related structure would work better for your users. Instead of linking to every single subitem from a main navigation, link to major items and have menus on those pages which further drill down.

For example a clothing site might have links to Men, Women, Children, Accessories. On the Women’s page a menu drills down further to dresses, bottoms, lingerie, etc. Google loves this kind of tree branching where one thing leads to another rather than being linked to from every page. It will also improve you page ranking scores.

Page ranking, which is a part of the search engine algorithm, assigns rank by looking at how authoritative the page is and then dividing that score among all of the links on that page. The more links, the more you dilute your page rank. Page rank is only a part of SEO, however, so you have to decide if the risk is worth it.

Multiple Menus

One solution is to use multiple WordPress menus and have them display next to each other. Each menu would be limited to a max of 70-90 items. Use CSS to make the menus seem like one larger menu. This is actually difficult to implement; I’ve tried. It is also difficult to maintain. Remembering which menu that needs editing is a headache.

Manual Menus

It seems counter-intuitive to manually create menus for a CMS system – and it isn’t the best use of the system or your time – but if you absolutely have to use mega-menus with WordPress, the easiest solution is to hand code the menus in HTML.

For a client who insisted on menus that contained over 250 items I created a separate HTML file with just the HTML for the menu in it. I then included that file with php in the sidebar where it needed to show up. This works because she rarely changes menu items and all changes to her site are done by a developer, she doesn’t touch the site.

Conclusion

If considering a mega-menu with WordPress I highly recommend articulating why you need so many link items on every page. Can you do some A/B testing with sample navigation to see what your users prefer? If you must use a large menu and come up against WordPress’ limitations, your best best it just to manually code the menu.

Payment Gateways:A Primer

One of the first things to consider before adding a store to your website is how payments will be handled. You may already have a merchant account, especially if you have a bricks-and-mortar presence, and it would easier for you to use that account, right? Not necessarily. Merchant Accounts ≠ Payment Gateway A merchant account is a bank account that enables the account holder to accept credit cards for payment. From what I understand, a merchant account “package” usually comes with some sort of manual credit card processer – that swipey thing. Wikipedia defines a payment gateway as “an e-commerce application service provider service that authorizes credit card payments for e-businesses”. Most merchant accounts, especially those through local banks, do not offer a payment gateway automatically. Instead you will need to sign up for a payment gateway that will work with your merchant account. This costs extra, both in monthly fees and in transaction fees. In other words, you are paying twice just to process credit cards: once for your in-person purchases via a merchant account and once for your online purchase using a payment gateway. Combining the Two There are companies that combine the two. Authorize.net is one of the biggest payment […]

One of the first things to consider before adding a store to your website is how payments will be handled. You may already have a merchant account, especially if you have a bricks-and-mortar presence, and it would easier for you to use that account, right?

Not necessarily.

Merchant Accounts ≠ Payment Gateway

A merchant account is a bank account that enables the account holder to accept credit cards for payment. From what I understand, a merchant account “package” usually comes with some sort of manual credit card processer – that swipey thing.

Wikipedia defines a payment gateway as “an e-commerce application service provider service that authorizes credit card payments for e-businesses”.

Most merchant accounts, especially those through local banks, do not offer a payment gateway automatically. Instead you will need to sign up for a payment gateway that will work with your merchant account. This costs extra, both in monthly fees and in transaction fees.

In other words, you are paying twice just to process credit cards: once for your in-person purchases via a merchant account and once for your online purchase using a payment gateway.

Combining the Two

There are companies that combine the two. Authorize.net is one of the biggest payment gateways in the U.S. and offers a free interface so that you can hook a Point of Sale (POS) card reader to a computer and process in-person credit card transactions. The card readers are under $100 and Authorize.net doesn’t seem to charge extra for this. (Correct me if I’m wrong).

Talk to Your Bank First

If you already have a merchant account and are happy with it, talk to your bank or provider and see what they offer for a payment gateway. Be sure to ask about monthly fees and processing charges. One of the first clients I built an ecommerce site for (and this has been many years ago) stopped selling online because she was charged an extra 3% on top of her regular merchant account processing fee. She just couldn’t make money from her site.

If you choose to keep your current merchant account, but it doesn’t offer a payment gateway or the fees are too much, I always suggest using PayPal for online purchases. Buyers do not need a PayPal account, there usually isn’t a monthly fee, and the processing charges aren’t bad.

Custom Map Markers, Geocoding for Google Map and WordPress

BP Post to Google Map Premium is finally here! This plugin builds from the basic version so that you can add customization to your Google Maps! How It Works Unlike most of the Google Map plugins in the WordPress repository, BP Post to Google Map (the free version) lets you add latitude and longitude to individual Posts. If a Post has lat/lng, then it shows up on a Google Map which you can display on any WordPress Post or Page with a shortcode. A default map marker in red with a dot is used on the map. The premium version lets you choose one of 91 different map markers or upload your own custom map marker. Have a local community site? Use custom markers to distinguish between coffee shops and retail stores. Write about travel? Use a custom marker to denote an image or gallery post, another to denote full stories, another to show hotel or restaurant reviews. For your own custom markers you can design your own or go to a site like Map Icons Collection which has thousands of map icons for free, some of which you can customize with different colors or backgrounds. Geocoding is Built In In the free version […]

BP Post to Google Map Premium is finally here! This plugin builds from the basic version so that you can add customization to your Google Maps!

”

How It Works

Unlike most of the Google Map plugins in the WordPress repository, BP Post to Google Map (the free version) lets you add latitude and longitude to individual Posts. If a Post has lat/lng, then it shows up on a Google Map which you can display on any WordPress Post or Page with a shortcode. A default map marker in red with a dot is used on the map.

The premium version lets you choose one of 91 different map markers or upload your own custom map marker.

”

Have a local community site? Use custom markers to distinguish between coffee shops and retail stores. Write about travel? Use a custom marker to denote an image or gallery post, another to denote full stories, another to show hotel or restaurant reviews.

”

For your own custom markers you can design your own or go to a site like Map Icons Collection which has thousands of map icons for free, some of which you can customize with different colors or backgrounds.

”

Geocoding is Built In

In the free version you need leave WordPress to determine the latitude and longitude for your Posts. The premium version eliminates this by including Google’s own geocoding application. Coordinates can be determined many different ways:

By street address, city and state
By city and state
By state
By city and country (for unique cities)
By country
By unique attraction (Disneyland Paris, Mt Fuji, or The Kremlin)

Display Map by Category

You can even display maps organized by Post category. Let’s say you run a regional travel site and have posts about lodging, hiking, scenic attractions, camping and shopping. You could show all of your posts on one map and have individual maps that show just lodgings or just scenic attractions. Just add the category slug to the map shortcode [[bpmap catslug=’lodgings’]]

Premium Support and Upgrades

Go premium and receive free upgrades and support for one year. You can still use the plugin after the year is up, however you won’t be able to upgrade or get support without a license.

Buy Today and Save!

To celebrate my new plugin store and the release of BP Post to Google Map Premium you can save 20% until June 10th! Use the discount code NEWPLUGIN at checkout to receive your discount!

Starting a New WordPress Business Within My Current Business

When I decided to start creating WordPress plugins, I started by creating 3 free plugins, BP Pretty Quotes, BP Post to Google Map and BP Expire Category. Despite the learning curve involved in making a secure plugin, it was fairly easy. Creating a premium version of my Google Maps plugin has been like starting a whole new business. Writing the Code The plugin code has been the easy part. Integrating the licensing system is more of a challenge. I’m using Easy Digital Downloads (EDD) and their Licensing plugin. Figuring out how it works and integrating it into my code was challenging, but after some refactoring I believe I have a reusable system. Setting Up the Sales I host my free plugins on the WordPress repository, so I needed an ecommerce store on my own site that would handle purchasing, the downloads and licensing. While EDD is easy to use, setting up a store, integrating the licensing, figuring out what the process is, creating the customer confirmation emails, etc, has been challenging. I had to let go of my self-imposed deadline to go live and be patient while I worked on getting my store up and running. Setting Up Support Oh yeah, a […]

” Photo by Adriano Gasparri ”

When I decided to start creating WordPress plugins, I started by creating 3 free plugins, BP Pretty Quotes, BP Post to Google Map and BP Expire Category. Despite the learning curve involved in making a secure plugin, it was fairly easy. Creating a premium version of my Google Maps plugin has been like starting a whole new business.

Writing the Code

The plugin code has been the easy part. Integrating the licensing system is more of a challenge. I’m using Easy Digital Downloads (EDD) and their Licensing plugin. Figuring out how it works and integrating it into my code was challenging, but after some refactoring I believe I have a reusable system.

Setting Up the Sales

I host my free plugins on the WordPress repository, so I needed an ecommerce store on my own site that would handle purchasing, the downloads and licensing. While EDD is easy to use, setting up a store, integrating the licensing, figuring out what the process is, creating the customer confirmation emails, etc, has been challenging. I had to let go of my self-imposed deadline to go live and be patient while I worked on getting my store up and running.

Setting Up Support

Oh yeah, a support system. I went with a forum-style support system. It is easier to use and most people are familiar with forums.

Documentation

Plan on taking 2-3x more time writing your documentation than you think you will need. The screenshots, writing, reviewing and re-writing seem to take forever.

Bug Testing

While testing the download portion of my new store I discovered new bugs in my plugin. This is a good thing, but it means more testing and more time. I’m spending 2 more days on testing just to make sure everything is working.

My Brain Hurts

Seriously. I’m dreaming about the plugin, the store, and the support forums. This process has consumed me for almost two weeks now.

On the Bright Side

Most of the work was getting the framework on place for selling and supporting plugins. Now that framework is in place I can concentrate on writing the plugins themselves. And that is a good thing because I’ve already thought up my next plugin – importing GPS/KML data to a post to display a line on a map (say a hike, walk, or trip).

Getting BuddyPress and Elegant Themes’ Divi to Work Together

With the launch of a new premium plugin imminent I needed a solution that would handle licensing, purchasing, downloads and support. Going with Easy Digital Downloads (EDD) was a no-brainer; everyone I checked with recommended them enthusiastically. For a support system EDD suggested using BuddyPress with bbPress for the forums. Unfortunately my theme, Divi, isn’t compatible with BuddyPress. Out of the box, the page was completely messed up with the main content area ignored, BuddyPress content appearing above the sidebar, and the sidebar divider line appearing to the left. Researching the issue was frustrating. I’m a Elegant Themes premium member, but questions about Divi and BuddyPress on the forums were ignored. I really didn’t wanted to change my theme just to accommodate BuddyPress so I tried Multiple Themes, a WordPress plugin that lets you assign themes by page. It didn’t work well with Divi, unfortunately. Since EDD integrates with BuddyPress I couldn’t run it in a separate WordPress installation, so adding something like support.beyond-paper.com was out. I messed around with theme template pages, but still couldn’t solve the problem. Finally I sat down and compared the source for the offending BuddyPress page against the source for my blog page. I found that BuddyPress […]

With the launch of a new premium plugin imminent I needed a solution that would handle licensing, purchasing, downloads and support. Going with Easy Digital Downloads (EDD) was a no-brainer; everyone I checked with recommended them enthusiastically.

”For a support system EDD suggested using BuddyPress with bbPress for the forums. Unfortunately my theme, Divi, isn’t compatible with BuddyPress. Out of the box, the page was completely messed up with the main content area ignored, BuddyPress content appearing above the sidebar, and the sidebar divider line appearing to the left.

Researching the issue was frustrating. I’m a Elegant Themes premium member, but questions about Divi and BuddyPress on the forums were ignored. I really didn’t wanted to change my theme just to accommodate BuddyPress so I tried Multiple Themes, a WordPress plugin that lets you assign themes by page. It didn’t work well with Divi, unfortunately.

Since EDD integrates with BuddyPress I couldn’t run it in a separate WordPress installation, so adding something like support.beyond-paper.com was out.

I messed around with theme template pages, but still couldn’t solve the problem. Finally I sat down and compared the source for the offending BuddyPress page against the source for my blog page. I found that BuddyPress was:

stripping out a vital class for the body tag
used different classes for the sidebar widgets

And that was it!

The Solution

For all of these changes I am working in a child-theme of Divi which I called Divi-Child.

In Divi the body is called in the header, so I needed a new header file. I copied the regular header.php from Divi to Divi-Child and renamed it header-buddypress.php.

Next I made a copy of page.php and renamed it buddypress.php.

Finally, because I wanted a different sidebar for my buddypress pages, I created a file called sidebar-downloads.php.

In the header I changed
<body <?php body_class(); ?>>
to

<body <?php body_class('et_right_sidebar'); ?>>

In the buddypress.php file I stripped out all of the Divi specialized code to get to the basics. I also call in the special header and sidebar:

<?php get_header('buddypress'); ?> <div id="main-content"> <div class="container"> <div id="content-area" class="clearfix"> <div id="left-area"> <?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h1 class="main_title"><?php the_title(); ?></h1> <div class="entry-content"> <?php the_content(); wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'Divi' ), 'after' => '</div>' ) ); ?> </div>  </article>  <?php endwhile; ?> </div>  <?php get_sidebar('buddypress'); ?> </div>  </div>  </div>  <?php get_footer(); ?>

I set up the sidebar-buddypress.php file:

<?php if ( is_active_sidebar( 'sidebar-buddypress' ) ) : ?> <div id="sidebar" > <?php dynamic_sidebar( 'sidebar-buddypress' ); ?> </div>  <?php endif; ?>

Since this is a new sidebar I had to add it to my functions.php file:

function bp_sidebars(){ register_sidebar( array( 'name' => __( 'Buddypress Sidebar', 'vendd' ), 'id' => 'sidebar-buddypress', 'description' => '', 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<span class="widget-title">', 'after_title' => '</span>', ) );

}
add_action( ‘widgets_init’, ‘bp_sidebars’ );

”I still had to mess around with the CSS to make the sidebar look nice. The biggest problem was that BuddyPress uses the class widget-title instead of the widgettitle.

You can see the result. I’m pretty happy with how it turned out, but it was a lot of work for what turned out to be a simple fix.

Why I Give Free WordPress Advice

My work set-up consists of two monitors, one of which has TweetDeck running with a tab that displays tweets containing the words “WordPress” and “Help” as well as a tab that display anytime someone uses my twitter handle (@dianeensey). I keep an eye on it all day and if someone asks for help with WordPress or tweets me I can hop on and see what they need. This has worked out well, so well in fact that I now announce my “office hours” on twitter, encouraging people to contact me through my support chat on my website. If you’re reading this on my blog you’ll see a block on the lower right. If I’m online that opens a chat window and you can talk to me immediately. The questions range from just needed advice about plugins (“is there a plugin that does XX?”), template layout issues, and just general questions about WordPress. If the question is a new one I try to remember to write up the answer in my FAQs. All this help/advice is free. Wait, what? Free? Don’t you do this for a living? Yes I do and yes the advice is free – with some limitations. Giving advice doesn’t take […]

My work set-up consists of two monitors, one of which has TweetDeck running with a tab that displays tweets containing the words “WordPress” and “Help” as well as a tab that display anytime someone uses my twitter handle (@dianeensey). I keep an eye on it all day and if someone asks for help with WordPress or tweets me I can hop on and see what they need.

This has worked out well, so well in fact that I now announce my “office hours” on twitter, encouraging people to contact me through my support chat on my website. If you’re reading this on my blog you’ll see a block on the lower right. If I’m online that opens a chat window and you can talk to me immediately.

The questions range from just needed advice about plugins (“is there a plugin that does XX?”), template layout issues, and just general questions about WordPress. If the question is a new one I try to remember to write up the answer in my FAQs.

All this help/advice is free.

Wait, what? Free? Don’t you do this for a living?

” by Franco Folini

Yes I do and yes the advice is free – with some limitations.

Giving advice doesn’t take away from my paid business at all. Most of the questions take less than 3 minutes to answer and there are usually less than 5 questions a day. Once in awhile I’ll run across a particularly knotty issue which I’ll spend more time on. A few months ago a woman was having trouble with her Post editor. The content she typed in only took up part of the edit box and it was driving her crazy. I knew the solution (her theme was the issue) and the fix, but it wasn’t working. We tried a few things over chat which didn’t work until finally she let me access her files directly and I was able to pinpoint the problem. It was an extremely unusual case and we spent more than an hour solving the problem, but I was glad to do it because I learned what to look for if I found the problem again.

While I didn’t charge for the initial troubleshooting an fix, when the person came back a few months later because she’d overwritten her theme files and wanted me to do the fix again I pointed her to the FAQ I’d made and that I’d need to charge to make the fix again.¹

I’m getting more out of helping people than they are.

The real-world problems people have help me train clients; I’m more aware of where WordPress’ learning curve hurdles are. Some “issues” required research into WordPress’ code and the philosophy behind the decisions for how WordPress works. This increased my knowledge of WordPress. Finally, there is the exposure I get from helping people.

Nearly every person I help tweets their appreciation, along with my twitter handle. Several have referred other people to me for paid work. Two people I originally helped have turned into clients.

Even when I don’t get takers for my offer of help, I’m still getting publicity. When I tweet my “office hours” I usually get 5-10 retweets and an average of 3 new followers on top of the people I actually provide assistance to.

Need advice about WordPress, Javascript, jQuery, PHP or web applications?

You know the drill:

Tweet me
Click on the “Click Here to Get Help” link in the box at the bottom of the page on my site.
Email me

And by the way, I offer affordable paid assistance as well!

¹ Note: Ideally the “fix” would be done to a child theme and not the main theme, but that was definitely going beyond free work. I advised her of the cost of setting up a child theme with the fix and she decided just to go with the fix in the main theme, understanding that she should not update the theme. Later she did update the theme, losing the fix.

3 Secrets for New WordPress Plugin Developers

As a new WordPress plugin developer I’m learning things about WordPress that I never knew existed and raising my PHP coding skills to new levels. There are three main points that stand out after submitting 3 plugins to the official repository. There is no such thing as sanitizing too much. If you are getting input from users (admin or front-end) or getting data from the database, filter and/or sanitize that data before you do anything with it! This is the biggest reason for getting your plugin kicked back by the official WordPress plugin repository – believe me I know. The WordPress Codex suggests: I tend to disagree and validate as soon as the data enters my code. The key is to be consistent so that you know all data is safe and expected. Be prepared to have people point out bugs and errors. Embarrassing? Yes. But work through the embarrassment and acknowledge that you are being given a chance to make your code better. Better yet, be profusely grateful to users who find enough value in your plugin to take the time to let you know it isn’t working right. I had three people test my plugin BP Post to Google Map […]

”As a new WordPress plugin developer I’m learning things about WordPress that I never knew existed and raising my PHP coding skills to new levels. There are three main points that stand out after submitting 3 plugins to the official repository.

There is no such thing as sanitizing too much.

If you are getting input from users (admin or front-end) or getting data from the database, filter and/or sanitize that data before you do anything with it! This is the biggest reason for getting your plugin kicked back by the official WordPress plugin repository – believe me I know. The WordPress Codex suggests:

It’s best to do the output validation as late as possible, ideally as it’s being outputted, as opposed to further up in your script. This way you can always be sure that your data is properly validated/escaped and you don’t need to remember if the variable has been previously validated.

I tend to disagree and validate as soon as the data enters my code. The key is to be consistent so that you know all data is safe and expected.

Be prepared to have people point out bugs and errors.

Embarrassing? Yes. But work through the embarrassment and acknowledge that you are being given a chance to make your code better. Better yet, be profusely grateful to users who find enough value in your plugin to take the time to let you know it isn’t working right. I had three people test my plugin BP Post to Google Map and several bugs still were found once it was in the repository. I’ve offered the premium version of the plugin free to one person especially who has been key in pointing out errors.

WordPress’ version of Markdown is a pain.

WordPress uses a version of Markdown for the Readme.txt files which then become the tabbed information about your plugin in the WordPress Repository. It is persnickety and a pain to use. There is a validator where you paste in your readme.txt and you can see what the result will look like, but the result from the validator and the result in the Repository always are different for me. My advice? Run it through the validator and then add it to the Repo, but expect to still have to make changes to it.

What “secrets” have you discovered from being a WordPress plugin developer?

Why I No Longer Support Zen Cart

Ah Zen Cart. For years it was the go-to open source solution for businesses that wanted a full-service store on their website. It came with heavy baggage, however. Zen Cart’s High Learning Curve Zen Cart has a very high learning curve, especially for business owners who weren’t very computer-savvy. There were general settings, many, many general settings and then modules all over the place. Just to get a client up and running required at least 2 hours of hands-on training; and that covered only the most basic uses. Near Impossible to Upgrade There was no easy point-and-click upgrade with Zen Cart. Since programmers were encouraged to overwrite files in order to create custom solutions upgrading was a slog of comparing each file for what had changed. I inherited one client with an outdated, highly customized version of Zen Cart. It was so outdated that in order to get it current we had to go through two upgrades and took a total of 50 hours. Unfortunately this was just a year before WordPress became a viable alternative to Zen Cart and the client ended up switching her whole store to WordPress with WooCommerce after spending all that money to upgrade. Security Issues […]

Ah Zen Cart. For years it was the go-to open source solution for businesses that wanted a full-service store on their website. It came with heavy baggage, however.

”Zen Cart’s High Learning Curve

Zen Cart has a very high learning curve, especially for business owners who weren’t very computer-savvy. There were general settings, many, many general settings and then modules all over the place. Just to get a client up and running required at least 2 hours of hands-on training; and that covered only the most basic uses.

Near Impossible to Upgrade

There was no easy point-and-click upgrade with Zen Cart. Since programmers were encouraged to overwrite files in order to create custom solutions upgrading was a slog of comparing each file for what had changed. I inherited one client with an outdated, highly customized version of Zen Cart. It was so outdated that in order to get it current we had to go through two upgrades and took a total of 50 hours. Unfortunately this was just a year before WordPress became a viable alternative to Zen Cart and the client ended up switching her whole store to WordPress with WooCommerce after spending all that money to upgrade.

Security Issues

Because of the expense to upgrade most businesses I dealt with used out of date versions with security issues. One client came to me when someone got access to her installation and changed the payment modules so that they were receiving all of her payments! When I looked at the version of Zen Cart, I found that it was 6 versions out of date! This was the client mentioned above that we had to upgrade first to an intermediate version and then to the most recent version.

I Decide to Call it Quits

After going through three upgrade nightmares with Zen Cart in a row with different clients I decided that I’d had enough. I researched one or two Zen Cart specialists (both of whom charged 2-3x what I did) and referred my clients to them if they wanted to keep using Zen Cart. Today I do just a tiny bit of work for one legacy client that I basically feel sorry for.

WordPress as an Alternative

When a business person comes to me for an ecommerce site I almost always recommend going with WordPress as the CMS (content management system) and either WooCommerce or WP eCommerce as the plugin. Lately I’ve been leaning more towards Woo Commerce simply because I like how modular it is. There are plugins for it for most use cases and it is not difficult to create a custom plugin if necessary.

Best of all is the push-button upgrade and backup system available with WordPress. With WordPress as a CMS there is no reason for an install to be out of date. Security is much better and clients love that they can update everything themselves.

Coming Soon! New WordPress Plugin – BP Pretty Quotes

My newest plugin is still in development, but I’m pretty excited about it. BP Pretty Quotes is a set of shortcodes that results in nicely formatted blocks for quotations or other text you want highlighted. [bpiq author=”Ambrose Bierce” sourcename=”The Unabridged Devil’s Dictionary” source=”http://www.goodreads.com/work/quotes/865289″ position=”center” image=”http://beyond-paper.com/wp-content/uploads/2015/06/14403.jpg”]Quotation, n: The act of repeating erroneously the words of another.[/bpiq] [bpiq style=”leather” author=”Ambrose Bierce” sourcename=”The Unabridged Devil’s Dictionary” source=”http://www.goodreads.com/work/quotes/865289″ position=”right” image=”http://beyond-paper.com/wp-content/uploads/2015/06/14403.jpg”]Quotation, n: The act of repeating erroneously the words of another.[/bpiq]Currently the plugin has 7 different quote block styles: Default (the block above) Leather (example to the right) Swoosh Balloon Vinyl Polaroid Playbill Each can be centered, as above, or floated to the left or right. Depending on the style there are some additional formatting options that can be done, like color and width. I did not create the styles used in the plugin; the default style is from a bootsnipp snippet and the remaining six styles were adapted from this CoDrops article. As you can tell from the examples, some styles are more suited for different kinds of quotes than others. The Vinyl style, for example, is best for quotes that naturally break into two parts. The Polaroid style can accommodate a longer quote. If […]

My newest plugin is still in development, but I’m pretty excited about it. BP Pretty Quotes is a set of shortcodes that results in nicely formatted blocks for quotations or other text you want highlighted.

[bpiq author=”Ambrose Bierce” sourcename=”The Unabridged Devil’s Dictionary” source=”http://www.goodreads.com/work/quotes/865289″ position=”center” image=”http://beyond-paper.com/wp-content/uploads/2015/06/14403.jpg”]Quotation, n: The act of repeating erroneously the words of another.[/bpiq]

[bpiq style=”leather” author=”Ambrose Bierce” sourcename=”The Unabridged Devil’s Dictionary” source=”http://www.goodreads.com/work/quotes/865289″ position=”right” image=”http://beyond-paper.com/wp-content/uploads/2015/06/14403.jpg”]Quotation, n: The act of repeating erroneously the words of another.[/bpiq]Currently the plugin has 7 different quote block styles:

Default (the block above)
Leather (example to the right)
Swoosh
Balloon
Vinyl
Polaroid
Playbill

Each can be centered, as above, or floated to the left or right. Depending on the style there are some additional formatting options that can be done, like color and width.

I did not create the styles used in the plugin; the default style is from a bootsnipp snippet and the remaining six styles were adapted from this CoDrops article.

As you can tell from the examples, some styles are more suited for different kinds of quotes than others. The Vinyl style, for example, is best for quotes that naturally break into two parts. The Polaroid style can accommodate a longer quote.

If you are interested in beta testing this plugin drop me a line at diane@beyond-paper.com.

Here are examples, in order, of Swoosh, Balloon, Vinyl, Polaroid and Playbill:

[bpiq style=”swoosh” author=”Ambrose Bierce” sourcename=”The Unabridged Devil’s Dictionary” source=”http://www.goodreads.com/work/quotes/865289″ position=”left” image=”http://beyond-paper.com/wp-content/uploads/2015/06/14403.jpg”]Quotation, n: The act of repeating erroneously the words of another.[/bpiq]

[bpiq style=”balloon” author=”Ambrose Bierce” sourcename=”The Unabridged Devil’s Dictionary” source=”http://www.goodreads.com/work/quotes/865289″ position=”right” image=”http://beyond-paper.com/wp-content/uploads/2015/06/14403.jpg”]Quotation, n: The act of repeating erroneously the words of another.[/bpiq]

[bpiq style=”vinyl” author=”Ambrose Bierce” sourcename=”The Unabridged Devil’s Dictionary” source=”http://www.goodreads.com/work/quotes/865289″ position=”left” image=”http://beyond-paper.com/wp-content/uploads/2015/06/14403.jpg”]Quotation, n: The act of repeating erroneously <span>the words of another.</span>[/bpiq]

[bpiq style=”polaroid” author=”Ambrose Bierce” sourcename=”The Unabridged Devil’s Dictionary” source=”http://www.goodreads.com/work/quotes/865289″ position=”right” image=”http://beyond-paper.com/wp-content/uploads/2015/06/14403.jpg”]Quotation, n: The act of repeating erroneously the words of another.[/bpiq]

[bpiq style=”playbill” author=”Ambrose Bierce” sourcename=”The Unabridged Devil’s Dictionary” source=”http://www.goodreads.com/work/quotes/865289″ position=”right” image=”http://beyond-paper.com/wp-content/uploads/2015/06/14403.jpg”]Quotation, n: <span>The act of repeating erroneously the words of another.</span>

[/bpiq]

The Brain Enhances My Brain

As a tech enthusiast I try lots of new applications, most of which I stop using after a period of time. The Brain is different and I can definitely see myself using it forever. Yes, really. Forever. That is because it increases its value the more I use it. What is The Brain? The Brain is a mind map that operates like your real brain. Not familiar with mind maps? Check out this article. Where a mind map is essentially two dimensional, The Brain is multi-dimensional. Each item or “thought” in The Brain can be the parent, child and sibling of another thought. At the same time. For example, I have a thought called “WordPress”. I write code for a living and write custom templates and plugins for WordPress so I put the thought “WordPress” under a thought called “Coding”. But WordPress is also a Web Applications, so I have it as a child of “Web Apps” as well. So, if I click on either “Coding” or “Web Apps” I will see “WordPress” among other entries. But there is a lot of other information I associate with WordPress. There are code snipppets that I use over and over, clients for whom […]

As a tech enthusiast I try lots of new applications, most of which I stop using after a period of time. The Brain is different and I can definitely see myself using it forever. Yes, really. Forever. That is because it increases its value the more I use it.

What is The Brain?

The Brain is a mind map that operates like your real brain. Not familiar with mind maps? Check out this article.

”

” Click to view full-size

Where a mind map is essentially two dimensional, The Brain is multi-dimensional. Each item or “thought” in The Brain can be the parent, child and sibling of another thought. At the same time. For example, I have a thought called “WordPress”. I write code for a living and write custom templates and plugins for WordPress so I put the thought “WordPress” under a thought called “Coding”. But WordPress is also a Web Applications, so I have it as a child of “Web Apps” as well.

So, if I click on either “Coding” or “Web Apps” I will see “WordPress” among other entries. But there is a lot of other information I associate with WordPress. There are code snipppets that I use over and over, clients for whom I’ve created WordPress sites, Plugins I’ve written, information I’ve collected about troubleshooting WordPress-specific problems, etc. All of these “children” link to WordPress, but they also link to other thoughts in my Brain as well.

For example, “My Plugins”, which are plugins I’ve written for WordPress, is also a child of a thought called “Me” where I’ve collected everything that is personal to me. “Snippets” also falls under Coding->Snippets so if I click on the thought “Snippets” under Coding I will see a list of apps and languages that I have collected code snippets for.

Thus I can see relationships between pieces of information, just like my real brain makes connections. Not all of you are coders, so the above may not sound that useful, but The Brain offers free videocasts as well as short videos about using The Brain and most are business focused.

About Thoughts

Thoughts can be anything – a link (or even collection of links) to web information, images, audio, video, Word files, Excel spreadsheets, really anything. For my clients I have a link to the folder on my computer with their application files, a link to the signed project proposal, a link to their website, and a link to an Evernote page where I store information about the client. Sometimes I include links to their Linked In profile, Facebook page or Twitter handle. If there is a project manager, designer or someone else associated with the client I can link them as a sibling. Just by clicking on their “thought” in my Brain I can access everything I know about them, no matter where I have it stored.

Conclusion

I hope this makes you curious to try The Brain. While writing this article several more in-depth topics occurred to me, so expect more posts about The Brain in the future!

The Brain offers a 30-day free trial and I suggest you do try it out. Watch a few of the videocasts; I recommend watching The Brain 101 or joining one of the weekly videocasts. I’ve also found their recorded events very interesting.

Log Into Google My Business Regularly or Lose Your Listing!

Google confirmed that businesses that do not log into their Google My Business account regularly (at least every six months) may have their listings unverified. Google My Business is the service that provides extended information on brick and mortar businesses when local searches are done. If you are using Yoast’s Local SEO plugin you’ll want to make sure you are logging into your Google My Business account regularly to keep your listing active!

WordPress Plugin: BP Post to Google Map

A few months ago I reviewed a theme called Explorable which featured a Google map on which you could place markers. I didn’t like how the information for the map markers was collected; the designer had create a whole new post type separate from regular blog posts. I thought there might be a need for the ability to add latitude/longitude coordinates to regular posts in WordPress so that those posts could be displayed on a Google Map. That was the inspiration for BP Post to Google Map. Users can choose which posts to show on a map. Those that are shown have infowindow popups that can show featured images, title and the post excerpt. The title and “read more” text link to the main post and the infowindow can be customized with the general settings tab (found under Settings->BP Post to Google Map). The default map center and zoom level can also be set. Who Might Use This? A few minutes of brainstorming came up with: Photographers wanting to show images by location Writers to link their stories to locations Travel Bloggers Restaurant reviewers Vacation rental companies What’s Next? A premium version is in the works which will add the following […]

5 Ways to Add Customer Value to Your WordPress Website

What kind of website do you have? Is it basically a brochure for your company? Merely a group of page describing who you are, what you do and how to contact you? Step back and take a look at your site; does it have information worth coming back for? Promote return visits to your website by adding features and information tailored for your customers. This means, of course, identifying your customer. Put yourself in their shoes; what do they want to see or need to know? Next, start adding features, one at a time. I wouldn’t go overboard. Add one feature, see if it makes a difference in your stats, then add another. I’m listing only 5 features to add value to your WordPress website, but there are as many ways to keep your customers coming back as their are websites. Calendars Is your business event-based? Then you need at least a calendar of upcoming events; most likely monthly calendars as well. Calendars have other uses, though. Accountants can list upcoming tax dates, a website covering government affairs could list important meeting dates. My own business is service/consultative and I’ve been thinking about a calendar that shows upcoming online training, seminars […]

What kind of website do you have? Is it basically a brochure for your company? Merely a group of page describing who you are, what you do and how to contact you? Step back and take a look at your site; does it have information worth coming back for?

Promote return visits to your website by adding features and information tailored for your customers. This means, of course, identifying your customer. Put yourself in their shoes; what do they want to see or need to know? Next, start adding features, one at a time. I wouldn’t go overboard. Add one feature, see if it makes a difference in your stats, then add another. I’m listing only 5 features to add value to your WordPress website, but there are as many ways to keep your customers coming back as their are websites.

Calendars

Is your business event-based? Then you need at least a calendar of upcoming events; most likely monthly calendars as well. Calendars have other uses, though. Accountants can list upcoming tax dates, a website covering government affairs could list important meeting dates. My own business is service/consultative and I’ve been thinking about a calendar that shows upcoming online training, seminars and real-life conferences for people interested in WordPress and other kinds of internet technology.

Pro tip: See if paid events offer an affiliate fee – you could get paid for people who signup after going through your website.

”Curated Lists

I use List.ly on my site to easily collect information about free website fonts, icons, background textures, images free for commercial use, and websites running on WordPress. These lists started out for my own use, but I get quite a few hits on those pages and have even had people contact me to add their site to a list.

FAQs

Frequently Asked Questions or FAQs can be a great tool for any kind of business. Don’t be afraid to get down to minute detail in your FAQs to underline how transparent and informative your business is. I add a new FAQ to my list whenever I answer a question for someone on Twitter.

Calculators

If you have a food blog or website, how about some weight/volume conversion calculators? I know I can never remember how many teaspoons are in a tablespoon. Home decorators could offer calculators for the amount of paint needed or fabric required for ruffles. A winery could help calculate how much wine (and what kind) to buy according to menu and number of guests.”

Maps

”Brick and mortar establishments need a Google map on their site, along with a button to push to let the customer get customized directions, but any kind of localized business can do the same. Accountants can show locations of local IRS offices. Lawn service companies might provide a list of properties they manage that potential customers could drive by and look at. I could have a map showing WordPress meetups. A running store could have a list of running routes mapped out.

Conclusion

Brainstorming is a perfect way to find website add-ons that keep your users coming back. Don’t be afraid of dreaming big! I’ve done local walking map routes on Google Maps very inexpensively for clients. Once you have some ideas talk to your WordPress professional (like me). There may be a pre-made plugin just perfect for your need.

Google Maps, Clip-Path, The Brain and More

There is a list of personal projects on my desk and I’m lucky enough to have time to address them. Since most of them are works in progress I’ll just highlight them here. Google Maps Plug for WordPress This plugin, which lets users geocode WordPress posts to show on a map, is pretty much done. I’m letting it sit for a day before I review the code and write up the readme.txt before submitting it to the WordPress repository. This was a fun plugin to write and the next step is the premium version which will have lots of additional features. ClipPath and Blending Mode CSS clip-path is fascinating and I’ve found Clip Path tool that makes it easy to generate the coordinates. I already talked about it here and you can see some of my demos here and here. You can see a test of blending mode here. The Brain I discovered The Brain when I receive an invite to an online seminar and was instantly hooked. Think of it as a supercharged mind mapping tool. Instead of being 2 dimensional, The Brain adds a third dimension, making it easy to link information and show relationships. It isn’t a replacement for […]

How to Get Customer Reviews

Check out this infographic from Salesforce.com on how to get customer reviews. Click To Enlarge Via Salesforce

The Dark Side of Kickstarter and Being a First Adopter

I’m enthusiastic about technology, especially home automation and personal tracking. Since 2012 I’ve pre-ordered five items, whether through Kickstarter or from the website. I’ve been disappointed in nearly all of the cases. Coin I backed Coin in 2012. Coin touts itself as being able to replace all of your credit and debit cards. I’ve yet to see the product and the last update was in August of 2014 when the company sent a confusing email about something called “Coin Beta”. I see their site is still active, they are still taking orders, but I consider my investment in this product a lost cause. Cost: $50. Ninja Blocks Home automation! The ability to write your own code and put together your own system! So much promise, so little follow through. I did get my Ninja Block in 2011, but immediately afterwards the company changed focus to the Sphere. While they didn’t at first discontinue support for the Ninja Block and they assured everyone it would be compatible with the Sphere, not much was done in the form of drivers, etc once focus was diverted to the Sphere. Current status – see the Ninja Sphere, below. Cost: $150 (est – can’t find my […]

I’m enthusiastic about technology, especially home automation and personal tracking. Since 2012 I’ve pre-ordered five items, whether through Kickstarter or from the website. I’ve been disappointed in nearly all of the cases.

Coin

I backed Coin in 2012. Coin touts itself as being able to replace all of your credit and debit cards. I’ve yet to see the product and the last update was in August of 2014 when the company sent a confusing email about something called “Coin Beta”. I see their site is still active, they are still taking orders, but I consider my investment in this product a lost cause. Cost: $50.

Ninja Blocks

Home automation! The ability to write your own code and put together your own system! So much promise, so little follow through. I did get my Ninja Block in 2011, but immediately afterwards the company changed focus to the Sphere. While they didn’t at first discontinue support for the Ninja Block and they assured everyone it would be compatible with the Sphere, not much was done in the form of drivers, etc once focus was diverted to the Sphere. Current status – see the Ninja Sphere, below. Cost: $150 (est – can’t find my records).

Ninja Sphere

”I backed the Kickstarter in 2012 and despite extremely poor backer relations, including sporadic update information and hit and miss activity on the forums, I finally received my Sphere in late 2014. I don’t know what is in the box or whether I received everything promised because the company focused on a iOS mobile app instead of Android, which was useless to me. I decided to let the box sit unopened, but Ninja advised on the forums that they were shipping only partial orders, so I’m betting I got half of what I paid for. Last week received notification that the company had run out of money and was shutting down. Cost: $249

Trackr Bravo

I ordered the Trackr Bravo in October of 2014 from their website. The website said delivery would start January 7th. In early January I checked their site and saw no responses from the company on their forums regarding questions for their products. This despite the company advertising heavily that they were at CES. They also had ads on Facebook. After complaints on Twitter I finally received a canned response to a support ticket laying out delivery expectations for all of their products (not just the Trackr Bravo) and saying the Bravo would be starting February 2015. I was also informed I should check on Kickstarter to get updates. Note that I didn’t support it on Kickstarter and I didn’t know it was a Kickstarter. I’d ordered it from their own website!

Finally in March I received a notice that Bravos were shipping! Yay! It is now the last week of May and I still haven’t received my Bravo order. Cost: Around $100.

Jawbone UP3

”I pre-ordered the UP3 in October of 2014 from the Jawbone website as an early Christmas present to myself. The website and my emails said units would ship December 5th. On December 7th I sent and email inquiring as to the status and received a rather rude email back informing me that December 5th was just the date the units were expected to come from the factory to Jawbone. I complained on Twitter and about 4 days later I did receive a very nice phone call from Jawbone, apologizing for the email and offering $50 off the UP3 (everyone received this offer). It was explained that they were having trouble in manufacturing and the products would be shipped after the new year.

The next update was in April and I finally received my UP3 in early May only to find that the features I was most interested – notably the heart rate tracker – was non-existant. Basically my new UP3 is pretty much like my old Jawbone UP except I can’t wear the UP3 in the shower. It is wireless, which is nice, and the company has said that the heart rate feature will come in a firmware update. We’ll see. Especially since they’ve gone on to release UP4 instead of focusing on fixing the UP3 problems. Cost $194.75 less $40 rebate.

My Conclusions

Backing a Kickstarter like I did with Coin and the Ninja Sphere is always going to be risky. You are backing something that may and may not happen and I accept that risk. However when a company has a product on their website and is accepting pre-orders the risk is not stated. It should be. I assumed that the Bravo and UP3 were ready to go and just needed manufacturing to be complete. Nothing on their site said anything different so I was forced to assume risk that I may not have. In fact, as regards UP3 I probably would have gone with a FitBit product had I known the heartrate feature would be non-existent and the product would be delivered 5 months later than promised.

Along with the lack of transparency, the lack of communication is also troubling. In each of these pre-order cases I had to go to the company to find out what was happening. Jawbone probably handled it the best they could by calling me, apologizing for the rude email (which I’d tweeted about) and then giving the rebate to everyone. However after that point the company should have sent out updates at least monthly about the status, especially once the new year had come and gone.

Coin’s communication has been dismal and I’m pretty sure they are going to fail. They’re defensive on forums and their total lack of communication indicates deep organizational problems.

Will I pre-order in the future? Probably not from a company’s website because I can’t be sure what the status of the product is. I will still support Kickstarters for projects that interest me if I find the risk acceptable.

Tweetable Quotes in WordPress

I’m really loving the newish click to tweet quotes found on websites like SmartWebsiteMarketing.com. As show below, these take the form of a quote that you can click on to automatically tweet on your own account. A tweetable quote (or clickable tweet) is immensely useful for two reasons: You have control over the text and hashtag and need not depend on the reader to get the real gist of your content. The quote appears in a block; it stands out to readers. Thus even if the reader doesn’t click to tweet, you are getting eyes on the main point(s) you want to make. Implementing Tweetable Quotes in WordPress As you’d expect there are plugins. Click to Tweet is probably the most popular (the example above uses it). The main problem I have with it is that the plugin appends the complete URL to your tweet – it doesn’t use an URL shortener like bit.ly. Although Twitter will use their own shortener on it, the link could still take up to 23 characters. I’m also not a fan of the “via” part. As a proponent of short tweets, the long URL is unacceptable to me. In fact, when I use Click to Tweet on other […]

I’m really loving the newish click to tweet quotes found on websites like SmartWebsiteMarketing.com. As show below, these take the form of a quote that you can click on to automatically tweet on your own account.

” Clickable tweet seen on SmartWebsiteMarketing.com. ” This popup appears after clicking on the tweet.

A tweetable quote (or clickable tweet) is immensely useful for two reasons:

You have control over the text and hashtag and need not depend on the reader to get the real gist of your content.
The quote appears in a block; it stands out to readers. Thus even if the reader doesn’t click to tweet, you are getting eyes on the main point(s) you want to make.

Implementing Tweetable Quotes in WordPress

As you’d expect there are plugins. Click to Tweet is probably the most popular (the example above uses it). The main problem I have with it is that the plugin appends the complete URL to your tweet – it doesn’t use an URL shortener like bit.ly. Although Twitter will use their own shortener on it, the link could still take up to 23 characters. I’m also not a fan of the “via” part. As a proponent of short tweets, the long URL is unacceptable to me. In fact, when I use Click to Tweet on other sites I change the URL to a bit.ly URL.

Better Click to Tweet is very similar in look to Click to Tweet, but allows you to remove the “via” and provides an option to use the WordPress short URL. If you use a plugin like bit.ly shortlinks your WordPress short URLs will be bit.ly URLs.

Leslie McDaniel has a write-up on how to manually create clickable tweet links. There are quite a few steps though.

Twittee lets you control all aspects of your tweet, including the URL, but it attaches to text as a link – it doesn’t automatically put the quotable text into a formatted box. That isn’t to say you couldn’t do that yourself though.

So…What Do I Recommend Using?

Better Click to Tweet along with the Bit.ly Shortlinks plugin appears to be the best solution right now. In the future maybe someone can create a plugin with a built-in link shortener.

WordPress Plugin: BP Expire Category

I’m excited to announce my first WordPress plugin: BP Expire Category. It adds a box to the edit post page which allows you to assign a category with an expiration date. Why Do I Need That? My concept was to create a simple way to assign posts to a category like “Breaking News” or “Upcoming Events” along with a date when the category would be removed from the post. Those posts could be displayed on a separate category page, widget box or even custom coded into a template and you would never need to go back and remove the category from the post when the event or news is old. Both the post and the category remain unchanged; only the link between them is removed. The post will still show up as normal on your blog and the category stays attached to other posts. You can install the plugin directly from the WordPress plugin repository. If you find this plugin useful, please review it! Thank you!

Clip-Path Polygons Explained

After a long weekend off-grid, camping in the Cascades, I’m back in the office playing with CSS and clip-path polygons. I started out following the article/tutorial by Drew Minns, along with the CodePen. As I was wanting to just learn how clip-path polygons are constructed I made minor changes to the original, which you can see here. I also like the idea of using clip-paths applies to images as thumbnails or even navigation: (I used CSS blending mode markup for the hover effect on the first image). The beauty of using clip-path is that the images can be easily changed out without needing manual editing. They could even be dynamic. What is Clip-Path? In the example above the clip-path polygon makes the triangular indents about the navigation item when hovered over. In the next image the clip-path polygon is applied to trim parts of an image to create a comic-style text bubble. How Do I Create a Clip-Path Polygon? The clip path is a series of coordinate pairs, each pair separated by commas. It took me awhile to get my head around it, and this is how I envision it. Coordinates are grouped as X Y pairs where X is horizontal axis and […]

After a long weekend off-grid, camping in the Cascades, I’m back in the office playing with CSS and clip-path polygons. I started out following the article/tutorial by Drew Minns, along with the CodePen. As I was wanting to just learn how clip-path polygons are constructed I made minor changes to the original, which you can see here.

”

I also like the idea of using clip-paths applies to images as thumbnails or even navigation:

”

(I used CSS blending mode markup for the hover effect on the first image). The beauty of using clip-path is that the images can be easily changed out without needing manual editing. They could even be dynamic.

What is Clip-Path?

The clip-path property in CSS allows you to specify a specific region of an element to display, rather than showing the complete area. ~ CSS-Tricks

In the example above the clip-path polygon makes the triangular indents about the navigation item when hovered over. In the next image the clip-path polygon is applied to trim parts of an image to create a comic-style text bubble.

”

How Do I Create a Clip-Path Polygon?

The clip path is a series of coordinate pairs, each pair separated by commas. It took me awhile to get my head around it, and this is how I envision it.

Coordinates are grouped as X Y pairs where X is horizontal axis and Y the vertical axis.

”

Starting at the upper right corner, the coordinates would be X0 Y0 or 0 0. The distance away from the start point increased up to 100%. The bottom right corner’s coordinate is X100% Y100% or 100% 100%.

”

If I were going to create a square box my clip-path would look like this: clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%). Or, in visual terms:

”

Note that the end of a line is also the beginning of the new line – this is automatic so you don’t have to repeat it. The object you are drawing always wants to be closed, so the last coordinate you give it will create a line to the very first coordinate of the path.

”

Where it gets fun is when you are creating shapes. For example, here is the clip-path for the x shape hover in the first picture of this article:

clip-path: polygon(50% 20%, 70% 0, 100% 0,100% 20%,80% 50%,100% 80%, 100% 100%, 70% 100%, 50% 80%, 30% 100%, 0 100%, 0 80%,20% 50%,0 20%, 0 0, 30% 0);

If you take some time you can see that it comes out like this in words:

Start at the point defined by X50% Y20% and go to X70% Y0
From there go to X100% Y0
From there go to X100% Y20%
and so on…

What Other Clip-Paths are there?

Besides polygon you can define a circle, ellipse and inset rectangle using clip-path. See clip-path on WPD for more information.

What Browsers Support Clip-Path?

For webkit browsers you’ll need to use a prefix. This is the CSS markup I generally use:

-webkit-clip-path: polygon(…);
clip-path: polygon(…);

Browser support also depends on the shape. Polygons are supported by all current browsers except IE (of course). The circle clip-path is only supported in Chrome, Opera and Safari. See here for more information. Fortunately it deprecates well for IE – the image will just be shown as a regular box.

Blending Modes for Easy to Edit Images

Combining images and text used to be the domain of the graphic designer. Say you wanted an graphic where the image interacted with the text like this: You would need to send it to the designer to be created. If you wanted to change the text, back to the designer. Now in Chrome 41+, FireFox 36+, Safari 8+, and Chrome for Android you can use mix-blend-mode to create these images on the fly. You can see a live demo here of all of the images on this page that were combined solely with CSS. Here is the HTML for the above image: and here is the CSS: How could this be used? You could make a WordPress template where the post title floats over, and becomes part of the featured image. Or how about adding some javascript that changed the text, but not the image? If you are interested in something like this for your site, Diane@beyond-paper.com.

Combining images and text used to be the domain of the graphic designer. Say you wanted an graphic where the image interacted with the text like this:

”

You would need to send it to the designer to be created. If you wanted to change the text, back to the designer.

Now in Chrome 41+, FireFox 36+, Safari 8+, and Chrome for Android you can use mix-blend-mode to create these images on the fly. You can see a live demo here of all of the images on this page that were combined solely with CSS. Here is the HTML for the above image:


&lt;div id="water1"&gt;&lt;p&gt;Splashing&lt;/p&gt;&lt;/div&gt;

and here is the CSS:


#water1{
background:url(berry.png) no-repeat center bottom;
width: 417px;
height: 279px;
margin:auto;
}
#water1 p{
mix-blend-mode: difference;
font-size: 72px;
color: #fff;
padding: 50px 0 0 40px;
}

How could this be used? You could make a WordPress template where the post title floats over, and becomes part of the featured image.

”

Or how about adding some javascript that changed the text, but not the image?

If you are interested in something like this for your site, Diane@beyond-paper.com.

Is “The Fold” An Anachronism?

The concept of “above the fold” on a web page – the part of the page that is displayed first – is no longer relevant according to Luke Wroblewski. Think about it – where is the fold these days? With the wide variety of display options, from ultra-wide (or tall) desktop screens down to smart phones, the view changes and users expect to scroll down. Wroblewski cites studies that show most users start scrolling before the whole page loads; any call to action at the top of the page is going to be missed if that is true. So where are people looking? Right at or below the traditional fold or the bottom of the viewing area. I encourage you to read the entire article – Wroblewski points out that the call to action should be placed “where people become convinced to act”: The issue isn’t whether the call to action is visible. The issue is whether your call to action is visible at the point where someone has become convinced to take action. Another good design point – design your pages so users know there is more content. That means placing content across the folds to encourage vertical scrolling (never […]

Meta Descriptions and Search Results

Dr. Peter J. Meyers has an interesting analysis of meta descriptions – the block of text which appears in Google results and, we are told, should be around 155 characters in length. He analyzed 92,600 search results and found that most meta descriptions were truncated around 145-165 characters. He found that in many cases Google makes minor changes to meta descriptions, for example adding a date or the number of similar results to the beginning of the description. In one case Dr. Meyers found that Google had dropped the keyword when it appeared at the start of the description. More interesting are the outliers; some results display very long descriptions up to 380 characters. Dr. Meyers found that Google pretty much created all new text using list data from the page. According to Dr. Meyers, the meta description for this page reads as follows: Were you aware of all the uses of apple cider vinegar? From cleansing to healing, to preventing diabetes, ACV is a pantry staple you need in your home. Confused? You should be. Google seems to be trying to provide more informative information in search results. As Dr. Meyers says: Google is taking a lot more liberties with snippets these days, […]

WordPress Maintenance Mode Plugins

WordPress maintenance mode is used temporarily when upgrading core files or plugins. It can also be used when developing your site or making substantial changes that you don’t want your visitors to see. The default page is pretty basic, just a blank page with the following message: Another problem is that there isn’t an easy way to put your site into maintenance mode. Unlike CMS systems like Joomla, there isn’t a button to turn it on and off built into the WordPress core. The solution is to use a plugin. The WordPress plugin repository currently has 29 plugins for maintenance mode. Most of the plugins offer a basic and a pro version with the basic version allowing you customization of background, logo, title, message and often social media buttons and a newsletter signup box. Pro versions add sliders or video for the background, countdown timers and usually let you exclude certain pages from maintenance mode and allow users who are logged in as admins to view the real site. What Features Do I Need? I was going to do a short review of each of the plugins here, but they were all so similar, I decided instead to focus on what […]

WordPress maintenance mode is used temporarily when upgrading core files or plugins. It can also be used when developing your site or making substantial changes that you don’t want your visitors to see. The default page is pretty basic, just a blank page with the following message:

”

Another problem is that there isn’t an easy way to put your site into maintenance mode. Unlike CMS systems like Joomla, there isn’t a button to turn it on and off built into the WordPress core. The solution is to use a plugin. The WordPress plugin repository currently has 29 plugins for maintenance mode.

Most of the plugins offer a basic and a pro version with the basic version allowing you customization of background, logo, title, message and often social media buttons and a newsletter signup box.

Pro versions add sliders or video for the background, countdown timers and usually let you exclude certain pages from maintenance mode and allow users who are logged in as admins to view the real site.

What Features Do I Need?

I was going to do a short review of each of the plugins here, but they were all so similar, I decided instead to focus on what a site owner needs in a plugin.

Responsive Design

” Example of responsive WordPress maintenance mode design.

First and foremost, the design should be accessible for desktop and mobile devices. Most say they are responsive. Especially check those with countdown times – sometime they look very strange on mobile screens.

Countdown Timers

I’m personally not a fan of countdown timers – they add stress to development that isn’t needed. However, a lot of people like them and many plugins offer countdown timers for their coming soon pages. Only a few, WP Maintenance Mode being one, offer it as part of the basic package. For many packages you’ll need to pay for the pro version to get it.

Email Signup Boxes

A few plugins offer integration with services such as MailChimp to put an email signup box on the WordPress maintenance mode / coming soon page. This is a must-have and a great way to capture emails of many people who ordinarily don’t sign up for newsletters.

Wish List

None of the plugins I viewed allow you do only show the Maintenance/Coming soon page for certain pages. For example, say I’m adding a new section to my site it would be useful to have the pages in that section display a coming soon page instead of the actual pages. I could add the links to navigation and other pages and then release the section when it is ready to go.

Have you used a WordPress Maintenance Mode or Coming Soon plugin? Which did you use? What features would you like to see?

The #1 Way to Learn to Code

My first foray into computer programming was a blackjack game written in BASIC back in 1982 on a TRS-80 computer. It was insanely complicated, but by the end of the semester it worked and I’d learned how to think in BASIC. That experience taught me something important: [bctt tweet=”The best way to learn is by actually creating or fixing something you care about.”] When you care about something, when you want to fix something, you are motivated to learn and what you learn sticks with you. I learned HTML back in the 90’s because I though having a website was cool. Through books and questions on forums (probably BBS back then) I created my own site, revised it and re-created it. When Blogger came out I eagerly began blogging, learning about templates by customizing my blog. Blogger was pretty limited, so I tried a couple of different systems before getting my own domain and hosting and installing my first WordPress site. Learning PHP and MySQL followed naturally from experimenting with dynamic sites, followed by Javascript, JQuery, AJAX and now various frameworks such as Angular. It Takes Time For me, learning to code was a hobby that became a career. I couldn’t guess […]

My first foray into computer programming was a blackjack game written in BASIC back in 1982 on a TRS-80 computer. It was insanely complicated, but by the end of the semester it worked and I’d learned how to think in BASIC. That experience taught me something important:

[bctt tweet="The best way to learn is by actually creating or fixing something you care about."]

When you care about something, when you want to fix something, you are motivated to learn and what you learn sticks with you.

” We saved our programs on cassette tapes.

I learned HTML back in the 90’s because I though having a website was cool. Through books and questions on forums (probably BBS back then) I created my own site, revised it and re-created it. When Blogger came out I eagerly began blogging, learning about templates by customizing my blog. Blogger was pretty limited, so I tried a couple of different systems before getting my own domain and hosting and installing my first WordPress site.

Learning PHP and MySQL followed naturally from experimenting with dynamic sites, followed by Javascript, JQuery, AJAX and now various frameworks such as Angular.

It Takes Time

” My First Browser

For me, learning to code was a hobby that became a career. I couldn’t guess the time I put into it, but it was probably less than I would have spent if I’d gone to school to learn to code. I made the time because there were things I wanted on my blog and website. Silly as they seem now:

I learned to pull data from other people’s sites because I wanted to put the current weather on my blog.
I learned how to manipulate dates because I wanted a countdown timer on my website.
I learned about reading and writing to databases because I wanted to keep track of the membership of a group I belonged to.

Building WordPress Plugins

One of my goals for this year was to start writing WordPress plugins. I am familiar with WordPress, of course, and have written custom functions, but never an entire plugin. A couple of weeks ago I had an idea for a plugin that I cared about. Inspired by the Expire Tags plugin, I thought about building a plugin which would add a box to the edit post page for choosing a category and assigning a date for when that category would be deleted from the post. Neither the category nor the post would change, just the relationship between the category and post. It could be used for “Breaking News” or announcing other time-expiring information.

I’m almost done with that plugin and I’ve expanded my WordPress development skills. I learned how to add a table to the WordPress database, add an information box to the post edit page, collect information and save it to the database. I learned how plugins are installed and uninstalled. I learned how AJAX works within the WordPress system.

Most important, what I learned will stick with

Does Your Website Designer Control Your Hosting?

Several times a year I start working with a new client who has fallen out with their current website designer and wants to end their relationship. Let’s call that client Joe. About 3 years ago Joe needed a website for his business. He knew little to nothing about the process and hired a small, local web designer to “handle everything”. The web designer bought Joe’s domain name, set up hosting and built the site. Joe was happy at first, but as the years passed the web designer wasn’t responsive when changes were needed. In addition, the cost of hosting seemed really high compared to what Joe’s associates told him they were paying. Talking to the web designer didn’t help and Joe decided to find someone else to manage his site. Unfortunately, the web designer never gave Joe any passwords or login info for his hosting or domain. Emails to the web designer were no longer being answered at all and in phone calls the designer refused to provide the needed information. Eventually we found that the designer had just set up Joe’s site within her own hosting account – his account (and the accounts of other clients) were all bundled together, so […]

Several times a year I start working with a new client who has fallen out with their current website designer and wants to end their relationship. Let’s call that client Joe.

” via Flickr

About 3 years ago Joe needed a website for his business. He knew little to nothing about the process and hired a small, local web designer to “handle everything”. The web designer bought Joe’s domain name, set up hosting and built the site. Joe was happy at first, but as the years passed the web designer wasn’t responsive when changes were needed. In addition, the cost of hosting seemed really high compared to what Joe’s associates told him they were paying. Talking to the web designer didn’t help and Joe decided to find someone else to manage his site.

Unfortunately, the web designer never gave Joe any passwords or login info for his hosting or domain. Emails to the web designer were no longer being answered at all and in phone calls the designer refused to provide the needed information. Eventually we found that the designer had just set up Joe’s site within her own hosting account – his account (and the accounts of other clients) were all bundled together, so separating them was nearly impossible.

Eventually Joe’s lawyer was involved and we finally received a full copy of his website and the information needed to move his domain registration. The process took more than 3 months and was extremely stressful for Joe.

I assured Joe that he wouldn’t have to go through that again. I walked him through setting up an account through HostGator. On HostGator the billing and control panel logins are separate. I didn’t keep the password for the billing account, just the control panel and uploaded his site to the new hosting and moved his domain. If he should want to move on to another developer after me he only has to change the password for the control panel and FTP accounts to shut me out. Note: FTP accounts are used to upload/download files to your hosting account.

Retain Ownership of Your Hosting and Domain

When having a site created, make sure:

Your account is created with your name and information and isn’t mingled with that of your website designer
That your billing information is separate from the control panel
That you understand where to find and change FTP and control panel passwords
That you save all passwords and make sure you get new passwords if they get changed
Check your contract to language concerning the ownership of the hosting site and files hosted

By separating your hosting and domain name accounts from your website designer you are not only assured that you ultimately control the asset that is your website, but you will save yourself time and emotional capital when and if you change website designers.

How URLs Affect SEO

There’s an excellent article over at Quicksprout.com by Neil Patel about URL structure. While I encourage you to read the whole thing, here are some take-away points: Characters such as &, %, $, and @ in URLs make it more difficult for search engine to crawl. Use dashes not underscores in URLs. With dashes Google sees separate words when looking for keywords. With underscores Google runs the words together. Your total URL length should be between 32 and 50 characters (the whole URL) Having keyword in your URL is a “declining factor in rankings”. It doesn’t hurt, but doesn’t necessarily help either. The number of subfolders in a URL is not a factor in search engine ranking. However it may affect #3 above. Read the entire article. featured image by Chris Dlugosz via Flickr. CC 2.0

Tweak Your WordPress RSS Feeds

RSS (Really Simple Syndication or Rich Site Summary) is “a format for delivering regularly changing web content” (WhatIsRSS.com). Individuals use RSS feeds to read your articles in a reader like Feedly. There are also some applications that use your feed to aggregate content (Paper.li) or post to social sites like Facebook. RSS Feeds in WordPress If you use WordPress and a theme that meets standard you already have some feeds set up: http://example.com/feed/ – this is your main feed http://example.com/comments/feed/ – a feed of just your comments http://example.com/post-name/feed/ – a feed for a single post. Why? You might monitor a post to see if it changes. http://example.com/category/categoryname/feed – a feed for a category. Use to monitor just the information you want from a site. http://example.com/tag/tagname/feed – a feed for a tag. And you can also combine categories or tags: http://www.example.com/category/cat1,cat2/feed – feed for two categories http://www.example.com/tag/tag1,tag2/feed – feed for two tags Or view a feed of tags in a certain category: http://example.com/category/categoryname/feed/?tag=tagname As an example: http://beyond-paper.com/category/wordpress/feed/?tag=seo will provide a feed of my WordPress posts with a tag of SEO. You can control a few things about your feed from Settings->Reading. “Syndication feeds show […]

RSS (Really Simple Syndication or Rich Site Summary) is “a format for delivering regularly changing web content” (WhatIsRSS.com). Individuals use RSS feeds to read your articles in a reader like Feedly. There are also some applications that use your feed to aggregate content (Paper.li) or post to social sites like Facebook.

RSS Feeds in WordPress

If you use WordPress and a theme that meets standard you already have some feeds set up:

http://example.com/feed/ – this is your main feed
http://example.com/comments/feed/ – a feed of just your comments
http://example.com/post-name/feed/ – a feed for a single post. Why? You might monitor a post to see if it changes.
http://example.com/category/categoryname/feed – a feed for a category. Use to monitor just the information you want from a site.
http://example.com/tag/tagname/feed – a feed for a tag.

And you can also combine categories or tags:

http://www.example.com/category/cat1,cat2/feed – feed for two categories
http://www.example.com/tag/tag1,tag2/feed – feed for two tags

Or view a feed of tags in a certain category:

http://example.com/category/categoryname/feed/?tag=tagname

As an example: http://beyond-paper.com/category/wordpress/feed/?tag=seo will provide a feed of my WordPress posts with a tag of SEO.

You can control a few things about your feed from Settings->Reading.

”

“Syndication feeds show the most recent XX items” – change this to adjust how many items appear in your feed. 10-20 is about right.

“For each article in a feed, show…” – Do you want to show the full text of the post (including images) or just a summary (the excerpt)? There are two thoughts about this. Some people like to force people to click through the excerpt, returning to the website to read the entire article and generating page hits. I personally find this extremely irritating when reading blogs. Unless the excerpt is really, really compelling I almost never click through to the article. In fact, looking through my current list of 700+ feeds, there are 3 sites with partial feeds that I consistently click through to the article. Two belong to personal friends and one is a tech site which has the knack of putting compelling info in their excerpts.

Viewing your Feed

To view what your feed looks like, you will need to have a feed reader. I recommend Feedly – you access it through your browser. In Feedly’s list view my feed looks like this, with the featured images to the left:

”

But the featured image doesn’t appear when I view the content because Feedly doesn’t use the featured image on the article page:

”

Additionally, the images show up, but because I used CSS to align them, they aren’t in proper alignment (the image above should float left).

Fixing my WordPress RSS Feed

First I installed the WordPress plugin “Featured Images in RSS w/ Size and Position“. Be sure you get the right one, the author’s name is Rob Marlbrough. From the admin dashboard click on Settings->Featured Images In RSS Feeds and choose how you want your featured image to appear. Save changes and you’re done!

The second issue of my internal images not floating left or right is a result of WordPress presenting a properly formatted RSS feed. RSS feeds aren’t supposed to have formatting associated with them – the formatting is up to the feed reader. Unfortunately this is a headache when you want your feed to look nice in a feed reader.

I tried a couple of options, both of which involved editing the feed itself, which isn’t ideal, but wasn’t happy with the result. For now I’ll continue pursuing the problem – but if you have an insight into the issue, please let me know.

What Do You Want To Do?

I’m taking Seth Godin‘s Freelancer Course on Udemy. After ten years of freelancing work I feel I could use a refresher, a reorientation, a rejuvenation and this seems like a good start. There are exercises, of course, and Seth encourages us to put them “out there”, publish them, create conversations about our ideas. This first exercise explore who I am as a freelancer. What do I want to do? Technology is my passion. If we could afford a completely smart house (and the technology was all available), I’d be ecstatic. Since neither the money nor the technology is quite here, I want to learn everything I can about internet technology and smart home technology and get others excited about it as well. As I learn about new internet applications and technology, and increase my skills in current technology, I want to apply the knowledge to websites to make them fun, interactive and valuable to clients. Education is a key feature; I want to educate everyone about the wierd, wonderful world that is the internet so they can use it, not fear it. Who do I want to change, and how do I want to change them? My joy is working with people who know little about […]

”I’m taking Seth Godin‘s Freelancer Course on Udemy. After ten years of freelancing work I feel I could use a refresher, a reorientation, a rejuvenation and this seems like a good start.

There are exercises, of course, and Seth encourages us to put them “out there”, publish them, create conversations about our ideas. This first exercise explore who I am as a freelancer.

What do I want to do?

Technology is my passion. If we could afford a completely smart house (and the technology was all available), I’d be ecstatic. Since neither the money nor the technology is quite here, I want to learn everything I can about internet technology and smart home technology and get others excited about it as well. As I learn about new internet applications and technology, and increase my skills in current technology, I want to apply the knowledge to websites to make them fun, interactive and valuable to clients. Education is a key feature; I want to educate everyone about the wierd, wonderful world that is the internet so they can use it, not fear it.

Who do I want to change, and how do I want to change them?

My joy is working with people who know little about websites or website design, but have a vision of how they want the internet to work for them. Creating that vision for clients and teaching them how to use it is wonderful and we form a relationship where they come back again and again for help to add to or adjust their vision of their website. I want to change people who have little (or an inadequate) web presence into confident users, contributors and consumers.

How much risk (from 1 [a little] to 10 [bet everything]), am I willing to incur to make the change I seek?

The change is actually pretty small, so I can accept more risk. I’d say around 9.

How much work am I willing to do to get there?

And here we have it – the nitty gritty. Am I willing to put the time in to learn new programming methods and languages? Can I stick to it? Right now I can say I’m willing to put in 4 hours a day to advance my business – learning a couple of new languages and programming methods and researching/testing new technology.

For the risk and effort I’m putting into it, does this project matter?

Yes. With more knowledge and experience in more cutting edge areas of internet technology I can capture more substantial, interesting jobs. In educating and helping others I expand my circle of influence and the potential word of mouth referral that is essential in my business. Finally, which the effort is a lot for me, the risk is pretty minimal – I can keep my current client and income base.

It is possible?

Oh yes. It has been done before by people in far more precarious financial circumstances and with less free time.

A Day in the Life of a WordPress Developer

With more than 10 years of freelancing behind me, I’ve developed a work routine which, while the work itself differs, is pretty much the same from day to day and helps me as a WordPress developer not only get paid work done, but increase my skills and market myself. Getting Up to Speed I’m generally at my desk around 7 – 7:30 am and the first thing I do is check my email which GMail as part of a Google Apps account. I try to get to inbox zero by doing the following: Highlight all of the emails as if to delete them all. Click off the highlight for emails I need to read. This immediately gets rid of the numerous emails that are basically junk. Next, I work my way from the top down: If it is a digest, comic or something else short, I read it If it is a receipt I forward it to Evernote (Hint: Add hashtag+Receipt to the subject line will file the email in my Evernote Receipt folder.) and then delete it If it is a delivery notice, I put the delivery date on my calendar, along with the content of the email. (I just copy […]

With more than 10 years of freelancing behind me, I’ve developed a work routine which, while the work itself differs, is pretty much the same from day to day and helps me as a WordPress developer not only get paid work done, but increase my skills and market myself.

Getting Up to Speed

I’m generally at my desk around 7 – 7:30 am and the first thing I do is check my email which GMail as part of a Google Apps account. I try to get to inbox zero by doing the following:

Highlight all of the emails as if to delete them all.
Click off the highlight for emails I need to read.

This immediately gets rid of the numerous emails that are basically junk. Next, I work my way from the top down:

If it is a digest, comic or something else short, I read it
If it is a receipt I forward it to Evernote (Hint: Add hashtag+Receipt to the subject line will file the email in my Evernote Receipt folder.) and then delete it
If it is a delivery notice, I put the delivery date on my calendar, along with the content of the email. (I just copy and paste) and then delete it
If it is from a client I review it quickly. If I can answer a question or perform what is needed in less than 10 minutes, I just take care of it.

What is left in my inbox is stuff that will take more than 10 minutes to do. I generally take a quick break, review my local newspaper online, check the national headlines and my personal Facebook.

Getting up to speed generally takes less than half an hour.

Social Media Time

Starting in March I’ve been focusing on Twitter to build contact and relationships. This means carving out time. I use four tools to help me with Twitter, each with a different function.

TweetDeck

” feedly.com

Because I have a two-monitor setup, I generally have TweetDeck running on my second monitor with three columns: my general Twitter feed, my Notifications and as activity feed that shows Tweets containing “WordPress”. When I start up TweetDeck I check my notifications to see if there is anything I need to respond to. I then check the WordPress feed for anyone needing help. As a WordPress developer I’ve found some good clients responding to Twitter requests for help, but mostly I feel that helping people get familiar with WordPress is important. 99% of the people I help don’t turn into paying clients but that is fine.

Ignitwit

Ignitwit is a tool that helps you find people to follow. It has some issues, and I use it mainly to find people to follow. I try to follow 5-10 people a day.

RiteTag

RiteTag is an awesome app that coaches me to write better Tweets. Using it I can make sure I’ve added keywords that users actually interact with and add images to my tweets. With the Chrome plugin, it works with Buffer.

Buffer

I use Buffer to schedule tweets. I have a schedule of 10 tweet times and throughout the day I add tweets that look interesting. I try to only retweet other people’s tweets when my Buffer is full up. First, I don’t want to overwhelm my feed with a bunch of retweets. Second, I like to actually read the link I’m retweeting, perhaps rewording the tweet, adding hashtags and an image.

During my morning social media time I will pull out 3-4 tweets from TweetDeck that I’d like to tweet and set them up in Buffer.

All of this takes 15-30 minutes.

Feedly

” Feedly

I use Feedly to follow blog posts. I usually have around 250 posts to review, but the majority don’t interest me.

You are probably asking – shouldn’t this be a spare time activity? Not at all – the majority of the blogs I follow related to my business. Part of what I do is introduce clients to new applications and technology for their websites. Self-education is a very important part of my career, so I make time for it daily. My routine is similar to email:

I click on “All” and then use the “j” keyboard shortcut to scroll through the articles.
If I see one that looks interesting I will stop and review it quickly.
If it is longer than a few paragraphs or has information I want to review further I open the page in a browser tab, but I don’t read it now!
If it is short and looks interesting, I’ll add it to Buffer as a tweet. I can usually fill up my buffer for the day

At the end I’m generally left with 5-10 browser tabs of articles. I move these to a separate window and minimize it to look at later.

You might ask why I don’t just send those articles to Evernote or something like Pocket. I’ve found I forget about them if I do. I simply haven’t taken the time to add a “review Evernote saved stuff” to my daily routine. I might do that in the future. For now, I deal with tabs.

This usually takes an hour.

Work!

” Marco Monetti on Flickr

It is now about 9:00 am and I get down to work. My work is generally divided into ongoing projects and short one-offs. I return to my inbox and get rid of any junk that has accumulated in the past hour and a half. Now I review the emails from top down:

If the email pertains to an ongoing project, I read it and respond, if necessary, otherwise I add it to my project folder/checklist in Evernote.
If it is a one-off that should take a short time (scripting a form handler, etc), I do ahead and take care of it.
Requests for quotes may get an immediate response if only an informal response is needed. If a formal quote is needed I add it to my to-do list, send an email with any questions or clarifications, and let the person know when I should have the quote back to them.

Next I concentrate on my ongoing project(s) until around 4:00 (I eat lunch while working) or until my concentration fails. Due to the nature of programming as a WordPress developer, sometimes I need to walk away from the project and come back later – when this happens I’ll switch to another project, write up a quote, or take a walk.

While working I will take micro-breaks to scroll through my notifications in TweetDeck or my twitter feed, help someone who clicks on the “Chat” button on my website, etc. Overall, in this 6-hour period I usually get huge amounts of work done.

During my “work time” I don’t answer the phone (unless it is a relative) and I don’t look at my email. If I’m expecting an important email I’ll set up an alert in IFTTT to text me. I generally do look at texts, but I only answer the ones that are urgent. Most designers/project managers I work with respect this and use texting only for emergencies.

Between Projects

My work is always feast-or-famine. Either I have too much work all at once, or not enough. When I’m not working on projects for clients I try to keep busy:

Writing blog posts that I can schedule ahead
Working on WordPress plugins
Learning new programming languages, methods and applications

Social Media and Writing

By 4 pm my mind is usually fried if I’ve been doing hard-core coding, so I check my email and go back to TweetDeck, Buffer and Feedly. For email, unless it is something I can do quickly, or requires an immediate response, I save it for tomorrow.

I go back and read the articles I saved earlier and read them, tweeting them if I find them interesting, adding them to a “To Write” list in Evernote, or just writing an article for my own blog if it spurred an idea.

It is at this time I try to write at least one post for my blog. My rule is to have 4-5 posts scheduled, so if writing doesn’t happen on a day, there are still posts to fill in. I also do some writing on the weekends and on the days when between projects.

Both the social media and the writing help me wind down for the day. My husband works out of our home as well, so he is usually at his desk writing articles for his blogs as well and we share ideas or information we found on the internet.

Time: 1-2 hours, sometimes a little more if I’m writing.

A Note on Client Contacts

I have a strict rule about client contacts outside of regular work hours as a result of a client calling and texting at all hours of the day and night. While I generally review my emails in the evening and on weekends, unless it is truly urgent – urgent meaning the site is down – I don’t take action until the next work day. This has been the hardest parameter to enforce, but it is the one that saves my sanity the most.

Additionally, because phone calls disrupt my attention so much when I’m coding, I keep my phone off during the day. Clients know the escalating methods of reaching me are:

Email – majority of all information – perfect way to track a conversation
Text – for urgent problems – can be a “Call Me!!!” msg.
Phone Call – by appointment only. Always followed up by an email summarizing decisions/discussion

Thankful Thoughts for May

Warmer weather is here finally and we can have the front door open so I’m no longer the dog’s doorman. Seth Godin’s freelancer course, which is generating a lot of ideas. WordPress’ great documentation and the wonderful people who support developers Ignitwit. Though buggy, it has provide many new followers. What are your thankful thoughts for May?

WordPress Plugin Review: Feature a Page Widget

UPDATED: The plugin author, Mark Root-Wiley reached to let me know of some changes to the plugin because of my initial review. I’ve revised my review below. A few years ago I created a WordPress site for a client that wholesaled high-end cheeses and cured meats. Part of the requirements was a box on the home page on which they could display a product of the the month with an image, description and link to view more. I ended up custom-coding this into the template, but we are luckier today – we have a WordPress plugin called Feature a Page Widget. Despite the title, you can choose a page or a post to feature. The widget displays the featured image, excerpt and links to the content page/post. Installing the WordPress Plugin Not sure how to install a WordPress Plugin? Check out my FAQ. Make sure when you type in the name of the plugin on the Add Plugins page that you use the correct name and check the name of the author. There are a large number of plugins with very similar names and even I was confused at first. This is what the plugin should appear as: Using the Widget […]

UPDATED: The plugin author, Mark Root-Wiley reached to let me know of some changes to the plugin because of my initial review. I’ve revised my review below.

A few years ago I created a WordPress site for a client that wholesaled high-end cheeses and cured meats. Part of the requirements was a box on the home page on which they could display a product of the the month with an image, description and link to view more.

I ended up custom-coding this into the template, but we are luckier today – we have a WordPress plugin called Feature a Page Widget.

Despite the title, you can choose a page or a post to feature. The widget displays the featured image, excerpt and links to the content page/post.

Installing the WordPress Plugin

Not sure how to install a WordPress Plugin? Check out my FAQ.

Make sure when you type in the name of the plugin on the Add Plugins page that you use the correct name and check the name of the author. There are a large number of plugins with very similar names and even I was confused at first. This is what the plugin should appear as:

”

Using the Widget

Once installed and activated, go to Appearance->Widgets. A new widget appears in the list on the left.

”

Drag it into a widget area on the right and click on it to see the options.

”

I commend the author for the design of this widget – it requires no guesswork to use. Unfortunately such self-explanatory plugins and widgets are rarer than you might hope.

Back to the widget – though the select box says “Page to Feature” it actually lists your posts as well and displays icons in green to show if a post/page has a featured image and excerpt (otherwise they display as red). ~~If you don’t have an excerpt the widget will not pull one from the beginning of your post – so make sure you custom-write an excerpt for posts/pages you want to display~~. As Mark nicely pointed out (without saying RTFM), his FAQ page has links to code you can put in your functions.php file so that an excerpt will be pulled from the beginning of the post. Out of the box it won’t automatically create an excerpt. However, I think writing a custom excerpt is smarter – you can make it catchier and more “linkable” than just your intro text.

You can choose to display the thumbnail image with the text wrapped around it or as full width in two ways. The banner image shows a narrow version of the featured image, the big image shows… a big image. I told you it was self-explanatory.

You can click on/off whether to show the title, image, excerpt and read more link. In other words, everything about this widget is editable right from the widget box. Well, almost everything. I put an example in the footer to test it out:

”

The “Featured Article” is the widget title and the image and post title both link back to the post page. I don’t like the “Read more” link~~, however, and it isn’t editable without editing the core plugin files~~. Yes, you can add a filter to your functions.php page that allows you to change the “Read More” and “…” part. Also, the title after the “Read More” can be hidden with CSS (.screen-reader-text{clip: rect(1px, 1px, 1px, 1px);position: absolute !important;height: 1px;width: 1px;overflow: hidden;}). Not only is there an error, no space between “Read More” and “about”, but I’d rather not display the title again. This is a relatively small issue, however, and I am comfortable turning off the “Read More” altogether. When the author updates it seems like adding a custom box for the read more verbiage shouldn’t be too much of an issue and would make the widget perfect. Mark fixed the small spacing problem and issued an update. He also points out in his FAQ that ‘This widget is intended to be straightforward and avoid melting into “option soup.”‘ It really is a perfect solution to highlight featured Posts/Pages in widget areas. Here is the new, revised widget as it appeared as a test on my site:

”

Conclusion

Love this widget and look forward to including it future client projects.

Best WordPress Security Scheduling Tips You Will Read This Year

Yet another client’s WordPress site was hacked, this time by a disgruntled employee. The site’s owner set up an admin account for the employee, but never deleted it after firing the employee. Luckily the site had changed very little since the last back up ( 3 months ago) so I was able to restore it quickly, but it got me thinking about making time for WordPress security scheduling. The Problem with Not Having a WordPress Security Schedule Even though I stress site maintenance and go over what needs to be done, most clients do not sign up for a service contract once their site is up and running and they receive their training, opting to handle it themselves. Invariably what happens is that day-to-day work becomes more important than running updates, backing up their site or checking that files haven’t been changed. For example, after the recent security issues with Yoast’s SEO plugin I notified all of my clients to update immediately or contact me to do it for them. Despite that, two clients with websites critical to their business were not updated until I was asked to make some other changes to their site just this week. These clients are […]

Yet another client’s WordPress site was hacked, this time by a disgruntled employee. The site’s owner set up an admin account for the employee, but never deleted it after firing the employee. Luckily the site had changed very little since the last back up ( 3 months ago) so I was able to restore it quickly, but it got me thinking about making time for WordPress security scheduling.

The Problem with Not Having a WordPress Security Schedule

Even though I stress site maintenance and go over what needs to be done, most clients do not sign up for a service contract once their site is up and running and they receive their training, opting to handle it themselves. Invariably what happens is that day-to-day work becomes more important than running updates, backing up their site or checking that files haven’t been changed. For example, after the recent security issues with Yoast’s SEO plugin I notified all of my clients to update immediately or contact me to do it for them. Despite that, two clients with websites critical to their business were not updated until I was asked to make some other changes to their site just this week. These clients are in their site constantly throughout the day either processing orders or blogging but the updates didn’t get done.

My Tips for WordPress Security Scheduling

I”f their sites had been compromised their business would be non-existent, but both client still insist they can handle their security schedule themselves, so I sent them the following steps I follow when doing security for client websites.

Consistently run an off-site backup. For people who blog daily I recommend an automatic database backup every 3 days. Most clients decide on a 7, 14 or 30 day backup set. The system I use puts a compressed backup copy in a backup folder on the site and either emails me a copy or puts it in cloud storage like Box.net. Site files should be backed up at least every 30 days, I prefer two weeks.
Use an app to detect file changes. The app I use for myself and clients run its check weekly and I check each report that comes in. When you update plugins, themes, or post new blogs with images those changes are going to show up on the report. More important are changes to core files which show if your site has been hacked.
Implement brute force protection. Brute force attacks are when a hacker tries to guess your login using an app (or even manually). Brute force protection will lock out the IP that has more than a certain number of failed login attempts. These reports should be reviewed as well. Occasionally I use them to block IP address blocks or even countries if the problem is big enough (.ru addresses I’m looking at you).
Review your site to make sure it is working. Daily. A quick go-through is all that is needed and will also trigger any scheduled posts if necessary.
Monthly Review any contact forms and apps to makes sure they are working. Sometimes an update will break functionality on your site. Sometimes your hosting provider will make changes that means things don’t work anymore. You should occasionally check that your contact forms, newsletter email form, event listings, etc are all working correctly. Note: This may seem like overkill, but I’ve worked on contact forms that we determined weren’t working for over a year before anyone noticed. The form broke when the host updated their servers.

Translating this to a to-do list, this is my routine for clients:

Daily

Check site – front end click through 3-4 pages to make sure it is working.
Run any updates.
Check brute force logs (emailed to me) and add IPs to permanent blacklist if needed
If you have ecommerce you will want to check your orders to make sure you are getting your email notifications.

Weekly

Watch for weekly database backup in email;
- Store if received (I only store current + 1 previous backup)
- Manually run backup if not received
Watch for file change report
- Review for unusual changes if it comes in
- Manually run report/check settings if doesn’t come in

BiWeekly

Backup site files to off-site location (box.net or my hard drive)

Monthly

Test apps, contact forms and store checkout processes to make sure they are working correctly.

Conclusion

”While I’m focusing on WordPress security scheduling in this article, all of these are just as necessary for static sites or sites using other content managment systems. As the site owner, if you (or an employee) can’t delegate the time for security, I’d highly recommend outsourcing it. While following a security schedule won’t ensure that you site won’t get hacked, it will ensure that if something does happens you know about it immediately and can be restored without much downtime.

The #1 Best Tip for WordPress Bloggers

Follow the #wordpress twitter stream for awhile and you’ll see lots of people tweeting about “How to Get 1,000 Followers for Your Blog” or “A-List Bloggers’ Guide to Writing Posts” or something similar. I read the majority of the articles and they all boil down to one major thing: Post Interesting Content Often Yep, that’s it. Sit down and write blog posts. Have a post that appears every single day and make it about something that interests you. If it interests you, it will interest someone else. If you find your own post boring, you can bet everyone else will find it boring as well. Feeling dry? Writer’s block? Write about something off-topic. Once in a great while will not kill your brand; in fact it will probably add personality to your blog. There are a few other factors that go into getting visitors, of course: SEO, Images, Social Engagment, etc. but none of that will work if you don’t Post Interesting Content Often

Testing Your WordPress Site Usability

Testing your WordPress site’s usability doesn’t need to be time-consuming or expensive. You can easily do it yourself if you have the right mindset. The Right Mindset for Testing Your WordPress Site Usability Be open. Be humble. Observe, but don’t dominate your tester. Accept what they say and observe what they do without argument. Think of yourself as a fly on the wall of a user in their own home or office trying to use your site. Be ready to have all of your assumptions challenged. Finding Your Testers Your testers should reflect your users. If you have an ecommerce site that sells women’s jewelry, don’t choose elderly men as your testers. You’ll want women (of course) in 2 or 3 age groups. A website about tourist activities for children should have testers who are parents of young children. I discourage using relatives as testers because the resultant testing will get too personal. Try to use actual customers or strangers. Send a call out on Twitter or Facebook. How Many Testers Do You Need? Steve Krug, in his SxSW talk “Rocket Surgery Made Easy” claims you need no more than three. Shane Pearlman, in Smashing Magazine’s article “Help Us Help WordPress” […]

Web usability is the ease of use of a website. Some broad goals of usability are the presentation of information and choices in a clear and concise way, a lack of ambiguity and the placement of important items in appropriate areas. ~ Wikipedia

Testing your WordPress site’s usability doesn’t need to be time-consuming or expensive. You can easily do it yourself if you have the right mindset.

The Right Mindset for Testing Your WordPress Site Usability

Be open. Be humble. Observe, but don’t dominate your tester. Accept what they say and observe what they do without argument. Think of yourself as a fly on the wall of a user in their own home or office trying to use your site. Be ready to have all of your assumptions challenged.

Finding Your Testers

Your testers should reflect your users. If you have an ecommerce site that sells women’s jewelry, don’t choose elderly men as your testers. You’ll want women (of course) in 2 or 3 age groups. A website about tourist activities for children should have testers who are parents of young children.

I discourage using relatives as testers because the resultant testing will get too personal. Try to use actual customers or strangers. Send a call out on Twitter or Facebook.

How Many Testers Do You Need?

” Cover via Amazon

Steve Krug, in his SxSW talk “Rocket Surgery Made Easy” claims you need no more than three. Shane Pearlman, in Smashing Magazine’s article “Help Us Help WordPress” agrees. He found that by the third person his group was identifying where the tester would have trouble. Shane followed Steve Krug’s suggestions and found that his team spent 6 hours total testing their Events Calendar plugin broken up as follows:

Set-up – 1 hour
Testing (3 testers) – 3.25 hours
Notes – 45 minutes
Review – 1 hour

Define Your Scope and Purpose

Usability.gov has some useful information about defining the scope and purpose of your test.

Scope asks “what are you testing?” Are you testing the navigation? Content? Advertising? Search functions? A combination of these?

Purpose narrows down your “concerns, questions or goals” for the test. This can be quite broad, such as “Can users navigate to important information from the home page?” or specific: “Can users easily find the price of a certain product”?

Choose Your Device(s)

Will your testers be using desktop or laptop computers? Smartphones? Tablets? What screen sizes? What browser(s) do you want to test?

I suggest doing separate tests for desktop/laptop computers and mobile devices. If your site is responsive (and it should be) users will see different versions of the site and it will affect the conclusions that are drawn from the testing.

Write Your Scenarios

WordPress site usability testing consists of giving each tester 8-12 tasks to complete. Each task is a scenario, and is a brief description of a problem or issue that a typical users of your site may have.

You want to write your scenario in general terms, perhaps with some background information or context which gives the tester a chance to role play. Some scenarios I might use for Beyond-Paper.com might be:

You are the owner of a WordPress website and are looking for information about WordPress, as well as help making changes to your site. Please complete the following:

Sign up for Beyond Paper’s newsletter
Find an article about security issues in WordPress
Find examples of Beyond Paper’s previous work
Find out what services Beyond Paper offers
Find out if Beyond Paper accepts payment online.
Make contact with Beyond Paper

Read NNGroup’s article about creating task scenarios for more information.

Identify the Data You Want to Collect

” David Bleasdale on Flickr

From Usability.gov:

Successful Task Completion: Each scenario requires the participant to obtain specific data that would be used in a typical task. The scenario is successfully completed when the participant indicates they have found the answer or completed the task goal. In some cases, you may want give participants multiple-choice questions. Remember to include the questions and answers in the test plan and provide them to note-takers and observers.
Critical Errors: Critical errors are deviations at completion from the targets of the scenario. For example, reporting the wrong data value due to the participant’s workflow. Essentially the participant will not be able to finish the task. Participant may or may not be aware that the task goal is incorrect or incomplete.
Non-Critical Errors: Non-critical errors are errors that are recovered by the participant and do not result in the participant’s ability to successfully complete the task. These errors result in the task being completed less efficiently. For example, exploratory behaviors such as opening the wrong navigation menu item or using a control incorrectly are non-critical errors.
Error-Free Rate: Error-free rate is the percentage of test participants who complete the task without any errors (critical or non-critical errors).
Time On Task: The amount of time it takes the participant to complete the task.
Subjective Measures: These evaluations are self-reported participant ratings for satisfaction, ease of use, ease of finding information, etc where participants rate the measure on a 5 to 7-point Likert scale.
Likes, Dislikes and Recommendations: Participants provide what they liked most about the site, what they liked least about the site, and recommendations for improving the site.

Applying What You’ve Learned

It can be frustrating and humbling to find out that the fancy navigation system you worked so hard on is confusing to users, or that the testers couldn’t see your daily special even though it seems perfectly obvious to you. Remember how familiar you are with your own site – you already know everything about it and how to find the information. You aren’t your site’s user! What you think is obvious doesn’t count if your website’s users aren’t finding the information they need to user your product, hire you or otherwise stay on your site.

On the other hand, if 2 out of 3 of your testers passed everything, but the third had issues, evaluate if changes need to be made. Perhaps a few wording or formatting changes are needed instead of an overhaul.

So, make the changes suggested by the tests and run the tests again, with different test subjects.

Conclusion

If you used usability testing for your site, I’d love to hear your experience. Interested in organizing a WordPress site usability test? Contact me to help you set it up.

SMBs Neglect WordPress Sites and Flirt with Danger

WordPress Plugin Review: Expire Tags

I first heard about the WordPress plugin Expire Tags on Twitter and the name intrigued me. This plugin lets you assign a date to a post tag to expire that tag. The post does not disappear, but the tag is no longer associated with the post. In what scenario would you use this? Display Recent News Let’s say I want to have a page that just displays the most recent security issues for WordPress. As an issue comes up I can give it a tag starting with “SI” and ending with the date “21042015”. I also assign the post to the categories “WordPress” and “Security”. This issue is an important one, so I want it to show up on the security issues page for a month. I set the tag “SI21042015” to expire after 30 days. The issue won’t show up on the security page after 30 days, but it will still appear in my blog (which shows all of my posts). How would I show which posts to display on the security page if I’m using a separate tag for each day’s posts? The key is in the “SI”. I write a simple query that only looks for […]

I first heard about the WordPress plugin Expire Tags on Twitter and the name intrigued me. This plugin lets you assign a date to a post tag to expire that tag. The post does not disappear, but the tag is no longer associated with the post. In what scenario would you use this?

Display Recent News

Let’s say I want to have a page that just displays the most recent security issues for WordPress. As an issue comes up I can give it a tag starting with “SI” and ending with the date “21042015”. I also assign the post to the categories “WordPress” and “Security”. This issue is an important one, so I want it to show up on the security issues page for a month. I set the tag “SI21042015” to expire after 30 days. The issue won’t show up on the security page after 30 days, but it will still appear in my blog (which shows all of my posts).

How would I show which posts to display on the security page if I’m using a separate tag for each day’s posts? The key is in the “SI”. I write a simple query that only looks for tags that start with “SI” and display those.

Display Upcoming Events

I have a client that is a youth fastpitch organization with a page that displays upcoming tournaments and the teams signed up for each tournament. Right now that page is a static Page, not a series of Posts, but that means when a tournament is over it is deleted and team members can’t look back and see who played in past tournaments. I could advise the client to create a Post for each tournament and then I would recode the Page to show the Posts. If we assign a unique tag to each tournament we can have the listing expire from the upcoming tournament page, adding a Page that displays past tournaments – maybe even with scores and other information.

How Expire Tags Works

Install the plugin as usual and activate it. To add an expiration date to a tag it must exist, so first go to Posts->Tags and add your tag. Then go to Settings->Expire Tags and use the calendar icon to add the expiration date. Make sure you scroll to the bottom of the list and hit Save.

My Thoughts

I like the idea of this plugin, but I think the execution is a little clumsy. This is author Raul Martinez’ first plugin, however, and the first iteration. And it works as advertised! There are a few suggestions I’d like to make:

Description

Most important, I think a better description of the plugin and what it does is needed. The current description is concise, but I found it confusing:

Expire tag allow to expire your tag on a date basis. The tag will not be associated to your content but the tag will not be removed.

I’d suggest something more along the lines of:

Expire tags allows you to add a date to a tag to expire it. When the date is reached the tag is no longer associated with the post, but the tag is not removed and the post is not deleted. This could be used to display a custom query by tag of important issues or upcoming events.

Adding Dates to Tags

This is a little nit-picky, but the list of tags gets really long really quick. The current method of assigning a date to a tag consists of listing all of the tags with an input box and a datepicker. A cleaner scenario would be to use AJAX and an “Add Expiring Tag” button. Click on the button to add a new line with a select box listing all of the tags, the input box and datepicker appears. To add more expiration date, the user clicks on the “Add Expiring Tag” again. I feel this is a little more elegant, but I’m sure the author has considered it for a future iterations of this plugin.

Fleshing out the Documentation

As part of the documentation I’d also suggest providing some sample code that shows how to display the tags. One or two examples is fine. For example, to achieve the result I described above I might do something like this (this isn’t tested, mind you):

$the_query = new WP_Query( 'category_name=security,wordpress' );
if ( $the_query->have_posts() ) : ?>

	<!-- pagination here -->

	<!-- the loop -->
	<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
         <?php if(strstri(the_tags(),'SI')){  ?>
		<h2><?php the_title(); ?></h2>
               <!-- Display post content here...-->
         <?php endif ?>
	<?php endwhile; ?>
	<!-- end of the loop -->

	<!-- pagination here -->

	<?php wp_reset_postdata(); ?>

<?php else : ?>
	<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

This just does a query that returns posts that are in both of the categories “WordPress” and “Security” and only displays posts with a tag containing “SI”. If I wanted to think a little harder, a regex statement would be better for the filtering.

Conclusion

A nice plugin that solves a niche problem. Hopefully we’ll see more from this author.

Conweets – Find Conversations in Twitter

I had a conversation with a person on Twitter some time ago and yesterday I needed to reference it to remember something I’d promised to do. Scrolling through my timeline was too much of a chore, but I discovered Conweets, the really simple way to search for conversations between two Twitter users. You just connect your Twitter account with Conweets, search using two usernames and the conversation thread appears, nicely formatted! If you want to save the conversation you can screenshot it: Conweets is free, but needs donations to keep the conversations going – be sweet and send them a donation if you find them useful!

What’s on Your WordPress Dashboard?

The WordPress dashboard. So much space which gets so little use. Wouldn’t you like to make your dashboard more functional? Here are a few of my favorite things: Add Notes to your WordPress Dashboard I use WP Dashboard Notes to write reminders and my editorial schedule. It is very basic with a basic text box or a checklist with checkable boxes. Other than changing the color of the box there are no formatting options. However to add/edit a note you just have to click on it – no leaving the Dashboard. Dashboard Sticky Notes has not been updated in awhile, but it does work with WordPress 4.1.1. It uses an edit page similar to your post/page editor, so you can add videos, images and formatting to your notes. I actually like this better than WP Dashboard Notes, but I hate switching out of the Dashboard when I just need to jot a quick note. Note that if you use shortcodes to format your posts, they will not work on the sticky note. Add RSS Blog Feeds to your WordPress Dashboard I suggest a security feed like Sucuri so you can make sure you are always up to date and safe. In the past I’ve added […]

The WordPress dashboard. So much space which gets so little use. Wouldn’t you like to make your dashboard more functional? Here are a few of my favorite things:

Add Notes to your WordPress Dashboard

I use WP Dashboard Notes to write reminders and my editorial schedule. It is very basic with a basic text box or a checklist with checkable boxes. Other than changing the color of the box there are no formatting options. However to add/edit a note you just have to click on it – no leaving the Dashboard.

Dashboard Sticky Notes has not been updated in awhile, but it does work with WordPress 4.1.1. It uses an edit page similar to your post/page editor, so you can add videos, images and formatting to your notes. I actually like this better than WP Dashboard Notes, but I hate switching out of the Dashboard when I just need to jot a quick note. Note that if you use shortcodes to format your posts, they will not work on the sticky note.

” On the left: Dashboard Sticky Notes. On the right: WP Dashboard Notes

Add RSS Blog Feeds to your WordPress Dashboard

I suggest a security feed like Sucuri so you can make sure you are always up to date and safe. In the past I’ve added my own blog feed to my client’s WordPress dashboards, but I think that the feed is too general for clients. In the future I am going to just link client’s dashboard feeds to my security posts. That way only security issues will appear and hopefully it will be more likely to catch the client’s eye.

While there is at least one WordPress plugin that helps you put an RSS feed on your WordPress dashboard, I usually add a custom plugin similar to this tutorial. With a custom plugin I can control the formatting and add special formatting for certain tags – for example if I’m adding it to a client’s ecommerce site I can have posts with the ecommerce tag show up with a green background. For security issues I could add a red box and a bold, red title.

View Google Analytics Data on your WordPress Dashboard

Get a quick overview of your visitors with the Google Analytics Dashboard. It doesn’t have all of the functionality of Google Analytics, but is enough for 90% of all users.

Manage Your WordPress Dashboard Widgets

Click on the “Screen Options” button at the top of the Dashboard to view a pull-down menu with checkboxes for each widget appearing on your Dashboard. I always turn off At a Glance, Quick Draft, WordPress News and Welcome. I like the Activity widget because I usually blog ahead and I can see which post will publish next and what was recently published. This widget also shows your comments, which is somewhat of a timesaver.

Depending on the plugins you use you may have additional widgets. I use Gravity Forms and have a widget that shows form submissions. If you have an ecommerce plugin you will want to make sure you are seeing the dashboard widget that displays your orders and their status.

What I’d Like to See in a Dashboard Widget

I’d like a limited version of the WordPress Editorial Calendar that would show the upcoming week at a glance; what is scheduled, what is a draft, days with no posts scheduled. What about you? What would make the WordPress dashboard easier for you to use?

Curate Content with List.ly

I’ve been using List.ly for several years, but this month I sat down and reviewed my current lists, made some new ones and added them to my WordPress website. I’ve received some good comments about my lists, so I know they are being seen and used. What is List.ly List.ly is a way to aggregate information in a display where viewers of the list can vote on list items and even add items to the list. While so far my lists generally consist of links to websites, you can also add text, video, audio, profiles and places. I’ve found List.ly the easiest way to curate content and include it on my website. Curate Content? What Does That Mean? Any time you sift through a mound of information, selecting a few that are best for a situation and present those to someone you are curating content. Curating content is the natural way to write blog posts – identify a problem or question and then collect information that defines, answers or provides context for the issue. Organize the information you collected in a way that makes sense with some explanatory comments from you about why you chose the information and there you have a […]

I’ve been using List.ly for several years, but this month I sat down and reviewed my current lists, made some new ones and added them to my WordPress website. I’ve received some good comments about my lists, so I know they are being seen and used.

What is List.ly

List.ly is a way to aggregate information in a display where viewers of the list can vote on list items and even add items to the list. While so far my lists generally consist of links to websites, you can also add text, video, audio, profiles and places. I’ve found List.ly the easiest way to curate content and include it on my website.

Curate Content? What Does That Mean?

Any time you sift through a mound of information, selecting a few that are best for a situation and present those to someone you are curating content. Curating content is the natural way to write blog posts – identify a problem or question and then collect information that defines, answers or provides context for the issue. Organize the information you collected in a way that makes sense with some explanatory comments from you about why you chose the information and there you have a blog post with curated content. See “Curating Content for Easy Blog Posts“.

Take a look at this example. A law firm has created a list about traumatic brain injuries. In this case they have linked the titles of the list to original sources, but wrote a concise summation of the source information so readers can understand the important points quickly. (Note I’m only showing 3 points to keep the list to a resonable size – you can page and see the additional points]

[listly id=”9dd” layout=”full” show_header=”false” show_author=”true” show_sharing=”true” show_tools=”true” per_page=”3″]

Here is another example, in gallery view. The list’s author curated a list of Hindi Evergreen songs, uploading the video for each song.

[listly id=”Um” layout=”gallery” show_header=”false” show_author=”true” show_sharing=”true” show_tools=”true” per_page=”8″]

Promote Yourself with List.ly

In doing the research for this article I found a neat way to promote your own blog articles – create a list on List.ly and add your articles! To be useful you want to group your articles by content or topic. For example I could have two lists: one containing my WordPress articles and one containing my SEO articles.

Curating Content with List.ly

List.ly is easy to use. I have the Chrome plugin which allows me to add a webpage to a list while browsing. Embedding on your site is a matter of cutting and pasting code. If you use WordPress there is a List.ly plugin which formats the list as a part of the post or page. It is not embedded as an iframe if you use the plugin! This means that search engines will view the content in the lists. And let’s not forget about List.ly’s community. When you create a list it is viewable by everyone on List.ly unless you explicitly make it private. This gets more eyes on your list and, hopefully, referrals to your site.

To get the biggest benefit from List.ly you need to spend some time with your list. This is a “do what I say, not what I do” moment because some of my lists need work. Here are some tips:

Give your list a good title. Just like writing a title for your posts, your list title should be specific, catchy and feature your keyword or key phrase.
Use the description box and write a brief explanation of why you created this list.
Add keyword rich tags.
Edit the titles and descriptions for each item on the list. Why did you put the item on the list? Why is it in the position it is in?
Make sure each item has a good image. You can upload an image if the one that comes up automatically (as they do with URLs) is lousy.

Finally, using the premium service on List.ly allows you to embed lists in different formats. For most of my lists I prefer a gallery view, but for a how-to list or a list that has a narrative a different layout would be more appropriate.

You can view my lists at List.ly to see how I’m using them. Are you using List.ly? Have questions? Let me know in the comments!

The Problem with Pop-ups on Websites

An interesting link about curating content appeared in my Twitter timeline so I clicked on it to check it out. The site was professional, the first paragraph of the article interesting, but I lost interest almost immediately. Why? An overlay pop-up appeared asking me to sign up for their email newsletter. There was no time to really read the article and I had to click out of the pop-up before I could read the article. And I did that. And read the second paragraph. As I scrolled, another overlay pop-up appeared, asking if I wanted to learn more about something – I didn’t finish reading the pop-up or the article. I just closed the tab. Why keep reading if I’m going to keep getting interrupted? Why Use Pop-ups? Pop-ups are a good way to get some important information in front of your reader’s eyes. They can also be a good way to collect emails for your newsletter; according to this 2012 article the author saw a 14.47% conversion rate for popups. Pop-up Haters There is a significant number of people who detest popups on websites. As Copyblogger says: I would say add “…or be sold something they don’t want”. Using Pop-ups Effectively Now I’m […]

” This isn’t the site I was visiting.

An interesting link about curating content appeared in my Twitter timeline so I clicked on it to check it out. The site was professional, the first paragraph of the article interesting, but I lost interest almost immediately. Why? An overlay pop-up appeared asking me to sign up for their email newsletter. There was no time to really read the article and I had to click out of the pop-up before I could read the article.

And I did that. And read the second paragraph. As I scrolled, another overlay pop-up appeared, asking if I wanted to learn more about something – I didn’t finish reading the pop-up or the article. I just closed the tab. Why keep reading if I’m going to keep getting interrupted?

Why Use Pop-ups?

Pop-ups are a good way to get some important information in front of your reader’s eyes. They can also be a good way to collect emails for your newsletter; according to this 2012 article the author saw a 14.47% conversion rate for popups.

Pop-up Haters

There is a significant number of people who detest popups on websites. As Copyblogger says:

Your audience came to read your content (and, if it’s good enough, spread it to their friends and colleagues), not be instantly blocked from it by an offer they may not understand.

I would say add “…or be sold something they don’t want”.

Using Pop-ups Effectively

Now I’m not an absolute pop-up hater. I actually like them, especially if I found the content engaging and want to learn more. I do, however, object to pop-ups in overlays that block me from continuing with what I was doing. Here are my rules for using pop-ups on your site:

1. Pop-ups shouldn’t cover content or keep the reader from reading.

Alternatives include pop-ups that slide in from the side or bottom, covering white space or non-essential parts of the page.

2. Pop-ups should go away automatically after a short period.

If you ignore the pop-up it should gracefully fade (or slide) out after a maximum of 8 seconds. That is plenty of time to capture anyone that is interested.

3. Only show pop-ups to new visitors.

” Marco Monetti on Flickr

When they return later the same day or week the pop-up should not appear. I’ve seen pop-ups on a home page that appear every single time the page is accessed, even during the same browsing session. This is beyond annoying, this is rage-inducing.

The method of tracking who has/hasn’t seen a pop-up is done through cookies, so if the user has cookies turned off they are always going to see the pop-up. That is okay and the user should expect that. You can usually set the cookie to expire after a set time – a month is good – after which time the visitor is seen as new again. That is fine too. If they are only visiting your site once in a great while you do want to give them the offer again.

4. Don’t show pop-ups to people who have already signed up.

Once the visitor signs up for your service a cookie should be written for years in the future so they don’t have to see that cookie ever again. Again, this is only going to work as long as the visitor doesn’t delete her cookies, but at least you are trying to minimize your pop-ups behavior.

5. Limit the number of pop-ups on your site and only one pop-up per page!

As you saw above, numerous pop-ups on one page or pop-ups on all of your pages are going to drive your readers away.

Conclusion

Be thrifty and graceful with your pop-ups and you might just see your conversion rates jump. Let me know what you think about pop-ups in the comments, below.

WordPress Theme Review: RedWaves by Themient

Brand-new theme design group Themient released its first WordPress theme yesterday, RedWaves, and I must say it is very nice. The default layout displays post excerpts with a featured image to the left. The layout is appealing and I like the styling of the post meta information; the categories are in boxes and the author, date and comments feature icons. Note the page navigation – red and dark gray boxes which are eye-catching and a welcome replacement to WordPress’ standard navigation. Theme Customization and Options RedWaves’ theme options are simple to use, but a little simplistic. You can upload your icon and a favicon and have the option to make the top navigation bar “sticky”. A sticky nav bar will stay at the top of the page when the user scrolls down. Although I like the default display with the smaller image to the left and the excerpt, you can change it to display a full-width image: Setting for the articles include a box to display related posts by category or tags, toggling the next/previous navigation, adding an author box and toggle post meta information on single post displays. Layouts RedWaves comes with right sidebar, left sidebar and full width (no sidebar) layouts […]

” Click to view a large size screenshot

Brand-new theme design group Themient released its first WordPress theme yesterday, RedWaves, and I must say it is very nice.

The default layout displays post excerpts with a featured image to the left. The layout is appealing and I like the styling of the post meta information; the categories are in boxes and the author, date and comments feature icons.

Note the page navigation – red and dark gray boxes which are eye-catching and a welcome replacement to WordPress’ standard navigation.

Theme Customization and Options

RedWaves’ theme options are simple to use, but a little simplistic. You can upload your icon and a favicon and have the option to make the top navigation bar “sticky”. A sticky nav bar will stay at the top of the page when the user scrolls down. Although I like the default display with the smaller image to the left and the excerpt, you can change it to display a full-width image:

”

Setting for the articles include a box to display related posts by category or tags, toggling the next/previous navigation, adding an author box and toggle post meta information on single post displays.

Layouts

RedWaves comes with right sidebar, left sidebar and full width (no sidebar) layouts that you can assign overall to your site, and an option for a full width template for pages. Don’t like the red? Themient makes it easy to change that color.

Unfortunately there is only one widget area for this theme – the sidebar. RedWaves does include four custom widgets: Facebook Like Box, Popular Posts, Recent Posts and Social Icons which you can add to your sidebar. The Recent Posts widget is nice – adding a thumbnail and meta info to the list which could attract more eyes to your posts.

Optimized for Mobile

RedWaves looks great on mobile, displaying a fill-width image above the excerpt and a drop-down menu.

Overall, I like this WordPress theme. It would be perfect for a blogger who uses featured images or as a base for use by a WordPress professional as a parent theme with a child theme adding more functionality and layout options.

RedWaves by Themient is free.

Curating Content for Easy Blog Posts

Any time you sift through a mound of information, selecting a few that are best for a situation and present those to someone you are curating content. Curating content is the natural way to write blog posts – identify a problem or question and then collect information that defines, answers or provides context for the issue. Organize the information you collected in a way that makes sense with some explanatory comments from you about why you chose the information and there you have a blog post with curated content. Identify a Question or Problem Remember your English teachers telling your that you need a topic sentence? Identifying a question, problem or topic is the same as writing a topic sentence. I recently wrote an article about “Referrer Spam in Google Analytics“. There was an actual problem because I was looking at my Google Analytics data and noticed a strange referrer that was sending me over 200 links a day. My original question “what the heck is this site and are the links valid” turned into a blog post when I found out it was spam. Most of my articles start out this way. This article started out on a different post […]

Any time you sift through a mound of information, selecting a few that are best for a situation and present those to someone you are curating content. Curating content is the natural way to write blog posts – identify a problem or question and then collect information that defines, answers or provides context for the issue. Organize the information you collected in a way that makes sense with some explanatory comments from you about why you chose the information and there you have a blog post with curated content.

Identify a Question or Problem

”Remember your English teachers telling your that you need a topic sentence? Identifying a question, problem or topic is the same as writing a topic sentence. I recently wrote an article about “Referrer Spam in Google Analytics“. There was an actual problem because I was looking at my Google Analytics data and noticed a strange referrer that was sending me over 200 links a day. My original question “what the heck is this site and are the links valid” turned into a blog post when I found out it was spam.

Most of my articles start out this way. This article started out on a different post (coming up next week) where I talked about content curation and then realized people may not know who content curation is or how to do it. I was getting to far into explaining the how of curating content and decided that needed to be an article of its own.

Collect Information

Going back to my example, I did a bunch of searches on Google, starting with a search on the site that was spamming me. That linked to two articles which used the spammer’s site name. Those articles talked about referrer spam, so I did a search on that term. When I do searches for articles I generally open each item in a tab and see if it is relevant or adds new information. If it doesn’t add anything new that tab gets closed. Eventually I end up with a bunch of tabs of articles about my original problem.

Organize and Present the Information

”There are a couple ways to do this. I generally start writing my article with why I’m interested in the topic. In the example I explain how the spammer came to my notice. The topic generated its own organic organization – what is this spam? How did it get into Google Analytics? How does this even benefit spammers? How can I stop it?

The example article flowed almost exactly like this, but in other articles I pick out quotes from the original material that I researched and move them around with copy/paste until I feel they tell the story. Sometimes I use images form the sources, especially if it is an infographic or presents data in a way I can’t. Make sure you use captions or introductory text to where you got the images from. Linking the image to the original source is a good idea as well, but shouldn’t replace written reference.

In fact, when presenting information from your sources, make sure you reference your sources by name, provide links and make sure it is clear when you directly quote someone. Not doing this is plagiarism and dishonest. Besides, the internet runs on links and someone you link to may come and look at your article and comment on it. This community is why are you blogging in the first place – embrace it!

Add Your Personal Touch

Link together your curated content with your own conclusions or personal information. If resource #1 says X but resource #2 states Y, which do you believe? Or maybe you believe neither and have a different opinion. Writing these connections is what differentiates your articles and blog posts from the rest of the internet. At the end, try to sum up the answer to the question or the resolution of the problem in a few sentences.

Personally, I have a terrible time with ending articles. Usually I can write forever, but summing things up is difficult for me. When I’m really stuck I just restate the information in a short, concise manner. For example:

Conclusion

Adding curated content to your articles is a good way to get the juices flowing. Just identify the topic, do your research, organize what you found in your research and then link it all together with your personal touch in writing. Let me know in the comments how you curated content.

Adding WordPress Alt Tags to Images

Images are important for social media. Researchers found that tweets with an image bet an average 35% boost in retweets. I saw one article claiming that blog posts with images had more interaction, but no studies were cited. I always add images to my articles because they help fix the article in people’s minds, engaging the visual as well as intellectual parts of their brains. Properly formatted images also give you an SEO boost. Over at Yoast.com, Michiel Heijmans covers what is necessary to include images in an SEO optimized way. It includes: Finding the right image Assigning a file name Scaling the image & reducing file size Writing captions Adding alt text and title text Adding OpenGraph tags (you can do this right in the WordPress SEO plugin) In this post we will focus on the alt tag. The WordPress Alt Tag Issue Okay, we all agree that those things are necessary – but we have hundreds of old posts which don’t have any of those items. What do we do? First we need to understand how WordPress treats images in posts and in the media library. When you upload an image to the media library, the copy in the media library […]

Images are important for social media. Researchers found that tweets with an image bet an average 35% boost in retweets. I saw one article claiming that blog posts with images had more interaction, but no studies were cited. I always add images to my articles because they help fix the article in people’s minds, engaging the visual as well as intellectual parts of their brains. Properly formatted images also give you an SEO boost.

Over at Yoast.com, Michiel Heijmans covers what is necessary to include images in an SEO optimized way. It includes:

Finding the right image
Assigning a file name
Scaling the image & reducing file size
Writing captions
Adding alt text and title text
Adding OpenGraph tags (you can do this right in the WordPress SEO plugin)

In this post we will focus on the alt tag.

The WordPress Alt Tag Issue

” via Cambodia4Kidsorg at Flickr

Okay, we all agree that those things are necessary – but we have hundreds of old posts which don’t have any of those items. What do we do?

First we need to understand how WordPress treats images in posts and in the media library. When you upload an image to the media library, the copy in the media library is kind of a “master” copy. If you assign it an alt tag, change the file name, etc, it will use those settings going forward when you use the image in a post. However, the information associated with that image, the alt tag, caption, etc. is unique to the post or page it appears in. If you change the alt tag in a post, it will not effect other instances where you used the same image. Similarly, if you change the alt tag in the media library, the alt tags will not change in posts that are already in the system.

This is actually a feature, because you will want to use keywords in your alt tag that correspond to the keyword for your post. (For more on keywords, read this.) For example, let’s say you upload a picture of a heart and assign an alt tag like this: <img src=”heart.png” alt=”A picture of a heart” /> in the media library. If you use that image in an article about the WordPress Heartbeat API (focus keyword: wordpress heartbeat) you’ll probably want a tag like this: <img src=”heart.png” alt=”The WordPress Heartbeat gives me heartburn” />. But you may also use it when writing about how much you love WordPress: <img src=”heart.png” alt=”Five reasons I love WordPress” />.

Adding Alt Tags to Images in Old Posts

”There is a plugin called Bulk SEO Image which will add alt tags to all photos appearing in your past published posts based on criteria you give it, usually based on the name of the post. Note that it doesn’t, update the alt tags on the “master” image in the media library, just in the posts. This is actually good because you hopefully have included your focus keyword in your title. It isn’t ideal, but as an alternative to revisiting hundreds of old posts and manually updating the alt tags, it is pretty darn close.

Address the Problem Going Forward

Going forward, make sure you read the Yoast.com article I referenced above and change the file name, add a generic caption, title and alt text, but realize that you are going to want to change the caption, title and alt text to make it SEO friendly for the post you are embedding it.

WordPress’ Heartbeat Caused Me Heartburn

How I diagnosed slow loading pages and frequent error messages on my WordPress sites as a problem with the Heartbeat API.

Since around January I’ve been having a terrible time with my WordPress hosting. Timeouts, pages failing to load and a very slow site. In the past month it got so bad that I could not write a single post without my site going down several times. The errors I was getting included 400, 403, 500, 502, 503 and 504. Sometimes my site would just timeout, with a PHP error being returned.

I knew it was some kind of issue with traffic. While I don’t get many visitors, I could see through my control panel that my processes for the server were through the roof. If I manually shut down some of the processes my site would come back up.

WordPress seemed the issue. I deactivated the plugins on all 7 of the sites I have running from this hosting account but the problems persisted. I sent in a support ticket to my hosting service to have them take a look and my suspicions were confirmed – WordPress was the culprit.

WordPress Heartbeat

” by Franco Folini

Starting with WordPress 3.6 a “feature” called the WordPress Heartbeat API was added to allow WordPress to communicate between the browser and the server more efficiently. It is used for session management, revision tracking and auto savings, among other things.

In processes I was seeing lots of calls to admin-ajax.php, which happens to be the file that controls the conversation between the browser and the server. The problem is, this file gets called excessively which was putting strain on my server. Any time the browser is open with a page using the Heartbeat API, even if it is in a hidden tab, the page is making calls to the server. And the Heartbeat API isn’t just hooked into the admin side, it also occurs on the public side of your site.

You can see how this easily gets out of hand. If I have WordPress edit windows open for two of my sites and my husband has an edit window for his site, plus each of us may have the site open in our browsers, PLUS visitors come to our site…. well for seven sites you can easily see how the server gets overwhelmed.

Curing the Heartburn

My hosting company, Hostgator, identified the problem immediately, sending me log files and links to several articles. They also provided a fix – adding the following code on the last line of the core WordPress file admin/plugins.php to stop the Heartbeat API altogether. This was a good stopgap solution, but the minute WordPress was updated it would likely be overwritten.

A search found this hugely informative page from inmotionhosting.com which outlines the problem and suggests using a plugin called Heartbeat Control. There are detailed installation instructions here, but basically install the plugin, activate it and then look for the control panel under Settings->Heartbeat Control. Change the “control heartbeat location” to “Allow only on post edit pages” and then override the heartbeat frequency to 60 seconds.

Heartburn Cured!

And there, the problem is solved! There are a few caveats, however.

First, as the inmotion article suggests:

By default WordPress uses the Heartbeat API to manage things such as post locking so only one admin can edit a post at once, it’s also used for auto saving. Going forward the API could be used more and more by WordPress developers to handle certain tasks…

When WordPress updates keep an eye on how it works – you may need to tweak things.

Second, keep in mind that your posts aren’t auto-saving and posts may not be locked if more than one admin tries to access it at once. Remember to hit “Save Draft” while typing to save yourself grief.

Finally, for the above reasons this isn’t a total cure. Hopefully future versions of WordPress will address the Heatbeat API problem to reduce server load or at least give admins more control over how Heartbeat works.

WordPress Plugin Review: Easy Featured Images

WordPress offers the option for themes to display a featured image for posts and pages. According to WordPress: “a featured image represent the contents, mood, or theme of a post or page.” Sometimes a featured image is displayed at the top of a post or page, sometimes as a large block to the left or right – it really depends on the theme. What happens if you change to a theme that uses featured images, but you haven’t assigned one to your posts or pages? One alternative is to put a scrap of code in your functions file that checks if there is a featured image included, and if not grabs the first image included in your post and uses that as the featured image. While easy, this isn’t a good idea because that image may not be the best representation of your post. Another alternative to manually open each post and page, assigned the featured image and then update the post/page. If you have more than a handful of posts this is going to be a major headache. Easy Featured Images is WordPress plugin that lets you assign a featured image right from the page or post listing page. It […]

How I Removed 106 Broken Links In Two Hours

What is Google PageRank and How is it Calculated?

PageRank (yes it is spelled that way) is a link analysis system that ranks pages. It was created by Google founders Larry Page and Sergey Brin and patented by Stanford University. A page with higher PageRank is considered to be a better match for a search term and is placed higher on the search results page. PageRank is only one of an estimated 200 factors that Google’s search algorithm looks at when returning and ranking search results. How is PageRank Calculated? In a very basic sense, PageRank looks at links to the page that occur on other pages. It doesn’t stop there, however. PageRank also looks at the page that has the link and weighs that page for its authority for the link and the number of links on that page. Quality of Links This is complicated, so look at it this way: We are looking at the PageRank for Page A. Page A has content about Bees: buying bees, keeping bees, building beehives. Page B has a link to Page A on it. Page B has content about Buick Regals. Because Buick Regals have nothing to do with bees, it has no PageRank for “bees”, therefore it has less authority and won’t contribute […]

PageRank (yes it is spelled that way) is a link analysis system that ranks pages. It was created by Google founders Larry Page and Sergey Brin and patented by Stanford University. A page with higher PageRank is considered to be a better match for a search term and is placed higher on the search results page. PageRank is only one of an estimated 200 factors that Google’s search algorithm looks at when returning and ranking search results.

How is PageRank Calculated?

In a very basic sense, PageRank looks at links to the page that occur on other pages. It doesn’t stop there, however. PageRank also looks at the page that has the link and weighs that page for its authority for the link and the number of links on that page.

Quality of Links

” English: Nodes with links in two-dimensional plane of PageRank and CheiRank (Photo credit: Wikipedia)

This is complicated, so look at it this way:

We are looking at the PageRank for Page A. Page A has content about Bees: buying bees, keeping bees, building beehives.

Page B has a link to Page A on it. Page B has content about Buick Regals. Because Buick Regals have nothing to do with bees, it has no PageRank for “bees”, therefore it has less authority and won’t contribute much to Page A‘s PageRank. In fact, the other parts of Google’s algorithm might see this as a spam link or link farming and lower Page A‘s PageRank.

Page C is a page about honey and has a link to Page A. This is a more authoritative link and will likely help Page A‘s PageRank.

Page D is a page about bees, and itself has a good PageRank. If it links to Page A it will boost Page A‘s PageRank.

Quantity of Links

Each page has a certain number of PageRank points that it can pass on to the pages it links to. “If a page with 20 PageRank points links to one other page, that one link will transfer the full amount of link juice to that one other web page. But if a page with 20 PageRank points links to five web pages (internal or external), each link will only transfer one-fifth of the link juice.” (Bruce Clay)

Keep in mind that links on a page include all links – navigation, sidebar links, image links, etc. If you look at this page on my site, I count 26 links just in my header! They are:

Logo (to the home page)
Mail to link
Facebook
Twitter
RSS
21 links in my navigation

The content adds another 9 links (don’t forget to count next post and previous post links if you have them!). The portfolio bar has 6 links (4 links + previous and next links). The footer has 46 links!

So this very simple page has a whopping total of 87 links! If this page had PageRank of 20 it would only pass on around .23 PageRank points to any individual page it links to. In reality most pages are much less, only 1 or 2. There is a PageRank checker here, but I have no idea how accurate it is. There is also a PageRank indicator in the Google toolbar under advanced features. The greener the indicator, the better PageRank.

The conclusion is pretty clear – it isn’t the quantity of links, it is the quality of links.

But I Need Links for User Experience!

I wouldn’t get rid of any of those links on my page; I think they are necessary for my users. I may consider adding a rel=”nofollow” tag to the links to articles in the footer and possible some of the other links (see below for why I probably won’t bother). This tells Google not to pass PageRank to those pages, thus saving PageRank for pages that matter.

Link Farms Will Kill PageRank

Now you can see why link farms, spammy sites that include all sorts of link with little or no content, actually will hurt your PageRank. The page linking to your site is recognized as spammy by Google and may decrease your own PageRank.

Google penalties have caused many web owners to not only stop link building, but start link pruning instead. Poor quality links (i.e., links from spammy or off-topic sites) are like poison and can kill your search engine rankings. Only links from quality sites, and pages that are relevant to your website, will appear natural and not be subject to penalty. So never try to buy or solicit links – earn them naturally or not at all. ~Bruce Clay, What is PageRank?

Does PageRank Matter At All?

John Chow feels it doesn’t matter much in 2015:

PageRank, for most intents and purposes, just doesn’t matter all that much anymore and it seems like Google is giving PR progressively less and less weight. A site with a high PR can still easily get outranked in the search engine results page (SERP) by a site with a lower PR. And many sites that haven’t seen any meaningful update in years can still hold very high PR for some inexplicable reason.

…

Google, with updates like Panda and Penguin and others, has continued to shift its search algorithm to factor in other considerations. They’ve been punishing the keyword stuffers. They’ve been keying in on links where the anchor text is a little toorelevant. They’ve been paying far closer attention to social factors and how well the page is being shared. And while it seems like they’re punishing anybody that sells paid links, this doesn’t seem to be all that big a deal if the content is still relevant and provides value in more of an organic sense.

This is why I probably won’t bother adding rel=”nofollow” to any links on my page. I’m going to concentrate on providing good, original articles and interacting with people on Twitter. My analytics data shows a gradual rise in page views and time spent on my site and instead of trying to game my PageRank I can better spend my time doing research.

WordPress Theme Review: Explorable

Explorable is a unique, Google Maps based WordPress theme that adds a custom post type – listings – which are displayed on a map with big pins. Clicking on the big pin opens a box with the featured image for the listing and an excerpt of the content. The Home Page While the theme is optimized for a travel company or review site, I could definitely see this being used by photographers, travellers, authors or anyone whose content can be location-targeted. A little tweaking would be necessary here and there for these kinds of authors, and I provide information about those below. The links can be filterable by types, location and rating. As you can edit the types and location (think of them as categories) they could be used for different kinds of classifications with some small code changes for example: So instead of filtering by listing type you could filter by Year and Exposition Type. Or Subject Matter and Trip Name. You get the idea. The Listing Page The interior listing page features a header with the map, with the featured image superimposed: I’m not completely fond of the content layout – the top box feels a little formal to me, but […]

Explorable is a unique, Google Maps based WordPress theme that adds a custom post type – listings – which are displayed on a map with big pins. Clicking on the big pin opens a box with the featured image for the listing and an excerpt of the content.

”

The Home Page

While the theme is optimized for a travel company or review site, I could definitely see this being used by photographers, travellers, authors or anyone whose content can be location-targeted. A little tweaking would be necessary here and there for these kinds of authors, and I provide information about those below.

The links can be filterable by types, location and rating. As you can edit the types and location (think of them as categories) they could be used for different kinds of classifications with some small code changes for example:

Year
Expedition or Trip Name
Exposition type: Poem, fiction, history, images, etc.
Subject Matter: Nature, Architecture

So instead of filtering by listing type you could filter by Year and Exposition Type. Or Subject Matter and Trip Name. You get the idea.

The Listing Page

The interior listing page features a header with the map, with the featured image superimposed:

”

I’m not completely fond of the content layout – the top box feels a little formal to me, but it could be edited or deleted.

”

Also, the theme does not come with a widget that would display some sort of list of listings in a sidebar. Again, this can be added by someone like me.

Additional Goodies

Explorable is created by Elegant Themes, so it includes some great add-ons to the post/page editor so that you can add the following compenents to pages or posts:

Buttons (large, small and icon)
Content boxes
Accordion toggle boxes
Tabs
Slideshow (text and image)
Tooltips
Social Media buttons
Author Info boxes
Column layouts:
- One to four columns
- variable widths
Custom Icon Lists (like this one)
Pricing Tables
Testimonials
DropCaps
Quotes

Take a look at the demo page to see all of the options in action.

What’s the Verdict?

Explorable is an interesting WordPress theme, though I think Elegant Themes could have gone further to make it more usable by different groups by including more widget boxes and allowing editing of classification titles in the admin area. However – you are never going to find an absolutely perfect WordPress theme. If you are interested in displaying posts by location, this may be the theme for you.

One note: If you decide to change WordPress themes in the future you will probably need to convert the “listing” posts to regular posts or allow your new theme to display those posts in some way. You won’t lose anything, but keep in mind the conversion will add time and possibly money to the switch.

Interested in Explorable?

I can install Explorable on a test site on my servers for you to play with and can assist you in installing and customizing Explorable for your own website!

Contact me today!

FBI Issues Release on WordPress Security Issues

Yet another reason why you need to keep WordPress and plugins updated – the FBI reports that ISIL, the terrorist group, is targeting WordPress installations with old plugins or no security features. WordPress Security – What Can I Do? Perform backups. At least monthly – I prefer weekly. Files and database. Use a backup service that shows changes to your code. Review every report sent to you. I provide this service, including reviewing the reports, for $10/month or $15/bi-weekly. Log into your WordPress site at least weekly and run updates. Use secure passwords and usernames. Not just WordPress, but FTP and hosting control panels as well. Change those passwords at least quarterly! Change the name of your admin folder (I use iThemes Security for this). iThemes Security will also lock out brute force attacks (multiple attempts to guess your username/password). These days, all website security, not just WordPress security relies on constant vigilance, keeping your site updated, checking for unauthorized file changes and secure passwords. Please save yourself time, money and stress by logging into your WordPress installations now and running updates! WordPress Security Links [listly id=”4H6″ layout=”gallery” show_header=”false” show_author=”true” show_sharing=”true” show_tools=”true” per_page=”25″]

The Best Way to Learn WordPress

Bob Dunn over at Bobwp.com released the finding of his survey “How do you learn WordPress”. Unsurprisingly, people are most comfortable learning via screenshots and online text. I’ve found this true in my own work – I offer clients either a manual with step-by-step instructions, including screenshots from their own site, or a 2 hour online training session. The overwhelming majority choose the manual – it is something they can hand employees and can refer to again and again. Below is Bob’s infographic of his findings. What are your feelings on learning WordPress? Courtesy of: BobWP.com

Photo Quote Box

Browsing through Bootsnipp I found this code by msurguy for making cards for team members or employees for a website. This layout would be perfect for a quote box where you have an image of a person: Imagine using something like this as a callout of points in a larger article, floating the quote box to the left or right, or even in the middle with the text flowing around it. Interested in using this on your site? Contact me for more information.

Should You Build A WordPress Website in an Hour

Search for “build a wordpress website in an hour” and you’ll see hundreds of articles with tutorial and tips on building your own website. The authors aren’t wrong – WordPress is easy to use out of the box and it is possible to have a website up and running in an hour. My husband even did it for his blog site. But will the website you end up with match the vision of what you want in your head? If you think you will build a website for your business in one hour, five hours or even two months without previous experience with WordPress, CSS, HTML and PHP you will be sadly disappointed. Why Build Your Own WordPress Website? Build your own WordPress website if you want to play around with WordPress and understand how it works. My husband wanted to learn WordPress and decided to start with a personal blog. This is working out great for him – he can experiment with themes and plugins all he wants because he isn’t worried about branding or presenting a consistent face to customers. My own personal blog (sadly neglected right now) is the same way – it changes constantly and I play around […]

Search for “build a wordpress website in an hour” and you’ll see hundreds of articles with tutorial and tips on building your own website. The authors aren’t wrong – WordPress is easy to use out of the box and it is possible to have a website up and running in an hour. My husband even did it for his blog site. But will the website you end up with match the vision of what you want in your head? If you think you will build a website for your business in one hour, five hours or even two months without previous experience with WordPress, CSS, HTML and PHP you will be sadly disappointed.

Why Build Your Own WordPress Website?

” image by Roger Reuver

Build your own WordPress website if you want to play around with WordPress and understand how it works. My husband wanted to learn WordPress and decided to start with a personal blog. This is working out great for him – he can experiment with themes and plugins all he wants because he isn’t worried about branding or presenting a consistent face to customers. My own personal blog (sadly neglected right now) is the same way – it changes constantly and I play around with WordPress. Sometimes I break it, but I’m OK with that because I know I don’t have much of a readership and my business doesn’t depend on the site.

If you want to go beyond the basics, expect to invest time into learning CSS, HTML and perhaps some PHP. For my personal blog I have the experience to change the css and html and add or remove parts of the theme to fit a vision I have in my head. This is experience gained over 10 years of working with websites and programming applications. My husband has no experience with CSS or HTML and is teaching himself, but he gets frustrated between learning something and applying it to his site. Right now he is too busy with other things to mind much, but at some point he says he wants to “get it straightened out”.

There are many all-inclusive or specialty themes that you can find on the internet that will help you get a site that matches your vision, but expect to spend a lot of time to learn how the theme works. Some themes are very complicated. I worked with one recently that took me 10 hours to get the hang of. The client came to me after installing the theme because they couldn’t figure out how to use it.

Why Have a Professional Build Your WordPress Website?

Whether you have a template in mind or want a custom design, working with a professional will ensure that you end up with a WordPress website that matches your vision right from the start. If starting from a pre-made WordPress theme a professional should be able to get everything set up for you and working so that you can take over and manage it going forward. I offer training or a customize manual with screenshots from the client’s site as well as 30 days of free email support with all projects.

” image by Paul Townsend

Think of your WordPress website like a car. With no experience you can drive off the lot with a white Buick that looks like everyone else’s car. If you want to put some work into learning auto mechanics you can add features to the car and even change the color, but you’d expect to spend time doing it and the outcome might not be as professional-looking as it could be, but you are paying very little (or even nothing) for it. For a car that has the nice stereo, interior, air conditioning and a nice paint job you’re probably going to want to take it to a professional. Your WordPress website is just the same.

Your Business Site Should Look Professional

If you want to use WordPress to build a business website and don’t have CSS, HTML and PHP coding skills, please get professional assistance. Your site will reflect your business; in some cases it may be the only side of the business that your customers see. It needs to be right, it needs to be responsive, it needs to conform to usability standards and it needs to be optimized for search engines. It needs to be all of those things right out of the box, not six months down the road or when you have time.

Conclusion

I’m not against people building their own websites, however I’m all for educating those people about the time and energy they will need to put into the process in order to achieve the results they expect. If you building a site for fun or for personal use – go for it! Learning is never a waste of time. But be realistic. If you think you will build a website for your business in an hour or five hours or two months without previous experience with WordPress, CSS, HTML and PHP you will be sadly disappointed.

Referrer Spam in Google Analytics

I review my Google Analytics data monthly and noticed a spike in referrals from social-buttons.com. Please don’t go to that site – keep reading to find out why. By clicking on the link in Google Analytics I could see the referral path – meaning the page that the person clicked on to arrive on my page. Notice that this is just a slash (‘/’)? According to veithen.github.io this is characteristic of referrer spam. In very simple terms, the spammer sends a phony request to Google Analytics to report that someone viewed your page. Your site is never accessed at all. For those interested in an in-depth description of how this occurs, check out the article. The Purpose of Referrer Spam Why on earth would a spammer do such a thing? Because they will get paid when you click on a link (or enter it into your browser) to figure out where that link came from. Check this infographic out: How to Stop Referrer Spam Well, actually you can’t. You can, however filter it out in Google Analytics “by creating a filter that uses a criteria based on the Referral field” (veithen.github.io) or by overriding the page URI that is used in the […]

Will Google’s Algorithm Update Hurt Your SEO?

Ever wonder how search engines decide which site to put first when returning search results? Search engines like Google send out bots which visit the pages in a website. The information they are looking for is part of an algorithm which follows a series of steps to rank websites. Can I See Google’s Algorithms? Algorithms are proprietary – each search engine has their own and they are kept secret. Information about the algorithm is sometimes released in very general terms by the search engine company, but more often changes to the algorithm are only detected by what happens after it goes into effect. Google’s last big algorithm change – called Penguin – caused many websites to drop in search rankings, resulting a drastic drop in visits to their site. Penguin penalized users who used “blatant search engine optimization tactics” (Fast Company) like keyword stuffing and duplicate content. What Do We Know About Google’s Algorithm Change? The latest algorithm change, code-named Pigeon, actually went into effect in July 2014, and added a mobile-friendly tag to results when users searched from mobile devices. The new change (which will happen at the end of April) looks at the pages in your website to determine how mobile-friendly each page is. The […]

Ever wonder how search engines decide which site to put first when returning search results? Search engines like Google send out bots which visit the pages in a website. The information they are looking for is part of an algorithm which follows a series of steps to rank websites.

Can I See Google’s Algorithms?

”Algorithms are proprietary – each search engine has their own and they are kept secret. Information about the algorithm is sometimes released in very general terms by the search engine company, but more often changes to the algorithm are only detected by what happens after it goes into effect.

Google’s last big algorithm change – called Penguin – caused many websites to drop in search rankings, resulting a drastic drop in visits to their site. Penguin penalized users who used “blatant search engine optimization tactics” (Fast Company) like keyword stuffing and duplicate content.

What Do We Know About Google’s Algorithm Change?

The latest algorithm change, code-named Pigeon, actually went into effect in July 2014, and added a mobile-friendly tag to results when users searched from mobile devices. The new change (which will happen at the end of April) looks at the pages in your website to determine how mobile-friendly each page is. The pages that are deemed mobile-friendly will get a higher priority when users search from mobile devices.

For example, if there are two pizza places in my town and one has a mobile-friendly site, while the other doesn’t, the mobile-friendly site will show up first when I search for pizza in my town.

What Can I Do To Prepare?

”1. Make sure you have a functional mobile-friendly website.

You site looks different on different devices – what you see on a large desktop screen will look different on a smaller screen and even more different on a tablet or smartphone. Having a mobile-friendly site means adding code that kicks in and changes how your website looks and behaves at different screen sizes. While your menus work fine if you have a mouse, can smartphone users easily use your menus? Does your site appear so small as to be unreadable on a smartphone? Or does the user have to scroll left and right to see all of the content?

2. Test Your Site

Google has two tools that you can use to assess the mobile-friendliness of your site: Mobile Friendliness Test and Google’s Mobile Usability Report. According to Business2Community.com, “It is worth noting that Google hasn’t said what will change in their requirements on April 21st, but these tests are a great start to see if your website meets the basic standards for a mobile optimized website.”

3. Analyze Your Customer’s Behaviour

Your customers are usually searching for different information when using a mobile device than they would on their desktop. Mobile device users are more likely to be looking for a quick answer such as a location, business hours or phone number. If you are a brick and mortar business, make sure your address and phone number appears front and center on your mobile-optimized site with a link to Google Maps.

Do Social Media Buttons Really Work?

Every site I work on has social media buttons and until now I never have stopped to analyze their use. Share vs. Likes One reason not to put a “like” button on your posts is that users tend to click those instead of sharing the article to their timeline. The number in the “like” box will increase, but the user isn’t sharing your content with their associates. Most of the big sites I’ve looked at include a “share” button and have ditched the “like” button altogether. Some of the research I’ve read suggest people don’t use share buttons on articles. I use the share button for Facebook, but not for Twitter. I want my own flexibility for commenting and the way twitter buttons set up the tweet irritates me. The share button for Facebook makes sharing easier – it is usually formatted correctly and ready for my comment. If you garner less than 1,000 “likes” per post, why would you want that advertised on your articles? How Users Act If I go to a web page from a social media link, I’m far more likely to re-share the original link then to add a new one. Facebook and Twitter Spy on Your […]

As designers, it is our job to question why elements should exist. Sometimes we get so caught up in new ideas about navigation and animations that we forget to go back and examine more common elements—like social media buttons. ~Sam Solomon

Every site I work on has social media buttons and until now I never have stopped to analyze their use.

Share vs. Likes

”One reason not to put a “like” button on your posts is that users tend to click those instead of sharing the article to their timeline. The number in the “like” box will increase, but the user isn’t sharing your content with their associates. Most of the big sites I’ve looked at include a “share” button and have ditched the “like” button altogether.

Some of the research I’ve read suggest people don’t use share buttons on articles. I use the share button for Facebook, but not for Twitter. I want my own flexibility for commenting and the way twitter buttons set up the tweet irritates me. The share button for Facebook makes sharing easier – it is usually formatted correctly and ready for my comment.

If you garner less than 1,000 “likes” per post, why would you want that advertised on your articles?

How Users Act

The user doesn’t come out of nowhere. We don’t land on your page and then head happily to those social networks to promote you, just because you have a button on your site. We find content through Facebook, Twitter, Google+, Pinterest etc., not the other way around. ~Sweep the Sleaze, io.net

If I go to a web page from a social media link, I’m far more likely to re-share the original link then to add a new one.

Facebook and Twitter Spy on Your Users

” Photo by Sean MacEntee ”

If you visit any web page with a “Like” button on it (like this one), Facebook knows about it. And the buttons “could link users’ browsing habits to their social-networking profile, which often contains their name,”says Amir Efrati in The Wall Street Journal. ~via The Week, Is Facebook’s Like Button Spying On You

Um, definitely a “dislike”.

Have Your Say

I’m definitely interested in what you have to say about this issue. Do you use like or share buttons? For which social networks? Do they work for you?

Formatting Posts and Pages in WordPress

Adding formatting to your posts and pages is easy with the WordPress editor, though out of the box you may not realize all of the options you have. Activate the Kitchen Sink Take a look at the toolbar when you are in Visual Mode. If you only see one line of icons, click on the toolbar toggle so that you can see all of your options. Note that on the above example I have some extra icons that you most likely don’t see. These are plugins that I’ve installed that add some extra functionality. Once you have clicked on the toggle you should see something like this: Formatting WordPress Posts Using Styles The select box that currently says “Paragraph” has some styles in it that you should be using in your posts. Most important are the headings, especially Heading 2 and Heading 3. Headings help organize your posts and give the reader’s eye something to focus on when they are skimming your site. Heading are also given weight in SEO, which is why it is a good idea to include your keyword(s) in at least one of the headings. Why use Heading 2 and note Heading 1? If your theme […]

Adding formatting to your posts and pages is easy with the WordPress editor, though out of the box you may not realize all of the options you have.

Activate the Kitchen Sink

Take a look at the toolbar when you are in Visual Mode. If you only see one line of icons, click on the toolbar toggle so that you can see all of your options.

”

Note that on the above example I have some extra icons that you most likely don’t see. These are plugins that I’ve installed that add some extra functionality.

”

Once you have clicked on the toggle you should see something like this:

”

Formatting WordPress Posts Using Styles

The select box that currently says “Paragraph” has some styles in it that you should be using in your posts. Most important are the headings, especially Heading 2 and Heading 3.

Headings help organize your posts and give the reader’s eye something to focus on when they are skimming your site. Heading are also given weight in SEO, which is why it is a good idea to include your keyword(s) in at least one of the headings.

Why use Heading 2 and note Heading 1? If your theme is set up correctly, Heading 1 is already used by the page name or perhaps your logo. There should really only be one Heading 1 on a page, so you will want to use Heading 2 instead.

Other styles generally included out of the box are paragraph – which is the style for regular text and pre. Pre is used to write about code without actually executing that code, but retaining the code layout. For example, this snippet of a stylesheet retains its formatting using pre:

<style>
ol,ul{list-style:outside; margin-left: 1.5%; margin-bottom: 1.5em;}
ol{list-style-type:decimal;}
</style>

And in some themes pre may also have some specific formatting associated with it.

Adding Custom Styles

Adding custom styles isn’t difficult, but it does require that you are comfortable editing your functions.php file and know how to download and upload individual theme files. The following assumes you are using a child theme. Open the functions.php file of the child theme and copy/paste in this code:

// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
	array_unshift( $buttons, 'styleselect' );
	return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');

This will create a new select box in the editor just waiting for your custom styles.

Next, to the same functions.php file you will register your custom styles.

// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {  
	// Define the style_formats array
	$style_formats = array(  
		// Each array child is a format with it's own settings
		array(  
			'title' => 'Button - Red',  
			'block' => 'div',  
			'classes' => 'button red',
			'wrapper' => true,
			
		),  
		array(  
			'title' => 'Button - Green',  
			'block' => 'div',  
			'classes' => 'button green',
			'wrapper' => true,
		),
		array(  
			'title' => 'Button - Yellow',  
			'block' => 'div',  
			'classes' => 'button yellow',
			'wrapper' => true,
		),
	);  
	// Insert the array, JSON ENCODED, into 'style_formats'
	$init_array['style_formats'] = json_encode( $style_formats );  
	
	return $init_array;  
  
} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

This code adds the following to the edit bar:

”

When I select some text and click on the Button-Red item this happens:

This is a Red Button

What happened? Well, I haven’t actually added a style for a red button to my style sheet yet.

Add the Styles to the Style Sheet

In the stylesheet.css file I’ve added:

.button {
 -webkit-border-radius: 28;
 -moz-border-radius: 28;
 border-radius: 28px;
 font-family: Arial;
 color: #ffffff;
 font-size: 20px;
 padding: 10px 20px 10px 20px;
 text-decoration: none;
}

.red{
 background: #faa0a0;
 background-image: -webkit-linear-gradient(top, #faa0a0, #f00);
 background-image: -moz-linear-gradient(top, #faa0a0, #f00);
 background-image: -ms-linear-gradient(top, #faa0a0, #f00);
 background-image: -o-linear-gradient(top, #faa0a0, #f00);
 background-image: linear-gradient(to bottom, #faa0a0, #f00);
}
.red:hover{
 background: #ff0000;
 background-image: -webkit-linear-gradient(top, #ff0000, #faa0a0);
 background-image: -moz-linear-gradient(top, #ff0000, #faa0a0);
 background-image: -ms-linear-gradient(top, #ff0000, #faa0a0);
 background-image: -o-linear-gradient(top, #ff0000, #faa0a0);
 background-image: linear-gradient(to bottom, #ff0000, #faa0a0);
 text-decoration: none;
}

Now, we should see the red button:

This is a Red Button

Thankful Thoughts for April

The first day of each month I post a list of (mostly) tech and business things I’m thankful for. Happy April 1st! I hate April Fool’s Day because I’m extremely trusting and gullible and get taken in easily. So no pranks here! Just a list of things I was thankful for in the past month. Chrome’s “Reopen Closed Tab” feature – saves my butt daily TweetDeck – I keep it open on my second screen and can respond quickly to people needing WordPress help The “undo” button in GMail – both for sending emails or undeleting ones I just deleted (I get click happy, see #1) Skyrim – the best cure for anxiety attacks there is. Browser tabs – seriously what did we do without them? Right now I have 15 open. Editorial Calendar plugin for WordPress – I’m actually 5 days ahead in blogging with 15 stories in progress! ThinkGeek.com, even though their Steam Powered gaming cabinet is an April Fools Joke. AngularJs – was able to create a complicated app with ease for a client. Feedly – I thought I’d never survive the loss of Google Reader. I was wrong. My LG3 phone…at least until the LG4 comes […]

The 5 Reasons I Love WordPress

If you follow me Twitter, Facebook or this blog you’ll know I’m a fan of WordPress. Though I spend a lot of time messing around with other CMS and blogging applications, WordPress is my go-to for new client sites and all of my personal sites. Until now, I’ve never really thought about why I like WordPress so much. WordPress is Free Well, first of all I don’t have a lot of money and WordPress is free. This means I can download copies for testing and personal sites to my heart’s content. I have at least 9 copies on my development servers (not including copies of client sites) and run around 7 sites on the internet with WordPress. If I had to pay for WordPress I probably wouldn’t use it. WordPress Has a Huge Community A huge community of support means that lots of people work on WordPress to make it safe and lots of people are writing plugins and themes for it. Huge community support also means lots of places to go to ask questions or troubleshoot issues. WordPress Makes it Easy to Try Things Out The ease of installation (just push a button!) makes it fun to try out new themes […]

” Photo by Adriano Gasparri ”

If you follow me Twitter, Facebook or this blog you’ll know I’m a fan of WordPress. Though I spend a lot of time messing around with other CMS and blogging applications, WordPress is my go-to for new client sites and all of my personal sites. Until now, I’ve never really thought about why I like WordPress so much.

WordPress is Free

Well, first of all I don’t have a lot of money and WordPress is free. This means I can download copies for testing and personal sites to my heart’s content. I have at least 9 copies on my development servers (not including copies of client sites) and run around 7 sites on the internet with WordPress. If I had to pay for WordPress I probably wouldn’t use it.

WordPress Has a Huge Community

A huge community of support means that lots of people work on WordPress to make it safe and lots of people are writing plugins and themes for it. Huge community support also means lots of places to go to ask questions or troubleshoot issues.

WordPress Makes it Easy to Try Things Out

The ease of installation (just push a button!) makes it fun to try out new themes and plugins and writing new ones isn’t difficult for a moderately-experienced programmer. Most of the time I spend learning about WordPress is experimenting on my dev server. The documentation is top-notch and the snippets and information other programmers use are easy to find on the web.

” Photo by Adriano Gasparri ”

WordPress is a Framework

Because it provides a framework once you know how WordPress is organized, figuring out how to implement new designs or tweak templates or plugins is more efficient. I should say it is more efficient if the programmer has followed WordPress standards. If they have, I know where to find things and how to change them. My work is made much easier and my clients end up with a superior product, customized specifically for them.

Additionally, not only the front-end (the website itself) is changeable – I can make changes to the admin dashboard with minimal coding as well. For example, I usually replace the WordPress blog with my own blog on client installations. I can also hide areas of the admin that clients shouldn’t be changing, or add links to make it easier for them to do what they need to do.

” Photo by mtneer_man ”

WordPress Has Easy Updates

I love the push-button updating with WordPress. Because my site backs up automatically, I can update both WordPress, plugins and themes any time by just pressing the buttons. After struggling with Zen Cart’s awful update system, this is a relief.

Conclusion

Most of the people who say they hate WordPress have a vision of something in their head and can’t make their theme fulfill that vision. I liken it to a person going into a fully furnished wood shop and expecting to come out with a beautiful hand-crafted piece of furniture without any training or experience. You can use the wood shop to drive nails, cut wood and polish finished furniture, but if you want a really nice piece you need to either get training or have a professional help you.

Format Facebook Share Boxes with WordPress SEO

A new client recently asked me to troubleshoot why the pages on his site showed up with blank boxes – just the page title, when shared on Facebook. Usually when you share one of your pages on Facebook it looks like this: In the client’s case only the site title showed – no image or description. What was happening? Open Graph Tells Social Media What to Display When someone shares a page on Facebook, Facebook will go to the page and look for certain data in the header to tell it what to use for the title, the description, and the image. If it can’t find that data it may grab anything it can, or if it really can’t figure out your page, it won’t grab anything. For Facebook to know what you want to appear when you page is shared you need to include that data encoded in a special way. This article describes it well. If you have a static site you or your developer will need to add that code manually. Not sure what your page looks like on Facebook? Use this tool – just put in your own URL. I did this with my home page and was […]

A new client recently asked me to troubleshoot why the pages on his site showed up with blank boxes – just the page title, when shared on Facebook. Usually when you share one of your pages on Facebook it looks like this:

”

In the client’s case only the site title showed – no image or description. What was happening?

Open Graph Tells Social Media What to Display

When someone shares a page on Facebook, Facebook will go to the page and look for certain data in the header to tell it what to use for the title, the description, and the image. If it can’t find that data it may grab anything it can, or if it really can’t figure out your page, it won’t grab anything.

For Facebook to know what you want to appear when you page is shared you need to include that data encoded in a special way. This article describes it well. If you have a static site you or your developer will need to add that code manually.

Not sure what your page looks like on Facebook? Use this tool – just put in your own URL.

I did this with my home page and was shocked at what appeared:

”

The title should include my tagline
The description is pulled from the copy on my page and is not grammatically correct and too wordy.
The image being pulled in for my home page is actually from my portfolio and belongs to a client!

Not what I want people to see when they share my site, so I turned to WordPress SEO by Yoast to help.

WordPress SEO by Yoast Adds Open Graph Data Automatically

Assuming you have WordPress SEO by Yoast installed and activated on your WordPress site, log into your admin dashboard and click on SEO->Social. Click on Facebook and check the box that says “Add Open Graph meta data” and click “Save Changes”. Do the same for the Twitter tab.

Still in admin, find the page that you want to work with. In my case it is my home page. Open it in the editor, scroll down to the WordPress SEO by Yoast box and click on Social:

”

After filling in all of the boxes and clicking update here is what the Facebook share for my home page looks like now:

”

I used a screenshot from my site as the image. One note on the images – make sure they are bigger than 200px by 200px and be aware that when you change the image it takes a few moments for it to show up correctly.

My home page is updated, now to fix the remaining pages…

The 15 Most Common WordPress Mistakes to Avoid

Ajeet Yadav‘s article “The 15 Most Common WordPress Mistakes to Avoid” is a good basic checklist for people hosting their own WordPress installations. The 15 Most Common WordPress Mistakes to Avoid Read more

Effective Meetings with Your Website Programmer or Designer

Around 90% of my work as a web programmer occurs via email. I just ran the numbers and I’ve talked on the phone to just 3% of my clients and in person to just one single client. The rest of my work was done strictly through email. Of the small amount of phone meetings I have with clients, I would label maybe one or two as effective meetings. Most should have been accomplished via email. In fact, I always follow up phone calls with a confirming email so that I have a record of our conversations for future reference. In extreme cases, I’ve actually sat through meetings, afterwards emailing a summary of actions the client said they wanted, only for the client to completely change everything once they saw it in writing, rendering the phone call a waste of time and money. The trick to having effective meetings is decide if the meeting is necessary after all. Look at the following reasons you think you need to schedule a meeting: I Have a List of Changes to the Website/Application that I Need to Go Over With You. Send the list to the designer or programmer and ask them to let you know if […]

Around 90% of my work as a web programmer occurs via email. I just ran the numbers and I’ve talked on the phone to just 3% of my clients and in person to just one single client. The rest of my work was done strictly through email.

” Photo by raindog808 ”

Of the small amount of phone meetings I have with clients, I would label maybe one or two as effective meetings. Most should have been accomplished via email. In fact, I always follow up phone calls with a confirming email so that I have a record of our conversations for future reference. In extreme cases, I’ve actually sat through meetings, afterwards emailing a summary of actions the client said they wanted, only for the client to completely change everything once they saw it in writing, rendering the phone call a waste of time and money.

The trick to having effective meetings is decide if the meeting is necessary after all. Look at the following reasons you think you need to schedule a meeting:

I Have a List of Changes to the Website/Application that I Need to Go Over With You.

Send the list to the designer or programmer and ask them to let you know if they have questions. I do the work from the list you send me, so if you need to be specific, be specific in writing. If you are vague in writing and expect to clarify things in a phone call you’ll be charged for the phone call and the time clarifying what you need done in writing for you to approve before I actually start.

I Have a Question About X.

Ask the question in an email. Most of the time there is an easy answer. If the response you get doesn’t clarify things, then ask for a quick call for clarification.

” Photo by StockMonkeys.com ”

If You Really Require a Meeting, Have an Agenda.

Send the agenda to the programmer or designer well before the meeting so they can review it and get together any information that may be needed for the call. Group agenda items that involve the programmer or designer and put them at the start of the meeting so that they can leave the meeting when their part is addressed. I once spent two hours on a conference call where I said one sentence. Only one small part of the whole meeting needed my input. The client could have saved 2 hours of billing by just asking me those questions via email instead.

Ask for Meetings to Be Included in the Quote

I keep my project quotes lean by not including time for meetings in the pricing and stating that explicitly on my quote forms. If you expect meetings, make sure you let the programmer or designer know ahead of time so they can be wrapped into your initial quote, otherwise you may be surprised when you receive your invoice.

I’m often surprised by clients who don’t understand why I charge for meetings. Time is a commodity for programmers and designers just like it is for an attorney or an accountant. The time spent in an unpaid meeting is time that could have spent working on a project and getting paid for it. Unpaid meetings reduce a programmer or designer’s income.

Insist on Written Confirmation of Decisions Made in Every Meeting

Anything decided in a meeting should be written down and sent to everyone involved for review. I phrase my confirmations as “Action Steps”, each of which included who is responsible and can be checked off when done and approved. This need not be formal – sometimes just a “Pursuant to our call today, I am going to change the headers on the site to blue” type of email is needed.

Conclusion

Organize your thoughts and questions before scheduling a meeting. You may find that the meeting is unneeded or you can save money by making your questions efficient.

WordPress Site Owners Neglect Regular Backups and Maintenance

Websites, whether run on WordPress or static sites, aren’t something you can just put online and then never think about again. They need backups and updating, but is that being done? In a study of 503 WordPress customers done by Codeguard and reported on the Small Business Computing site: Less than 1/2 of the site were backed up regularly 47% reported backing up “every few months” 54% ran updates from once a week to every few weeks 70% had a plugin fail after an update 44% had no website or IT person to assist with site problems 22% said backups were unimportant to them 63% reported deleting files that were not backed up Despite this, 24% said that their sites were vital to their business and they “would pay ‘almost anything’ to completely restore their sites”. Here is just a sample of problems I’ve dealt with for clients who didn’t have site backups: A Zen Cart ecommerce site was hacked and she lost all of her images (hundred), which weren’t backed up anywhere. A static website’s home page was replaced with terrorist propaganda. A client tried to move her WordPress site herself without moving the database – several years of […]

The Importance Of XML Sitemaps In The Age Of Panda

XML sitemaps are basically a page written in a special code that tells search engines all of the pages on your site as well as when they have been updated. They are vital to your SEO because they ensure your content is indexed faster by search engines and help them know who the original content author is. As this article explains: It’s not uncommon for publishers to syndicate their content on other websites. Further, it’s also not uncommon for publishers to have their site’s content “curated” by other websites without a formal syndication agreement. Unfortunately, the definition of content curation is fuzzy at best. In a quick Google search for a recent Search Engine Land article, I found over 47 copies of the article on other sites. (Editor’s note: these are not authorized copies.) For every publisher site offering syndicated content or having content curated by others (with or without permission), the stakes could not be higher with Google. The Panda algorithm update focused in part on removing duplicate content from search engine results pages – meaning that if a site is not deemed the content originator, it’s at risk of being excluded from the results altogether. XML sitemaps are just one tool that […]

XML sitemaps are basically a page written in a special code that tells search engines all of the pages on your site as well as when they have been updated. They are vital to your SEO because they ensure your content is indexed faster by search engines and help them know who the original content author is. As this article explains:

”It’s not uncommon for publishers to syndicate their content on other websites. Further, it’s also not uncommon for publishers to have their site’s content “curated” by other websites without a formal syndication agreement.

Unfortunately, the definition of content curation is fuzzy at best. In a quick Google search for a recent Search Engine Land article, I found over 47 copies of the article on other sites. (Editor’s note: these are not authorized copies.)

For every publisher site offering syndicated content or having content curated by others (with or without permission), the stakes could not be higher with Google. The Panda algorithm update focused in part on removing duplicate content from search engine results pages – meaning that if a site is not deemed the content originator, it’s at risk of being excluded from the results altogether.

XML sitemaps are just one tool that can help content creators establish their stake as the content originator.

Just how profound can XML sitemaps be for indicating content origination?

In theory, the content originator would likely have the earliest indexed timestamp for the content. But take this example, from a publisher that is not using XML sitemaps, into consideration. The curating or syndicating site is having the same content indexed nearly 40 minutes earlier than the original content:

Click here to view original web page at searchengineland.com

After adding XML sitemaps to your website you will also want to submit your sitemap to Google Webmaster tools using these instructions.

I use the Yoast WordPress SEO plugin to automatically create XML sitemaps for my WordPress sites.

How WordPress Post Images Can Hurt Your SEO

What happens when someone clicks on an image you have uploaded and inserted into a post or page on your WordPress site? If you are like most people one of three things happens. The image may appear in a lightbox, with a gray background. The image may appear in its own page with a white background. The image may appear alone on a page with your header or footer. This is all controlled from the insert media dialogue box when you insert your image. If any of these three things occur, the link connected with the image is not leading to true content. This is a problem for your SEO. How Do WordPress Post Images Affect Your SEO? The problem is, the link for the image is leading to either the file location of the image itself or to an attachment page and because these are considered thin content by search engine they may be hurting your SEO! As Neil Matthews points out: …Google can also index these pages and add hundreds of very low quality pages into the index for your site. If you add 1-2 images per post that is an additional 100-200% of pages that are classed as thin content by Google. On these pages […]

What happens when someone clicks on an image you have uploaded and inserted into a post or page on your WordPress site? If you are like most people one of three things happens.

The image may appear in a lightbox, with a gray background.
The image may appear in its own page with a white background.
The image may appear alone on a page with your header or footer.

This is all controlled from the insert media dialogue box when you insert your image.

”

If any of these three things occur, the link connected with the image is not leading to true content. This is a problem for your SEO.

How Do WordPress Post Images Affect Your SEO?

The problem is, the link for the image is leading to either the file location of the image itself or to an attachment page and because these are considered thin content by search engine they may be hurting your SEO! As Neil Matthews points out:

…Google can also index these pages and add hundreds of very low quality pages into the index for your site.

If you add 1-2 images per post that is an additional 100-200% of pages that are classed as thin content by Google.

On these pages you will see a single image, a few lines of title text and that is all, if Google sees your site stuffed with thin content pages it will assume your site is of low quality and apply a penalty.

Google considers the following thin content:

Automatically generated content
Thin affiliate pages
Content from other sources. For example: Scraped content or low-quality guest blog posts
Doorway pages

The first item, which I bolded, is what we need to worry about.

How Do I Fix this Problem?

When you add an image to a post or page you can choose where clicks on the image goes – you can even remove the link altogether. In the image below you can see where the options for this are.

”

I’d suggest choosing the “None” option for most images. If I’m including a logo for a company in an article I will make the link go to the company’s website. As this involves manually changing the option every time you insert an image this solution is fine for images going forward, but what if you forget? Or what about the images already in posts on your site? There are two solutions to the WordPress post image problem.

Change the WordPress Post Image Default

For everything going forward I prefer to change the default to none. Type yourdomain & wordpress folder/wp-admin/options.php in your browser bar, scroll down to image_default_link_type and change the box to say none. Scroll all the way to the bottom to save and then check that it did save. In my case it would not save. I suspect my theme sets this in one of its files, so I had to add the following code, courtesy of Andrew Norcross, to my child theme’s functions.php file:

function rkv_imagelink_setup() {

	$image_set = get_option( 'image_default_link_type' );

	if ($image_set !== 'none') {

		update_option('image_default_link_type', 'none');

add_action('admin_init', 'rkv_imagelink_setup', 10);

To apply this fix the WordPress post images already posted, copy/paste this code into your functions.php file:

add_filter( 'the_content', 'attachment_image_link_remove_filter' );
function attachment_image_link_remove_filter( $content ) {
 $content =
 preg_replace(
 array('{<a(.*?)(wp-att|wp-content\/uploads)[^>]*><img}',
 '{ wp-image-[0-9]*" /></a>}'),
 array('<img','" />'),
 $content
 );
 return $content;
 }

This fix is pretty cool because it will still let you assign custom URLs to your images when needed.

Redirect WordPress Attachment Pages

If your default WordPress post images appear in an attachment page, a page that looks like your site but only has the image on it as content, install the WordPress SEO plugin (which I’ve talked about extensively) and once it it activates click on SEO->Permalinks. Choose “Redirect attachment URL’s to parent post URL”.

”

This will work for all of your images – past and future.

Create a Custom Attachment Page

You could also create a custom attachment page and even include some content on the page if you want to use custom fields. WPBeginner.com has an easy to understand article here on how to set up the attachment page. Adding the code for custom fields is covered here and could be used to add information about the WordPress post image. I imagine the custom attachment page is probably best used by people in the photograph, arts, or fashion fields to add details about the images. Make sure you are adding substantial information so that the page is not considered thin content. Also make sure your content is not simply a cut-and-paste of the content in your original article, otherwise you’ll be dinged for duplicating your content.

Broken Links on Your Site? How to Find Out.

Broken links are the bane of every website, and is one of those boring things web developers check after putting the site live and before handing it off to the client. Whether you blog or not, I recommend running a check for broken links at least yearly, preferably more often. If you use WordPress and try out different themes make sure you run a broken link check each time – sometimes the navigation will break when you change themes. WPossible has a great article on broken link checkers, how and why links break and the results the author experienced after fixing broken links.

The Three Types of Pagination in WordPress Articles

If you write long articles or posts in WordPress you should consider how you want those posts to display. There are three main types of pagination in WordPress for your individual articles: One long post One post that has multiple pages One post that loads your content incrementally (called infinite scrolling) What are the pros and cons of the different types of pagination in WordPress? One Long Post This is the default and what most people use. Often you will have an excerpt on your main blog and the reader will click through to a single page with the entire article. The advantage is that the user only needs to click once to read your entire article, but often articles can get unwieldy and keeping your place difficult. On mobile sites I’ve noticed that while the content will load quickly, third party ad services load later and, as they load, may force the page back to the top, even when the reader has scrolled down reading the article. This happens at the site of my local newspaper and I hate it! Page load time can also be a problem if your article contains a lot of images: photographs, charts, etc. These […]

If you write long articles or posts in WordPress you should consider how you want those posts to display. There are three main types of pagination in WordPress for your individual articles:

One long post
One post that has multiple pages
One post that loads your content incrementally (called infinite scrolling)

What are the pros and cons of the different types of pagination in WordPress?

One Long Post

” View full infographic at Kissmetrics.

This is the default and what most people use. Often you will have an excerpt on your main blog and the reader will click through to a single page with the entire article. The advantage is that the user only needs to click once to read your entire article, but often articles can get unwieldy and keeping your place difficult. On mobile sites I’ve noticed that while the content will load quickly, third party ad services load later and, as they load, may force the page back to the top, even when the reader has scrolled down reading the article. This happens at the site of my local newspaper and I hate it!

Page load time can also be a problem if your article contains a lot of images: photographs, charts, etc. These add interest and clarity to your writing, but also add weight to the page, causing it to load more slowly. Kissmetrics has some great articles about page speed and SEO.

One Post that Loads Content Incrementally

This option loads only the part of the content that is in the reader’s window and loads additional content as the reader scrolls down. It lightens up the page load time, but not as much as using multiple page, mostly because of the coding that is needed to achieve the effect. Page speed still is better than just one long post. Unfortunately, enabling this option for a single post is difficult to implement in WordPress. There are a couple of plugins that will implement incremental scrolling for your entire blog home page, but this is a problem for SEO and usability reasons.

First of all, the plugins I tested call up one post at a time and as you scroll they then unload the previous post and call the next. There is no real page for the post, making it difficult to create links to individual articles. SEO is a nightmare – search engines don’t scroll, they just load the page, so they may not see all of your content.

One Post with Multiple Pages

Picture a magazine article with the story covering several pages. Presenting your content in multiple pages provides a way to break your content up into easier-to-digest chunks. Page load time is much better because you are not loading all of the images at once. Navigation forward and back makes it easy for readers to refresh themselves about previous content.

” Example of article pagination in WordPress

Multiple pages will also garner you multiple page hits from one visit and if you use Google Analytics you can view how much of the article your readers actually viewed. A word of warning – don’t use pagination just to garner clicks! It gets annoying. Cracked.com generally does it correctly, dividing up their long list posts into two or three pages, max.

If you are planning to monetize your WordPress website with adverts, then being able to show a high number of page views and total number of pages per session will increase the potential revenue your site could generate.

Click here to view original web page at www.google.com

Of the three types of pagination in WordPress I prefer this option, though I rarely use it myself. Depending upon your theme, you may be able to use it without a plugin just by adding <!––nextpage––> to your post in text view (not visual view) where you want your page breaks.

My theme has built-in support for tabs, so I could create multi-page articles using tab, but I find this ugly and counter-intuitive.

” From Your Ultimate Guide To Organizing Long WordPress Content And Blog Posts

Most users are better off using a plugin like Advanced Post Pagination. I recommend the Pro version at $12 because it allows you to add an image to the “next page”, “previous page” buttons as well as title the buttons and provide a short description.

” Advanced Content Pagination

Conclusion

Pagination makes your articles more readable, increases page load speed and can garner you more clicks. Are you using pagination in WordPress? Tell me about about it in the comments.

Cross-Site Scripting Vulnerability Discovered In WordPress Photo Gallery Plugin

Another day, another security issue, this time in a popular WordPress photo gallery plugin. As always, your best security practice is to update your plugins regularly and check your site at least weekly, if not daily. Can’t do that? Contact me for an inexpenive maintenance package. With over 12 million downloads, Photo Gallery is one of the most popular WordPress plugins; users should be sure to upgrade to the latest version. FortiGuard Labs disclosed a vulnerability today in the WordPress Photo Gallery plugin that could potentially be used to gather information from system administrators. With […] Click here to view original web page at blog.fortinet.com

Why and How Hackers Target Websites

I deal with hacked websites all the time and the first question clients ask is “why my site?” The sites in question are always small businesses, often local, and their owners don’t understand how hacker even found their site. What Hackers are Looking for When They Hack a Website According to David Anderson, founder and lead developer at UpDraft Plus, hackers are looking for three things: Free Computing Power Ability to Churn out Spam To Serve Up Viruses The scripts that hackers install on a hacked site let them do some combination of those three things. But how do they decide who to target? Who and Why Hackers Target a Website It depends upon the type of hacker, says Chris Pogue in an article at Nuix.com. He says there are 4 general kinds of hackers: Geopolitical Hackers (nation states/hacktivists) chose your site because they don’t like what you represent or where you live. Retaliation Hackers don’t like what you have to say Financial Hackers are looking to make money by taking your stuff or serving up spam Opportunity Hackers do it just because they can. Your site or hosting was insecure so they exploited the opportunity. How Hackers Find a Website to […]

I deal with hacked websites all the time and the first question clients ask is “why my site?” The sites in question are always small businesses, often local, and their owners don’t understand how hacker even found their site.

What Hackers are Looking for When They Hack a Website

” Photo by devdsp ”

According to David Anderson, founder and lead developer at UpDraft Plus, hackers are looking for three things:

Free Computing Power
Ability to Churn out Spam
To Serve Up Viruses

The scripts that hackers install on a hacked site let them do some combination of those three things. But how do they decide who to target?

Who and Why Hackers Target a Website

It depends upon the type of hacker, says Chris Pogue in an article at Nuix.com. He says there are 4 general kinds of hackers:

Geopolitical Hackers (nation states/hacktivists) chose your site because they don’t like what you represent or where you live.
Retaliation Hackers don’t like what you have to say
Financial Hackers are looking to make money by taking your stuff or serving up spam
Opportunity Hackers do it just because they can. Your site or hosting was insecure so they exploited the opportunity.

How Hackers Find a Website to Target

Hackers have access to a multitude of tools and bots which they can send out to find specific vulnerabilities in websites and hosting companies. One specific bot can target WordPress installations and then will run through a bunch of tests looking for vulnerabilities which might be there if the website owner has not performed updates. Another bot I have experienced myself will identify a WordPress installation and then the hacker will attempt a brute force attack – an attempt to guess your username and password to gain control of your site.

The Problem May Be Your Hosting Company

”One client used a small hosting company because they were local and cheap. The client had an awful time with their site being attacked and the home page replaced by Islamic jihadist propaganda. The site was a simple brochure site, without even a form and I’d changed their FTP credentials multiple times. The hosting company swore it was something on our site allowing access, but a quick Google search showed many of their users complaining their sites were being hacked. We switched hosts and the client has had no trouble since.

How To Stop Hackers

There are as many ways to protect your site as there are ways to hack your site. There are a few things you can do to lessen your vulnerability:

Change your FTP and hosting passwords often, a minimum of quarterly is recommended.
Don’t use “admin” as your admin name. Choose an admin login name just like you would a password with numbers and characters as well as letters.
Use a complex password of at least 9 characters, including letters, numbers and characters (!%$, etc)
If you use WordPress, change the name of your wp-admin folder using a plugin like iThemes Security . Don’t just change the folder name – you’ll break your installation!
If you use forms or other places where users enter information, make sure the entered information is being scrubbed by your back-end code.

The Ideal Length for Online Posting

The ideal length for blog articles surprised me – 1,600 words? Seems a little long for every day posts. From the article: What makes this length optimal? At this length, you can expect readers to spend the maximum amount of time reading your content. Total time on page is highest at the 1,600-word length than any other length. From the infographic (not included here) and the article it looks like they compared time on page and number of social media shares against length of post and discovered that 1,600 words resulted in the optimal number of words for shares. Huh. I’m going to have to look at that in my own data. Please include attribution to http://blog.bufferapp.com with this graphic.

5 Reasons Your Website Needs a Blog

The majority of the sites I work on do not have blogs, though I point out to the owners that they are missing the opportunity to maximize their site value. Perhaps I’m not persuasive enough, so let’s discuss why blogs are an important part of every website. Connect With Customers With Your Blog Customer satisfaction is all about relationship building and relationships are built on communication. Use your blog to write the stories behind your business, highlight products or introduce an employee. I would find it fascinating to find out that your shop welder has worked for you for 30 years and follows a line of welders back to his grandfather. One of my clients sells orchids – articles about different orchids and how they got their names would be fascinating. A Blog Can Improve Your Search Engine Standing Blog regularly and you are essentially adding content to your site, along with more keywords. Search engines love sites that are updated regularly and you will love the results if you write content that contains keywords for which you want people to find you. As an example, my business is about WordPress, application development, form handlers and consultation. You’ll see lots […]

The majority of the sites I work on do not have blogs, though I point out to the owners that they are missing the opportunity to maximize their site value. Perhaps I’m not persuasive enough, so let’s discuss why blogs are an important part of every website.

”Connect With Customers With Your Blog

Customer satisfaction is all about relationship building and relationships are built on communication. Use your blog to write the stories behind your business, highlight products or introduce an employee. I would find it fascinating to find out that your shop welder has worked for you for 30 years and follows a line of welders back to his grandfather. One of my clients sells orchids – articles about different orchids and how they got their names would be fascinating.

A Blog Can Improve Your Search Engine Standing

Blog regularly and you are essentially adding content to your site, along with more keywords. Search engines love sites that are updated regularly and you will love the results if you write content that contains keywords for which you want people to find you. As an example, my business is about WordPress, application development, form handlers and consultation. You’ll see lots of blog posts about WordPress; plugins, themes, how-tos, etc. because I want to rank higher in search engines when people are searching for WordPress-related terms.

Position Yourself As An Expert

If you are successful in your business it is because you are expert at something. You need to let other people know you are the expert so they know to come to you for your services or your goods, right? Blog about all aspects of whatever you are expert in. One client designs jewelry. She could blog about finding just the right stones and beads, the difference between sterling silver and pure silver, care of jewelry, or even ancient jewelry making techniques. She needs to position herself as a jewelry expert! Another client makes holsters and other gun wear. He really is an expert at leather working and could blog about leather weights and quality, stitching styles and materials, dying and other coloration methods and even how he creates his designs.

A Blog Gives Your Business Personality

”If you follow the first three tips you will give your business a personality, and people relate to personalities. I have a certain espresso stand I buy coffee from because of its personality. I love the decorations, the cheery baristas, the way they remember all of their customers and the funny pictures they post on Facebook, so I travel across town to buy lattes from them even though I pass at least 5 other coffee stands on my way. Pro Tip: I’m not buying the coffee – I’m buying the experience, the personality.

Blogs Compliment Your PR and Advertising Strategies

If you already advertise or have public relations work done, blogging will complement those strategies. A series of blog posts can set the stage for a new ad campaign, talk about the ad campaign and then, afterwards, talk about the results (yes, really). Talk about your competitor’s advertising and explain why you are different. Most of all, talk about your products. Claude Hopkins in My Life in Advertising talked about how he wrote a Schlitz beer ad and talked about the purity of the beer, the care that went into the water, the wheat. Well, all beer goes through the same process, but he was the first to really talk about it in his ad copy. Schlitz sales went through the roof. Talk about your products, your services. Let me know how your sales go.

Form Handlers – More than Just Emailers

You can create all the the forms you want in HTML, but unless you have a form handler the information in the form will just sit there. The form handler works behind the scenes or what developers call the back end and take the information in the form, process it and do something with it. It might send the form data to one email address, or many email addresses. It might put the form data in a database or a Google Drive spreadsheet. Let’s take a look at what form handlers are capable of. Form Handlers Validate the Data All form handlers should take the data from the form and always process it to remove potential malicious code, but server-side validation is important even if you have validation on the front-end. A good form handler will make sure an email address is formatted correctly and will check for a list of spam words in the comment section. An even better form handler will communicate with the email server and verify that the email address actually exists. Form Handlers Can Format the Data If you receive your form data by email it makes sense to have it formatted nicely. A good form handler […]

You can create all the the forms you want in HTML, but unless you have a form handler the information in the form will just sit there. The form handler works behind the scenes or what developers call the back end and take the information in the form, process it and do something with it. It might send the form data to one email address, or many email addresses. It might put the form data in a database or a Google Drive spreadsheet. Let’s take a look at what form handlers are capable of.

Form Handlers Validate the Data

”All form handlers should take the data from the form and always process it to remove potential malicious code, but server-side validation is important even if you have validation on the front-end. A good form handler will make sure an email address is formatted correctly and will check for a list of spam words in the comment section. An even better form handler will communicate with the email server and verify that the email address actually exists.

Form Handlers Can Format the Data

If you receive your form data by email it makes sense to have it formatted nicely. A good form handler should allow you to format the way the email appears in your email inbox so that it is easily actionable. You should be able to click “reply” to the email and respond to the person who filled out the form – not be redirected to your own email server.

Form Handlers Can Save the Data

Whether you are collecting registrations or gathering data for a report, you may want to say the form information in a way that make it easy to retrieve and manipulate the data. A form handler can save the data to a database, or if you use Google Drive, add the information to a spreadsheet.

Form Handlers Can Respond

”What happens when your client fills out the form? Do they receive a response by email? Or maybe get redirected to a thank you page? Or both? Instead of generic responses a form handler can be coded to provide information or confirmation to the user. Imagine:

The user clicks a checkbox to know more about summer event. The thank you page displays a custom response about Summer events, along with links to relevant pages on your site and a confirmation that someone will be in touch.
A user comments that they are having problems with something. The form handler detects the keyword “problem” and sends a copy of the form to your key problem solver as well as you.
A series of checkboxes on the form allow the user to request different brochures. The form handler could automatically send an email with PDFs of the requested brochures and you could then follow up personally.

How Do I Get a Form Handler?

If you are using a plugin or service, the form handler will be included, but you may not be able to customize it much. The best option is a custom-coded form handler that will do exactly what you need it to do. Look for a developer with PHP and Javascript experience or (shameless plug alert!) contact me for a quote. I’ve done hundreds of forms and can put together a form handler that will do exactly what you need.

The 8 WordPress Plugins I Can’t Live Without

While every WordPress managed website is different, there are 8 plugins I always install right out of the box on new sites, and if I’m called in to work on an existing site I provide a quote to install them. iThemes Security If I could only install one plugin, iThemes Security would be it. This WordPress plugin covers all aspects of security, including backups, brute force attacks, malware scanning and “hiding” your admin section. I installed this for an existing WordPress user and found that they were being bombarded by brute force attacks (over 500 in 24 hours) – where bots try to figure out the admin login. With just a click we “hid” the admin folder and provided lockout protection – any time someone tried to log in more than 3 times in a row with a bad username or password they would be locked out of the site for 3 days. WP SEO by Yoast There are a few SEO plugins out there, but I’m loyal to Yoast’s WordPress SEO. It is comprehensive, easy to use and have lots of help information. Pro Tip #1 – always save your post as a draft and then look at the stats […]

While every WordPress managed website is different, there are 8 plugins I always install right out of the box on new sites, and if I’m called in to work on an existing site I provide a quote to install them.

iThemes Security

”If I could only install one plugin, iThemes Security would be it. This WordPress plugin covers all aspects of security, including backups, brute force attacks, malware scanning and “hiding” your admin section. I installed this for an existing WordPress user and found that they were being bombarded by brute force attacks (over 500 in 24 hours) – where bots try to figure out the admin login. With just a click we “hid” the admin folder and provided lockout protection – any time someone tried to log in more than 3 times in a row with a bad username or password they would be locked out of the site for 3 days.

WP SEO by Yoast

There are a few SEO plugins out there, but I’m loyal to Yoast’s WordPress SEO. It is comprehensive, easy to use and have lots of help information. Pro Tip #1 – always save your post as a draft and then look at the stats – it will update the stats. Pro Tip #2 – subscribe to the plugin author’s blog – it is great.

WP-Super Cache

Caching can be a way of speeding up your site, but it can be tricky to manage. I generally use WP-Super Cache, it creates a static page that is quicker to resolve in the browser. If you site is slow, this plugin may help.

Google Analytics for WordPress

An easy way to link your WordPress site with your Google Analytics account, Google Analytics for WordPress also shows some limited stats so you don’t have to log into your Google Analytics account every day to view visits.

Google XML Sitemaps Generator

When you install this WordPress plugin make sure you are getting the right one – the plugin author is Arne Brachhold. This WordPress plugin will help search engines index your site. Pro Tip: don’t forget to submit your site map to Google!

WP-SpamFree

While no plugin will completely eliminate spam, WP-SpamFree will cut down comment, trackback and pingback spam substantially. It has a blacklist function which will automatically delete offending commenters.

Display Widgets

Display Widgets is a WordPress plugin that does one thing extremely well – it adds check boxes to your widgets so you can choose what pages to show or hide a widget on. If you have a sidebar, but don’t want your archive list showing only anything but your blog – this plugin will take care of that! I simply can’t live without this plugin!

Gravity Forms

”Gravity Forms is a premium plugin, but it is by far the best WordPress form plugin available. It includes anti-spam features and will work with PayPal, Stripe, Authorize.net and other merchant accounts to collect payments. Multi-page forms, survey, you name it and this plugin can do it, and do it well.

Time to Hear From You

I’ve had my say about my must-have WordPress plugins. Now it is you turn! What plugins do you find indispensable? Leave a comment and let us know!

Majority of WordPress users not backing up, survey indicates

Most WordPress Users Don’t Back Up

According to a recent survey by CodeGuard and quoted by SC Magazine, “More than three-quarters of organizations and bloggers operating WordPress websites are not using a backup plugin, thus leaving themselves open to data and customer loss should something go wrong”. This is really bad news. I’ve dealt with thirteen hacked sites in my career, two of them so badly compromised we had to start completely over with new hosting and a new site. Another ex-client moved her WordPress site to a new host without backing up and exporting her database, resulting in the loss of 5 years of articles. Still another client had his hosting company go out of the business, leading him to lose everything. None of these people had backups or a backup system before they came to me. How to Back Up Install a plugin – it is really that easy. Backup Buddy and iThemes Security are both very good. They are by the same company and iThemes Security will work with Backup Buddy to save your backups off-site. Each has a scheduler, but Backup Buddy will back up your database and files, while the vanilla version of iThemes Security will just back up your database. […]

According to a recent survey by CodeGuard and quoted by SC Magazine, “More than three-quarters of organizations and bloggers operating WordPress websites are not using a backup plugin, thus leaving themselves open to data and customer loss should something go wrong”. This is really bad news.

I’ve dealt with thirteen hacked sites in my career, two of them so badly compromised we had to start completely over with new hosting and a new site. Another ex-client moved her WordPress site to a new host without backing up and exporting her database, resulting in the loss of 5 years of articles. Still another client had his hosting company go out of the business, leading him to lose everything. None of these people had backups or a backup system before they came to me.

How to Back Up

Install a plugin – it is really that easy. Backup Buddy and iThemes Security are both very good. They are by the same company and iThemes Security will work with Backup Buddy to save your backups off-site. Each has a scheduler, but Backup Buddy will back up your database and files, while the vanilla version of iThemes Security will just back up your database. Codeguard is also very good and I use it as part of my client back up packages.

How Often to Back Up

”I personally just use iThemes Security to back up my database every three days. I save one backup file to my host site and another emailed to me. I use my hosting company to back up my files and also keep a manual backup on my own local server. Because the files don’t change that often I just back them up once a month. For clients I offer a package where I update their database and files and scan for changes (a way to identify malware) at either $10/month for monthly backups or $18/month for bi-weekly backups. Contact me if you are interested.

Other Times to Perform a Back Up

I generally do a manual back up (database and files) before updating WordPress, although I don’t usually back up before updating plugins. If I have a bunch of plugins to update, however, I will back up my database and files just to be safe. If a client asks me to update their files I will back up everything for them ahead of time – better safe than sorry!

How Many Backups to Save

This really depends upon your business and your comfort level. For myself, I just save two – the last backup and the current one. For clients, I save around 3 months worth of backup files.

BTW – for grammar nerds, the difference between back up and backup

Rotating Carousels on Websites Don’t Work

Rotating carousels, also known as sliders, are everywhere – just about every theme has one. Every client wants one. On one site I worked on the client wanted two sliders on nearly every page! Just because something is popular, doesn’t make it efficient. Check out this research on carousels: Users Don’t Click on Rotating Carousels Erik Runyon examined 5 Notre Dame sites with carousels on the home page. The home pages received 3,755,297 visits total. Only 1.07% of visitors clicked on the carousels, and of those clicks, an average of 89% clicked on the first item only. Users Don’t Look at Rotating Carousels In a usability study by the Nielson/Normal Group users were given a question to answer “Does Siemens have any special deals on washing machines?” A large advertisement for a cash back offer was the first item in a series of slides and the offer was in 98 point font. The rotating carousel was at the top of the page and took up about 1/2 of the space above the fold – in other words it was right in front of the user’s eyes – and yet they couldn’t see it because the carousel auto-played. From the article: Auto-forwarding causes many usability problems: Moving […]

Rotating carousels, also known as sliders, are everywhere – just about every theme has one. Every client wants one. On one site I worked on the client wanted two sliders on nearly every page! Just because something is popular, doesn’t make it efficient. Check out this research on carousels:

Users Don’t Click on Rotating Carousels

Erik Runyon examined 5 Notre Dame sites with carousels on the home page. The home pages received 3,755,297 visits total. Only 1.07% of visitors clicked on the carousels, and of those clicks, an average of 89% clicked on the first item only.

Users Don’t Look at Rotating Carousels

”In a usability study by the Nielson/Normal Group users were given a question to answer “Does Siemens have any special deals on washing machines?” A large advertisement for a cash back offer was the first item in a series of slides and the offer was in 98 point font. The rotating carousel was at the top of the page and took up about 1/2 of the space above the fold – in other words it was right in front of the user’s eyes – and yet they couldn’t see it because the carousel auto-played. From the article:

Auto-forwarding causes many usability problems:

Moving UI elements usually reduce accessibility, particularly for users with motor skill issues who have difficulty clicking something before it’s taken away.
Low-literacy users often don’t have enough time to read the information before it’s removed.
International users also read more slowly if your site is not in their native language, and thus won’t be able to understand a panel if it’s displayed only briefly.
The probability that users will spot the item they want is drastically reduced when only one thing is displayed at any given time; in the Siemens example, the discount deal is visible only 20% of the time.
It’s just plain annoying for users to lose control of the user interface when things move around of their own accord.

Carousels Suffer From Banner Blindness

In addition to the usability problems, the fancy formatting and large size in rotating carousels can cause banner blindness.

Banner blindness is a phenomenon in web usability where visitors to a website consciously or subconsciously ignore banner-like information, which can also be called ad blindness or banner noise. ~ Wikipedia

In a research paper by Magnus Pagendarm and Heike Schaumburg, the authors hypothesized that banners are ignored because:

Users may also have learned that advertising banners often do deliver what they promise. Consequently, they consciously ignore them (Nielsen 1997, Drèze and Hussherr 1999). Another reason, as several studies suggest, is that many users simply do not notice banners on Web sites.

Carousels Cause SEO Problems

” Photo by bark ”

Thijs de Valk points out in his post “Our themes don’t have sliders… Because sliders suck“, rotating carousels and sliders are problematic because:

They slow down your site, negatively impacting your SEO and conversion rate(!!);
They don’t always work well on mobile devices,
They push your content down, which Google recently mentioned yet again is not smart;
It dilutes your message, because suddenly there are multiple messages on your homepage.

So Why Have a Rotating Carousel?

In my experience, and from my research it appears for two reasons:

The website owner has not adequately defined the goal of the website and/or the page.
There are too many stakeholders who want their message on the page (i.e. Marketing, Sales, R&D)

Neither reason is a very good one, considering no one will actually read the messages you put in your carousel or banner. So why have one?

Choosing A WordPress Theme: 12 Things To Look For

A concise article at CMSCritic.com about what to look for in deciding on a theme. You could apply these to having a custom-made theme as well and, in a lot of cases, I would suggest a custom theme. The cost is a little more, but you get a theme perfect for you and one you won’t see anywhere else. Interestingly, free WordPress themes don’t lag far behind their paid equivalents, however the latter do provide a number of additional features and functionalities, like free 24/7 support, regular updates, protection from malware of any kind, etc. When looking for a template with which to build your next web project, there are several things to consider in order to obtain a product that is really worth the money. I would be cautious using free themes – just yesterday I talked to a woman on Twitter having extreme malware and spam issues after installing a free theme. Click here to view original web page at www.cmscritic.com

Color Palettes Made Easy with Lavish

I’m not a designer – I wish I were, but I lack the creative spark and artistic eye that designers have. I especially envy designer’s ability to put colors together that look terrific. Then I discovered Lavish. With Lavish you upload a photograph with color and a feeling that you’d like to have in your website. Lavish then picks out a palette of colors from the photograph. The colors look great together, but Lavish doesn’t stop there. It also creates bootstrap-compatible CSS that you can add to your site! You could probably also use with, with some tweaking, with a regular site. Just copy the CSS into a file called lavish-style.css and save onto your hosting site. If you are using WordPress, save in your theme file. In your header file add the following code after any other CSS stylesheets: <link rel=“stylesheet” type=“text/css” href=“lavish-style.css”> Before copying the css you do have the option of editing the colors and reassigning them to parts of your site (links, titles, etc). Color Palette Examples The key to getting a good color palette using Lavish is to choose an image that really matches the feeling you want to evoke when someone visits you site. […]

Domain Names and What You Can Do With Them

My Facebook friends are laughing over this little trick: go to loser.com and see where it takes you. If you’re not a Kanye fan you’ll find it funny, but how does that work? Wikipedia didn’t set this up, so why does loser.com go to Wikipedia? It all lies with the domain name and its owner. A domain name is just an address for a spot on the internet. When you buy a domain name it will likely be directed to a holding page created by the company from whom you bought the domain. If I buy a domain at Domains Priced Right, the domain name will point to a default page at Domains Priced Right. Normally you would buy a hosting plan from a company like HostGator or GoDaddy and then point your domain to your hosting plan, where the files for your website are. But you don’t have to! There are other options for your domain besides pointing it at your own website. You can do what the owner of loser.com did and use the domain as a joke. You can point your domain to your WordPress.com, Blogger or Tumblr account. At the time of this post my own name […]

My Facebook friends are laughing over this little trick: go to loser.com and see where it takes you. If you’re not a Kanye fan you’ll find it funny, but how does that work? Wikipedia didn’t set this up, so why does loser.com go to Wikipedia?

It all lies with the domain name and its owner.

” Holding page for SalonConversations.com

A domain name is just an address for a spot on the internet. When you buy a domain name it will likely be directed to a holding page created by the company from whom you bought the domain. If I buy a domain at Domains Priced Right, the domain name will point to a default page at Domains Priced Right.

Normally you would buy a hosting plan from a company like HostGator or GoDaddy and then point your domain to your hosting plan, where the files for your website are. But you don’t have to!

There are other options for your domain besides pointing it at your own website. You can do what the owner of loser.com did and use the domain as a joke. You can point your domain to your WordPress.com, Blogger or Tumblr account. At the time of this post my own name domain dianeensey.com, is directed to an About.me page.

Domain names can also be redirected to a section of your own website. For example I could buy the domain name Beyond-PaperSupport.com and point it to a section of my site all about support issues.

You don’t even have to point a domain name to a website at all. My family has a domain that we use strictly for email. I’ve set up a Google Apps account and we all have emails with the same domain: diane@enseygroup.com, rick@enseygroup.com, etc. We don’t have a website set up at all!

I won’t go into the details of how to redirect your domain – it can be a little confusing and each company and service you use will have a different method. You will want to check with the the service you want to redirect to for instructions on how to do it.

But in the meantime, take a look at the domains you own, think about domains you want to own and how you want to use them.

Find Potential Clients with Twitter and IFTTT

In the past two weeks I’ve picked up three new clients with Twitter by monitoring Twitter for the words “wordpress” and “help”. This doesn’t mean I’m constantly watching Twitter. Instead I set up a system using IFTTT and Twitter that notifies me automatically when a match occurs. IFTTT IFTTT is short for If This Then That and is an application that lets you put together a chain of actions which get triggered when a change to a web service like Facebook, GMail or Twitter occurs. The chain of actions is called a recipe and, in plain English looks something like this: IF a tweet occurs with “wordpress” and “help” THEN send me an email with the tweet content and a link to the tweet. When the recipe is activated, IFTTT watches Twitter for tweets containing “wordpress” and “help” in the same message and then emails me with the tweet. Some other recipes I use do the following: IF a new Instagram by me THEN create a photo post on my personal blog with the Instagram photo. IF a new Craigslist posting for a boat for sale in our area THEN send an email to my husband. Getting Started with IFTTT First you’ll need an account, so […]

In the past two weeks I’ve picked up three new clients with Twitter by monitoring Twitter for the words “wordpress” and “help”. This doesn’t mean I’m constantly watching Twitter. Instead I set up a system using IFTTT and Twitter that notifies me automatically when a match occurs.

IFTTT

IFTTT is short for If This Then That and is an application that lets you put together a chain of actions which get triggered when a change to a web service like Facebook, GMail or Twitter occurs. The chain of actions is called a recipe and, in plain English looks something like this:

IF a tweet occurs with “wordpress” and “help” THEN send me an email with the tweet content and a link to the tweet.

When the recipe is activated, IFTTT watches Twitter for tweets containing “wordpress” and “help” in the same message and then emails me with the tweet. Some other recipes I use do the following:

IF a new Instagram by me THEN create a photo post on my personal blog with the Instagram photo.

IF a new Craigslist posting for a boat for sale in our area THEN send an email to my husband.

Getting Started with IFTTT

First you’ll need an account, so go to ifttt.com and click on Sign Up.

Next you’ll need to active your Twitter channel. Click on Channels (very top of page) and scroll down to Twitter. Follow the directions to log into and authenticate Twitter.

You can also add an SMS channel if you want to receive text messages. Just click on the SMS icon and follow the instructions.

Click on Create Recipe and then:

”Choose Trigger Channel – click on Twitter
Choose a Trigger – click on “new tweet from search”
Type in the keyword or keywords you want results from. I typed in: “wordpress” and “help” because I only wanted tweets with both words. For more information on advanced searches for Twitter click here.
Click on Create Trigger.
Click on That
Decide how you want to be notified:
1. Email: click on Email and then “Send Me an Email”.
2. SMS: If you set up your phone as a Channel, then you can have a text message sent to your phone.
Click on Create Action and you will see a summary of your recipe.
If everything looks good, click on Create Recipe.

Your recipe will now run!

Limitations with IFTTT

IFTTT will limit the number of tweets that are returned during a time period, so you may not receive all of the tweets if you are using popular keywords. On the other hand, if it seems like you are getting too many tweets, try limiting your search parameters (see this). If you want to turn off the recipe altogether, the first icon on your personal recipes page will do that.

”

Frequently Asked Questions – a New Beyond Paper Feature

I am active on Twitter and often answer quick questions or offer assistance to people having problems. Since the same problems seem to crop up I’ve decided to add a frequently asked questions or FAQ section to my website. Currently I have a few questions/topics in the section…

Concrete5 as an Alternative to WordPress

I’ve been testing Concrete5, a content management system (CMS) being touted as an alternative to WordPress. I’m more impressed that I thought I would be, especially with the front-end editing. Installing Concrete5 Installation for testing was on my home WAMP server and was seamless. All you really need to do is create a MySQL database, download the ZIP file from the Concrete5 website, unzip and upload the files onto your site. Full documentation for installation is here. I didn’t experience any problems, though it was a little slow installing. I strongly suggest you choose the installation with dummy content already in place. You’ll just need to edit what is there to have a functioning site. The Selling Feature: Editing Pages There is no “back-end” to the site. Once you log in you navigate you site as normal, but an editing header is added. By clicking options on the header you can edit the page, edit your SEO information, add pages, and view your site structure. All of this is done right on the page, so you can immediately see how your changes look. Both text and image editing was smooth and very intuitive. The learning curve is very low and it feels like […]

”I’ve been testing Concrete5, a content management system (CMS) being touted as an alternative to WordPress. I’m more impressed that I thought I would be, especially with the front-end editing.

Installing Concrete5

Installation for testing was on my home WAMP server and was seamless. All you really need to do is create a MySQL database, download the ZIP file from the Concrete5 website, unzip and upload the files onto your site. Full documentation for installation is here. I didn’t experience any problems, though it was a little slow installing. I strongly suggest you choose the installation with dummy content already in place. You’ll just need to edit what is there to have a functioning site.

The Selling Feature: Editing Pages

There is no “back-end” to the site. Once you log in you navigate you site as normal, but an editing header is added. By clicking options on the header you can edit the page, edit your SEO information, add pages, and view your site structure. All of this is done right on the page, so you can immediately see how your changes look.

” Concrete5 Editing Header and an image block highlighted for editing.

Both text and image editing was smooth and very intuitive. The learning curve is very low and it feels like I could sit a moderately computer savvy person down and they could edit a site with only a little training.

” Editing a text block in Concrete5. Notice the standard editing buttons.

All of the blocks, or areas on the page are draggable, so it is easy to move a text block to be half width, with an image block next to it, or set up columns of text. Once done editing the page a save box automatically appears and you have the option of writing a short note about the changes you made. Version control! This means that you can find old versions and bring them back if you don’t like your changes! Another use would be changing your page for a special occasion – say 4th of July. After the 4th you could easily reinstate the old version of the page.

Themes, Plugins and Add-Ons

The Concrete5 community isn’t as big as WordPress and the plugins/add-ons are more limited, but there is an eCommerce solution, some form solutions (and a form solution is included in the base install), and some other features, though some of them are not free. The themes are limited, but the instructions for creating a theme from an HTML design (or a WordPress template) are very clear. If you’ve worked with a PHP MVC framework like Slim or Laravel it is going to feel familiar.

So, Better Than WordPress?

Not necessarily better. It really depends upon the needs of the client. For a straight-forward, text- and image-heavy site that the client wants to be able to manage themselves it might be somewhat easier to edit content. The problem is, it may allow the client too much freedom and pages could end up in disarray if they move things around too much.

I also didn’t like the image management feature. I wanted to be able to use a very large image, but only show part of it in a header, but there wasn’t a way to limit it that I could see. In WordPress I’d do it using CSS, but the drag and drop features in Concrete5 made me thing I should be able to crop or at least choose what part of the image should show, on the fly.

Overall, I expected Concrete5 to be harder to get my mind around, being such a user of WordPress. Instead it was easy and I found myself wishing for a front-end editing system for WordPress. I may even suggest it for some of my clients.

Wednesday Roundup

A mid-week roundup of topics that aren’t long enough for their own post, applications I’m testing, and information that I just find interesting. Gratisography Free for commercial and personal use, these professional images are superb. Please remember to give proper attribution so the photographer keeps adding images! Concrete5 I’m checking out this alternative to WordPress because I’ve heard the post editor is much easier to use. Expect a future article about my experience. Drupal Another WordPress alternative. I used it awhile back but didn’t like it, but decided it was time to take another look. Word is it isn’t as flexible as WordPress, but the Economist, Examiner, and the White House all use it. Silverstripe Labelled as more a content management platform than a blogging platform, I decided to test it because it looks interesting. Quantative Queries for CSS Fascinating discussion of using CSS to target quantities of objects. The example they use is a menu. It will have one kind of styling if there are 5 or less menu items, but a different kind of styling if there are more (smaller font, less padding, etc). Testimonial Basics I’m trying something different – a WordPress plugin that will help you […]

3 Reasons You Need WordPress Editorial Calendar

Editorial Calendar, a plugin for WordPress, is a tool that gives you a graphical view of when your posts are scheduled throughout the month. It was one of the first plugins I ever used with WordPress and now that I’m trying to blog on a daily basis I depend on it. Here’s why: Scheduling Blog Posts The most obvious reason to use the editorial calendar is to schedule posts. Your unscheduled drafts are listed in the right hand column and you can just drag and drop them onto the day you want them to appear. You can also drag and drop future posts within the calendar, so if you have a post scheduled for a Sunday, just move it to Monday. That last idea is important. I following Twitter activity for WordPress and some coding terms and find that everything slows down to almost nothing on Fridays. I try to avoid posting anything important on Fridays, so with the editorial calendar I can move posts around to put a round-up post or something less important on Friday. Controlling the Blog Post Topic Mix I tend to get hung up on one topic and write several blogs in a row […]

Editorial Calendar, a plugin for WordPress, is a tool that gives you a graphical view of when your posts are scheduled throughout the month. It was one of the first plugins I ever used with WordPress and now that I’m trying to blog on a daily basis I depend on it. Here’s why:

Scheduling Blog Posts

The most obvious reason to use the editorial calendar is to schedule posts. Your unscheduled drafts are listed in the right hand column and you can just drag and drop them onto the day you want them to appear. You can also drag and drop future posts within the calendar, so if you have a post scheduled for a Sunday, just move it to Monday.

That last idea is important. I following Twitter activity for WordPress and some coding terms and find that everything slows down to almost nothing on Fridays. I try to avoid posting anything important on Fridays, so with the editorial calendar I can move posts around to put a round-up post or something less important on Friday.

” Editorial Calendar plugin for WordPress

Controlling the Blog Post Topic Mix

I tend to get hung up on one topic and write several blogs in a row about that topic. For example, yesterday’s post was about email validation and I have a lot more to say about validation and form handlers in general. But posting all those articles one right after the other is a little boring for readers. Using the editorial calendar I can spread out those posts over the course of a few weeks, hopefully making a bigger impact for each one when they appear.

Capturing Blog Post Ideas

While I’m reviewing my Twitter feed or reading Feedly I will have my editorial calendar open to capture potential topics to blog about. I just click on the “New Post” link on a day in the future and type the potential title or reminder, along with a link to the article, and save as a draft. I can then drag it into my unscheduled draft column or leave it where it is and just follow up to write the actual article.

If you are using the Editorial Calendar plugin for WordPress I’d like to hear how you use it to help with your writing.

How Proper Email Validation Reduces Form Spam

Forms are the ultimate garbage collector. Hackers, spammers and just plain mean people run little programs called bots which look for forms on the internet. When they find one, the bot fills in the forms with all sorts of gibberish. If you are lucky, the gibberish does nothing more than annoy you when you hit “delete” in your email inbox. If you aren’t lucky, it may allow access to your site or put a virus on your computer. The First Line of Defense is Email Validation. Form validation is a method of looking at each piece of information submitted in a form and ensuring that the information makes sense for what you are asking. In this article we cover email validation, however email validation isn’t just a part of your anti-spam arsenal; it is smart business practice. If you don’t get a good address from a potential customer, how are you going to contact them back? Emails are always going to be in the format something@something.som. A basic validator will look at the email that is being submitted and make sure there is an “@” symbol and a period. A better validator will check that only letters and numbers are used before the period and only […]

” Photo by dok1 ”

Forms are the ultimate garbage collector. Hackers, spammers and just plain mean people run little programs called bots which look for forms on the internet. When they find one, the bot fills in the forms with all sorts of gibberish. If you are lucky, the gibberish does nothing more than annoy you when you hit “delete” in your email inbox. If you aren’t lucky, it may allow access to your site or put a virus on your computer.

The First Line of Defense is Email Validation.

Form validation is a method of looking at each piece of information submitted in a form and ensuring that the information makes sense for what you are asking. In this article we cover email validation, however email validation isn’t just a part of your anti-spam arsenal; it is smart business practice. If you don’t get a good address from a potential customer, how are you going to contact them back?

Emails are always going to be in the format something@something.som. A basic validator will look at the email that is being submitted and make sure there is an “@” symbol and a period. A better validator will check that only letters and numbers are used before the period and only letters after the period.

Unfortunately, hackers, spammers and mean people know what email addresses look like too and can tell their bots to look for the word “email” and put a fake or spammy email in the closest input box. Because the submitted email fits the model of what emails look like it will pass through fine.

Superior Email Validation

Superior email validators will not only check the format of the input, but will perform two more functions:

Check the domain against a list of known disposable email address services, and
Attempt to contact the server where that email address lives. Only it the server pings back that the email address exists will the email pass validation.

Email Validation is Only the Beginning

”Email validation is only going to catch a small percentage of spammers. You really want to validate all of the fields in your form as well as add other features like captchas or honeypots. I’ll talk about them in another post, but for now your take-away is that email validation and other features all work in unison to eliminate as much form spam as possible. While email validation won’t solve all of your spam headaches, it is a good place to start

Why Didn’t My WordPress Scheduled Post Appear?

You know the feeling – you scheduled a post to appear at 9:00 a.m. on Monday morning, but it never posted. What happened? WordPress isn’t an application that runs silently in the background, automatically doing things even when no one is using it. Instead it runs certain functions whenever someone visits the site. One of those function is to check for any schedule posts. Your WordPress scheduled post will actually go live after the first visitor to your site following the scheduled time you set. That is a little confusing, so here it is in diagram form: If your site doesn’t get a lot of visitors then WordPress may not check for scheduled posts at all – which means your scheduled post will never appear. How Can I Make Sure My WordPress Scheduled Posts Appear? What is needed is a program that will “ping” your site on a scheduled basis, thereby activating the WordPress scheduled post function. The program that does this is called a cron job and there is a site which makes setting up your cron jobs easier: Easycron. Setup Log into Easycron and get a free account. Click on “Create New Cron Job”. For the URL enter http://yoursiteurl.com/wp-cron.php […]

You know the feeling – you scheduled a post to appear at 9:00 a.m. on Monday morning, but it never posted. What happened?

WordPress isn’t an application that runs silently in the background, automatically doing things even when no one is using it. Instead it runs certain functions whenever someone visits the site. One of those function is to check for any schedule posts. Your WordPress scheduled post will actually go live after the first visitor to your site following the scheduled time you set.

That is a little confusing, so here it is in diagram form:

”

If your site doesn’t get a lot of visitors then WordPress may not check for scheduled posts at all – which means your scheduled post will never appear.

How Can I Make Sure My WordPress Scheduled Posts Appear?

What is needed is a program that will “ping” your site on a scheduled basis, thereby activating the WordPress scheduled post function. The program that does this is called a cron job and there is a site which makes setting up your cron jobs easier: Easycron.

Setup

Log into Easycron and get a free account.

Click on “Create New Cron Job”.

For the URL enter http://yoursiteurl.com/wp-cron.php , making sure to use your own domain in the place of yoursiteurl.com. For when to execute, choose what you want. I use every 1 hour. Click on “Create Cron Job” and your cron job should now be running.

Note: EasyCron also has a plugin, but it seems easier just to set up the cron job on their site.

Caveats

These instructions do not disable the internal WordPress cron function because we are assuming this is a site without a lot of traffic (which is the whole problem with the posts not appearing). If you have a higher-traffic site you will want to disable WordPress’ internal cron functions by adding the following to your wp-config.php file: define(‘DISABLE_WP_CRON’, true);

If you know how to set up a cron job on your host, or have special scripts you want to run, check out this excellent post by Tom McFarlin.

How Asking for Help Gives You a Better Website

You have a vision for your website – nothing too fancy, maybe you found a template you like and think you can use. You look at WordPress, IM Creator, SilverStrip – so many applications in the wild jungle of the internet which you can use to build yourself a website! They all claim to be user-friendly and easy to customize. Building your own site should be simple, you can do it yourself without help, right? To some extent, that assumption is right, but applications and templates have learning curves. Some assume you have knowledge of HTML and CSS. Sometimes it isn’t the application or the template that is the problem, but your vision; you can’t figure out how to make a page look the way you want. This is the point that frustration starts to build and I usually see the following tweet or Facebook post: I Hate WordPress!!! Ask for Help Before You Start Going the DIY path is fine, but why not have someone available for consultation when you have a question? You can try depending on tapping into the knowledge of a friend, but why not have a professional you can contact? I have many clients who use my skills to educate themselves […]

” Help fit your vision to your site.

You have a vision for your website – nothing too fancy, maybe you found a template you like and think you can use. You look at WordPress, IM Creator, SilverStrip – so many applications in the wild jungle of the internet which you can use to build yourself a website! They all claim to be user-friendly and easy to customize. Building your own site should be simple, you can do it yourself without help, right?

To some extent, that assumption is right, but applications and templates have learning curves. Some assume you have knowledge of HTML and CSS. Sometimes it isn’t the application or the template that is the problem, but your vision; you can’t figure out how to make a page look the way you want. This is the point that frustration starts to build and I usually see the following tweet or Facebook post:

I Hate WordPress!!!

Ask for Help Before You Start

Going the DIY path is fine, but why not have someone available for consultation when you have a question? You can try depending on tapping into the knowledge of a friend, but why not have a professional you can contact? I have many clients who use my skills to educate themselves and get over the bumps that occur in all websites. Here are some real-life examples:

Small Business Owner Need Help Adding PayPal Buttons to Her Site

One client has the management of her site down pretty good, but always gets stuck figuring out how to put PayPal buttons on her site to pay for her massage services, classes and special events. She sends me the details and I plug it into her site. Total cost in money to her: $16.25. The savings in aggravation and headache: priceless.

An Event Promoter Needed Help Setting Up a New Template

This client paid for a premium template for WordPress, but couldn’t figure out how to set it up the way he envisioned. He sent me hand-drawn layouts of his pages and I did the setup for him and then walked him through making changes in the future. Cost to him: $200 after he’d spent approximately 20 hours trying to figure it out on his own.

A Blogger Needed Help Formatting Posts

A fashion blogger had a tough time remembering how to format her blog posts so that the images and text looked nice together and all of the links worked right. She sends me her posts 3-4x a week and I format and schedule them to post for her. Cost to her: $5/post. She estimates that she saves an hour of time each post because she doesn’t need to rethink the process each time.

Medical Provider Needed Help With a Contact Form

A small chiropractor’s office needed a simple, well-formatted, validated form with spam controls. Cost: $45.50.

Help Doesn’t Have to be Expensive

” Help needn’t be expensive.

Billing

Ask your professional up front how they bill. Do they have a minimum? I bill in units of 15 minutes with a minimum of 15 minutes. I’ve heard of web professionals having a minimum charge of one hour.

Group Work

Try to group a bunch of changes together – or ask that the professional group your requests and do them all together. I have one client who will send me 8 emails over the course of the day, expecting each to be done ASAP, but some will contradict earlier emails. So basically I end up doing a 8 bits of 15 minute minimum work (2 hours chargeable time!), when if she had let me group the work it would have probably taken 15 minutes total. Another client I have is less time-sensitive, so I just group all her requests and do them the first thing Thursday mornings.

Know What is Billable

As a professional, I’m going to do what you ask me to. If it unclear I’ll ask you to clarify, but if I do the work you ask but you weren’t clear to begin with, any changes are chargable. For example one client sent me an email asking me to mask the pupils on his client images. I did, but the client mis-typed and really meant for me to mask the entire iris. I had to re-do everything. He balked at the charges, but I had just done what was he requested!

How to Find Help

The majority of web professionals get their clients through referrals. Ask friends, even contacts on your social networks. Contact the professional by email and ask how they bill, how they work, and what their turn-around time is. Give the professional a couple of small things to do and see how it goes.

My plug: I’ve been in the business for 10+ years and have good references and a portfolio. Let me know if I can help you make your website fit your vision! Email me at diane@beyond-paper.com.

WordPress Themes: Free vs. Premium? 9 Questions to Consider

There are thousands of free and premium WordPress themes available on the internet to the budget-conscious, but what differentiates them? Free WordPress themes aren’t necessarily inferior to premium themes and there are some premium themes for which I wouldn’t waste good money. Why is one theme free and another premium? How do you decide which to choose? Use these 9 questions while looking at themes to help you decide. 1. Are Images Included With the Theme? When you view the theme demo it will be full of images which most likely aren’t included with a free theme. Sometimes these images are what really catch your eye and make the theme. Even if the theme includes the images, they may not be royalty-free, meaning that you really need to pay extra to use the images. But paying for a premium theme doesn’t mean you get the images either. I had a client pay $159 for a theme, only to find all the images had copyright watermarks on them. 2. Does the WordPress Theme Include PSD (Photoshop) Files? Themes are first created in Photoshop and then created in HTML for WordPress. The PSD files will have images that you may need if you want to change […]

There are thousands of free and premium WordPress themes available on the internet to the budget-conscious, but what differentiates them? Free WordPress themes aren’t necessarily inferior to premium themes and there are some premium themes for which I wouldn’t waste good money. Why is one theme free and another premium? How do you decide which to choose? Use these 9 questions while looking at themes to help you decide.

1. Are Images Included With the Theme?

When you view the theme demo it will be full of images which most likely aren’t included with a free theme. Sometimes these images are what really catch your eye and make the theme. Even if the theme includes the images, they may not be royalty-free, meaning that you really need to pay extra to use the images. But paying for a premium theme doesn’t mean you get the images either. I had a client pay $159 for a theme, only to find all the images had copyright watermarks on them.

2. Does the WordPress Theme Include PSD (Photoshop) Files?

Themes are first created in Photoshop and then created in HTML for WordPress. The PSD files will have images that you may need if you want to change the site. Keep in mind lack of a PSD isn’t necessarily a deal-breaker – many modern designs are created almost entirely in CSS and there may not be a need for PSD files to make changes. If you are working with a WordPress professional, they can advise you. Very few free themes include PSD files.

3. What Extras Are Included?

Premium themes often include image sliders or carousels, contact form plugins, and specialized shortcodes. Shortcodes are bits of code you can type into a post or page to add functionality like a button, columns, You Tube videos, etc. The theme description will tell you what extras are included, so compare the list to what your needs are.

4. How Much Can You Customize this WordPress Theme?

Some WordPress themes, both free and premium, provide options in the dashboard for customization. Low-end themes will allow custom backgrounds and changes to the colors of text and headers. Higher-end themes can let you change each page individually, adding sections and widgets that previously were just available by hiring a WordPress professional. These higher-end themes have steep learning curves, however, and you may need to hire a professional to get your site to look the way you want. My favorite higher-end theme with lots of customization combined with an easy to use interface is Divi by Elegant Themes. Mimo Themes’ Plus theme is extremely customizable, but is very difficult to learn to use.

” Divi Theme by Elegant Themes Customization Options for Pages/Posts

5. Is the Theme Responsive?

A responsive WordPress theme is one that adapts to look good on a computer screen, a tablet device and a smart phone. Try viewing the theme demo on your smartphone. It will look different than the full-size version, but should still be functional and good-looking. This applies to both free and premium themes – these days all WordPress themes should be responsive!

” ThemeForest.net

6. How Old is the Theme?

Look at the date that the theme was uploaded and/or last updated. That date should be no more than a year ago, preferably 6 months. Standards are changing constantly and an old theme is not going to stand up well in newer browsers. Older WordPress themes are less likely to be responsive as well. This is very important for free themes, as they tend to get uploaded and then neglected. There should be a good record of updates for the theme if it is more than a year old.

7. Will the Theme Automatically Update?

WordPress themes from the official WordPress repository will automatically notify you thought the dashboard when they need to be updated. Themes from other other sources may not. Some theme marketplaces like Elegant Themes and ThemeForest have a plugin that you can add that will check the status of your theme and trigger the WordPress update system when it needs to be updated. I strongly prefer automatic updates – it is safer for security reasons and will ensure your template keeps up with technology. If you are purchasing a template, make sure you check for limitations for updates. Most license the theme for a year or so during which you receive free updates. After that you pay a small fee to continue to receive updates.

8. What Support is Offered For the Theme?

Does the theme author have a site or is there a forum or support for their WordPress theme? Check out the forums, if they exists and take a look at both the complaints and the responses. If the author isn’t responding, fails to take action, or is plain rude you should run!

8. What Documentation is Available?

All premium WordPress themes should offer some kind of written documentation at the very least. ThemeForest actually lists the kind/quality of documentation for each theme. Don’t pay for a premium theme that doesn’t have documentation! Additionally, if the theme offers customization options (see above) video tutorials are nice. Divi by Elegant Themes has excellent video tutorials in its documentation.

Using these 9 questions will help you decide between a free and premium pre-made WordPress theme. However if your budget supports it I strongly suggest getting a custom site created by a professional graphic designer and WordPress professional (like me!). You’ll receive exactly the site you want and need and it will be unique to you – not a site that someone can look at and say “they used XXX theme”.

eCommerce Terms & Conditions and Privacy Pages

This is the third in a series of articles covering ecommerce. You can find the previous articles here: eCommerce. What is it? Do I need it? and eCommerce Shipping and Payment Options It is vital that you write down and follow through on your privacy policy and terms and conditions. These are going to be the documents that customers rarely read, but will save you time, money and legal problems if you have them and follow them! Privacy Policy The Better Business Bureau has a sample privacy policy for online businesses as well as good articles on establishing your privacy policy and what best practices you should follow. At the very minimum it should state: What personal information you are collecting on the site. Whether and how a customer can remove personal information. How the customer can view what information you have collected on them. How the information is stored, what security you are using. What redress the customer has if you don’t follow your policy privacy. How you will communicated updates to the privacy policy Privacy Alert! Don’t Collect the Customer’s Credit Card Info! Probably the most critical issue is to state what information you are collecting on the site. I […]

This is the third in a series of articles covering ecommerce. You can find the previous articles here: eCommerce. What is it? Do I need it? and eCommerce Shipping and Payment Options

It is vital that you write down and follow through on your privacy policy and terms and conditions. These are going to be the documents that customers rarely read, but will save you time, money and legal problems if you have them and follow them!

Privacy Policy

”The Better Business Bureau has a sample privacy policy for online businesses as well as good articles on establishing your privacy policy and what best practices you should follow. At the very minimum it should state:

What personal information you are collecting on the site.
Whether and how a customer can remove personal information.
How the customer can view what information you have collected on them.
How the information is stored, what security you are using.
What redress the customer has if you don’t follow your policy privacy.
How you will communicated updates to the privacy policy

Privacy Alert! Don’t Collect the Customer’s Credit Card Info!

Probably the most critical issue is to state what information you are collecting on the site. I always advise my clients not to collect payment information on their website. Even with an SSL certificate you run the risk of being hacked and all of that information being stolen. You’ve heard about the thefts from Sony, Target and other large retailers? They spends millions on their security and they still get their customer information stolen. Be smart and don’t expose yourself to that risk – let your merchant gateway handle the collection of the customer’s credit card information.

Give the Customer a Choice of Privacy Options!

Most ecommerce solutions will allow customer to either create an account or complete their purchase as a guest. If they complete their purchase as a guest their name, address, email, etc., is not collected. I was actually surprised at what a big issue this is for people as I’ve never personally had a problem with creating an account when I buy online. Since talking to some clients, however, I’ve found that about half their sales come from people who don’t make an account.

Let the Customer Make Changes

If the customer does make an account, they should be able to log in and change or delete their personal information.

Terms and Conditions

”Terms and conditions cover all sorts of things, from the boring legal stuff to what the customer should do if they receive defective product. This is a document which will vary widely from website to website, so be sure and take the time to really think it over. Some good sources for starter templates are:

Some things to think about for inclusion in your Terms and Conditions document include the following, all of which were in response to events experienced by my clients:

What happens/who is at fault if a shipment never arrives or is stolen? You may want to explicitly state something to the effect that delivery by you occurs when the package is handed to the shipper.
How is an order handled if payment is cancelled, but the order has already shipped?
What kind of defects or problems are reason for a refund?
Can the customer return an item if it was opened or worn?
Who pays the return postage?

These are Legal Documents!

”Keep in mind that when you state your terms and conditions you will be bound by them if you end up in court! To be on the safe side I strongly suggest you have your terms and conditions and privacy policy reviewed by your attorney. Any suggestions I make here are only suggestions and any links to other sites are for your convenience. None of the above should be taken as legal advice!

eCommerce – Shipping and Payment Options

In the last post I discussed the basics of eCommerce, what it is, some terminology, and some options. This post covers the questions you need to ask yourself, your website designer/manager, and the eCommerce option you chose. Payment Options Will my eCommerce site be part of a community? Some third-party eCommerce providers have a marketplace set up where customers can search across all merchants. Etsy, EBay, and Yahoo Stores are examples of this. On the other hand, it is harder for your store to stand out among the others and optimizing your store to return well in Google or Bing searches is more difficult. What Payment Options does this eCommerce Application Offer to my Customers? Consider the type of payments you can expect. Will most of your customers being paying with credit or debit cards? Will your customer need an invoice which s/he submits for payment (common in large companies)? Will you accept checks? Do you need escrow services where the customer makes a payment, but the payment is held in escrow until the item is received by the customer? This is most common for big-ticket items. Almost all eCommerce solutions will have debit/credit payment options, so you are really looking […]

In the last post I discussed the basics of eCommerce, what it is, some terminology, and some options. This post covers the questions you need to ask yourself, your website designer/manager, and the eCommerce option you chose.

Payment Options

Will my eCommerce site be part of a community?

” Is your eCommerce store part of a larger group?

Some third-party eCommerce providers have a marketplace set up where customers can search across all merchants. Etsy, EBay, and Yahoo Stores are examples of this. On the other hand, it is harder for your store to stand out among the others and optimizing your store to return well in Google or Bing searches is more difficult.

What Payment Options does this eCommerce Application Offer to my Customers?

Consider the type of payments you can expect. Will most of your customers being paying with credit or debit cards? Will your customer need an invoice which s/he submits for payment (common in large companies)? Will you accept checks? Do you need escrow services where the customer makes a payment, but the payment is held in escrow until the item is received by the customer? This is most common for big-ticket items.

Almost all eCommerce solutions will have debit/credit payment options, so you are really looking at any additional payment methods you may need to offer.

How Will This eCommerce Solution Transfer Money to Me?

” How will this eCommerce solution transfer money to me?

To accept money electronically you will need a merchant account and a gateway. Some merchant accounts offer gateways with their service – though often for an additional fee (Authorize.net is a popular merchant account service). If your merchant account is through a bank, especially a local bank, you may have to pay for a gateway separately, which may double your per-transaction fees.

If you don’t already have a merchant account set up I suggest starting out with PayPal. Your customers do not need a PayPal account to use it, it is easy to set up, and the fees are comparable or lower than other merchant account services.

With all of these services – even with a gateway that works with your current bank – you will need to transfer the money from the service to your own bank account. This usually takes 3-5 days.

Shipping Options

Will this eCommerce Solution integrate with USPS, UPS or FedEx?

Most eCommerce packages have a way for shipping charges to be automatically added to orders. Many require a plugin that communicates between the shipper’s server and your store. When a shipping quote is needed your store sends the information (size, weight, etc) to the shipper’s server, which sends back options and prices.

Some eCommerce solutions offer deeper integration by letting you print labels and schedule pickups. Usually these are third party solutions and you will pay additional for these features, but if you ship a lot of goods it may be worth it.

Can the Customer Log in to See the Order Status?

” Will this eCommerce solution let customers track their orders?

This is highly recommended as part of your customer service arsenal, however it does put a greater burden on you. When an order is placed it is automatically assigned a status (i.e. Pending or In Process) to signify that the order was received. As each stage of the shipping process is completed you will need to manually change the status of the order. Let’s say you make custom leather goods. An order is received and the customer can log in and see that his order is “Pending”. When you start on the order you can change the status to “In Production”. When the product is finished and packaged to ship out you would change the status again to “Shipped” and add a note with the shipping number. Obviously you don’t need to record every step of the process (although if it takes awhile for your product to ship it is a good idea).

There are pros and cons to this. First – customer is always aware the status of the order and knows it wasn’t forgotten. It is also a good way for you to track your orders and see at a glance where in the process each order is. However it does add the burden on your of making sure to update the order at each step.

I suggest to my client to definitely use the “Shipped” notice and include the shipping number, or method of shipping if there is no shipping number.

In the next article I will talk about terms and conditions and privacy considerations.

eCommerce – What is it? Do I Need It?

The definition is simple: ecommerce is a commercial transaction that takes place on the internet. When you buy something at Amazon.com, you are participating in an ecommerce transaction as is moving money from your savings account to your checking account with your bank’s mobile app. Do I Need eCommerce? If you sell a product, the answer to this question is obvious – YES! Selling your products online expands your customer base to the entire country, or even world! If you offer a service I suggest you look at your customers rather than the services you offer. For example, I offer my services world-wide and all of my clients are comfortable buying online, so it makes sense to offer online payment options. On the other hand, my husband’s residential rental business doesn’t offer a way for tenants to pay rent online because the majority of the tenants aren’t computer users or aren’t comfortable paying online. Ask yourself – “are my customers comfortable with buying or paying over the internet? ” eCommerce Terminology Store – the store contains all of your products or services plus the shopping cart, checkout and registration. It is the total shopping experience. Shopping Cart – where purchases are stored as a customer shops. Product Listing – […]

The definition is simple: ecommerce is a commercial transaction that takes place on the internet. When you buy something at Amazon.com, you are participating in an ecommerce transaction as is moving money from your savings account to your checking account with your bank’s mobile app.

Do I Need eCommerce?

” Photo by melenita2012 ”

If you sell a product, the answer to this question is obvious – YES! Selling your products online expands your customer base to the entire country, or even world!

If you offer a service I suggest you look at your customers rather than the services you offer. For example, I offer my services world-wide and all of my clients are comfortable buying online, so it makes sense to offer online payment options. On the other hand, my husband’s residential rental business doesn’t offer a way for tenants to pay rent online because the majority of the tenants aren’t computer users or aren’t comfortable paying online.

Ask yourself – “are my customers comfortable with buying or paying over the internet? ”

eCommerce Terminology

”Store – the store contains all of your products or services plus the shopping cart, checkout and registration. It is the total shopping experience.

Shopping Cart – where purchases are stored as a customer shops.

Product Listing – this is usually a list of all products, or all products in a category.

Product Detail – this is the page with the details of the products, images and the add to cart button.

Checkout – a process that involves several steps. Usually the customer needs to input their name and address, choose delivery, and enter payment information.

Gateway – the connection between your site and your merchant account or bank. You need this to process payments online.

Confirmations – these cover a series of emails that are sent to the customer when a purchase takes place.

Notifications – these are emails sent to the shop owner when a purchase takes place.

What eCommerce Options Are Out There?

There are three main categories of eCommerce solutions:

Buy Now Button

”You don’t always need a full-fledged shopping cart solution – even when you sell products. I recommend to my clients that if they are selling a few items or services, use PayPal buy now buttons. They are simple to set up and add to your page. If you are using WordPress to manage your website there are plugns which make it even easier to create the buttons and embed in a post or page. The customer clicks on a button and is taken right to PayPal to pay. When you set up the button you enter information about what is being paid for which is sent to the shop owner, along with the customer’s name and address.

Third-Party Provider

There are several flavors of third-party providers, ranging from just providing the shopping cart to managing your entire store.

For example, PayPal has an “Add to Cart” button which create a cart separate from your website that the customer can fill. You just need to put the appropriate buttons on your site so they can add items, view their cart, and check out. The actual products listings and details are on your own page.

At the other end of the spectrum are companies where you sign up for a store account and enter everything into the store which is hosted by the company. Usually the company provides payment options for an easy, seamless experience. You will have to pay more for convenience, however, as there are monthly charges associated with these stores. Examples include: UltraCart, Volusion, and Shopify.

Self-Hosted

Self-hosted solutions put the store on your own hosting site. You may pay a one-time fee to buy the software and have it set, but there are no ongoing costs other than routine maintenance and your merchant account fees. If WordPress powers your websites, there are some very good plugins: Woocommerce and WP eCommerce which integrate the store right into your existing WordPress theme. I’m a fan of self-hosting because a) I dislike monthly fees and b) I retain controls of all of my data.

In the next post I’ll talk about what you need to know when building an eCommerce Site.

WP Plugin: Expire Tag

This brand-new WP plugin removes a tag from a post after a certain date. How would you use it? Let’s say you have a content area called “Breaking News”. That area should show all posts tagged with “breaking”, but you only want the post to be labelled as breaking for one week. Using this plugin you can set that tag to expire from the post. The post is not deleted, but since it doesn’t have the “breaking” tag associated with it, it won’t appear under “Breaking News”. Raul Martinez, the plugin’s author, says that he wrote the plugin to fulfill a need in his own place of work. It is available through the WordPress plugin interface (search for Expire Tag) or via download.

Managing Your Website for Non-Profits

Non profit organizations are in a unique situation when it comes to creating and maintaining a website. Many are staffed by volunteers or have a very limited staff which handles all aspects of the business, including the website. Other people are usually pulled into the process, creating confusion and adding time and expense to the project. Consider the following: Who is Managing the Project? Who is Managing Your Non-Profit Site?. Photo courtesy of VirginMoney(CC Attribution) Nearly every non-profit I have worked with has one person who gets the blame when something is wrong with the site, but a multitude of people who want input into the look, feel and content of the site. Instead of designating a team of decision makers, non-profits tend to have a series of conversations like this: Staff Person: Here is the home page for our new site! Board Member 1: I don’t like it. Move this, add this, change this. —Changes are made— Board Member 2: I think this should change, and do this and fix that. —Changes are made— Board Member 3: My daughter is in college and doesn’t like the site at all. She thinks we should…. —Changes are made— Board Member 1: […]

Non profit organizations are in a unique situation when it comes to creating and maintaining a website. Many are staffed by volunteers or have a very limited staff which handles all aspects of the business, including the website. Other people are usually pulled into the process, creating confusion and adding time and expense to the project. Consider the following:

Who is Managing the Project?

”

Who is Managing Your Non-Profit Site?. Photo courtesy of VirginMoney(CC Attribution)

Nearly every non-profit I have worked with has one person who gets the blame when something is wrong with the site, but a multitude of people who want input into the look, feel and content of the site. Instead of designating a team of decision makers, non-profits tend to have a series of conversations like this:

Staff Person: Here is the home page for our new site!

Board Member 1: I don’t like it. Move this, add this, change this.

—Changes are made—

Board Member 2: I think this should change, and do this and fix that.

—Changes are made—

Board Member 3: My daughter is in college and doesn’t like the site at all. She thinks we should….

—Changes are made—

Board Member 1: It is too busy. We need to start over…

And on and on. I call this the trickle effect. It is designed to waste time and money. Decide on one project manager and if consensus is needed, have a meeting with every single stakeholder present. Work out a compromise. Try not to base decisions on each person’s tastes or a viewpoint of your website audience that is incorrect. Which brings us to the next topic:

Who is Your Audience?

”

Your Non-Profit Audience. Photo courtesy of State Library of New South Wales collection(CC No Copyright)

Of the non-profits I have worked with, none had a concrete vision of who will be using their website. Build one, or even a couple, of mock users complete with names and backstories. When looking at your site or writing content, have those people constantly in mind. For example, for a non-profit homeless shelter:

Jane S. is a 40-60 year old professional woman. She may belong to a church and has the money, but not the time, to donate to our cause. She is more likely to come to our site on purpose to donate, especially for holidays or in memorial targeted donations. She will not want to click around the site, finding out how she can help.

John D. is a homeless man looking for short-term shelter and in need of long-term counseling and assistance. He may access our site through social workers and the library. He is not particularly computer-savvy, but wants to know how we can help him.

Having Jane and John as example users will help this non-profit decide the layout of their site (i.e. a donation button needs to be highly visible on each page) as well as guide content (services need to be described in simple terms, with easy instructions on how to access the services).

Your Non-Profit Will Change

Finally, realize that your site is not going to last forever – missions change, tastes change, technology changes. Don’t strive for absolute perfection for a site that you will most likely change in 3-5 years. I’ve had non-profits waste thousands of dollars on website designs, going through dozens of iterations before launching, only to go through the whole process again two years later when new board members came in and decided the site needed to be updated. (Needless to say, I don’t donate to those non-profits).

Yoast’s Hidden Feature: the Bulk Editor

Yoast WordPress SEO plugin is a must-have which I include with every installations of WordPress I do. It is free, full-featured and simple to use. So simple, in fact, that I rarely spend much time on it – just setting it up and adding titles and descriptions to pages and posts. In the redesign of my own Beyond Paper site I discovered that I didn’t have Yoast installed! After installing and configuring, I wasn’t looking forward to editing every post and page to get the title and descriptions added in. I was delighted, therefore, to find that there is a bulk editing feature which simplifies the process! With Yoast installed and activated, log into the Admin dashboard and click on SEO -> Bulk Editor in the left-hand menu. You’ll see two tabs, each with a listing of all of your posts and pages. The first tab lets you edit the titles, the second the descriptions. I went through and added SEO-friendly titles – it took me about 15 minutes for 160 entries. The descriptions will take a bit longer, so I’m breaking that project into chunks. What I will do is open each page/post in a new tab to refresh […]

How Easy is WordPress to Use?

Recently a graphic designer approached me about problem she was having with WordPress. The designer, I’ll call her Lily, had no HTML or coding skills. She’d tried many different templates, but was unhappy with them all. “I thought WordPress was user-friendly and super easy to use!”, she wailed, ” I just can’t figure out how to make it look the way I want!” Looking at the templates she’d used and discarded, they all had some customization features built into them. Generally these features allowed the user to change the colors of backgrounds and text and choose fonts and font-sizes. Some of the templates also had options for adding and customizing widget areas. What Lily wanted, however, was the ability to change everything about the site. She wanted to increase the size of the header, add borders to certain widget boxes and force text boxes to be certain sizes. In other words, she wanted to be able to change the style and layout of the entire template via some kind of click-and-point interface. Unfortunately, WordPress doesn’t work like that. WordPress is a content management system – it does make it easy to manage your content; images, text and widget areas. However WordPress depends on […]

Recently a graphic designer approached me about problem she was having with WordPress. The designer, I’ll call her Lily, had no HTML or coding skills. She’d tried many different templates, but was unhappy with them all. “I thought WordPress was user-friendly and super easy to use!”, she wailed, ” I just can’t figure out how to make it look the way I want!”

Looking at the templates she’d used and discarded, they all had some customization features built into them. Generally these features allowed the user to change the colors of backgrounds and text and choose fonts and font-sizes. Some of the templates also had options for adding and customizing widget areas.

What Lily wanted, however, was the ability to change everything about the site. She wanted to increase the size of the header, add borders to certain widget boxes and force text boxes to be certain sizes. In other words, she wanted to be able to change the style and layout of the entire template via some kind of click-and-point interface. Unfortunately, WordPress doesn’t work like that.

WordPress is a content management system – it does make it easy to manage your content; images, text and widget areas. However WordPress depends on templates and style sheets for the “bones” upon which your images and text appear. The “bone” or templates and stylesheets need to be set up by someone who understands HTML, CSS and WordPress. Because of that background structure, you can add content and your site will remain consistent – all the headers will look the same, font with be standard, links will act the same way, etc.

The best solution in this case, considering that Lily was a graphic designer, was to have her design a layout in Photoshop and send it to me. I would then create the layout in CSS and HTML and make it work with WordPress. Unfortunately she wanted to be able to constantly tweak the site and make changes to the formatting and layout. In this case, her best option would be to learn CSS, HTML and WordPress, which she was unwilling to do. I explained that just like she wouldn’t attempt to fix the transmission on her car without the proper skills, she couldn’t fix the underlying structure of her templates without the proper skills. Ultimately her client asked me to take over the project. I was able to make the changes they needed for a minimal amount of time and expense.

The take-away for this story is: work with a professional to get your site up and running and then you’ll find that WordPress is very easy to use!

Weather Widget

Displaying the weather on your site is almost required if you are in the hospitality or recreation business. Get your customers outside (or inside) with your current weather conditions straight from NOAA! This widget is different from others because you can choose the data to show and format it however you like! You can even use custom images for the different weather conditions! Updated: Demo is currently not working. I have it on my list of things to fix!

Need Checkboxes? Use Toggles!

When using checkboxes for Yes/No, On/Off or other two-option items use a toggle instead. It adds a nice look to the page and it somewhat easier to use that small checkboxes. I like them because they are easier to scan and read – the positives stick out.

Thermometers Aren’t Just for Temperatures

Use a thermometer to graphically display the amount of donations received or points accumulated! This thermometer could be adapted for any use! Update: Yahoo has changed their weather API and this is currently not working. I have it on my list to fix!

Sidebar Slider

This is a simple slider that comes onto the page from the left or right, sliding out like a box. Very effective for newsletter or contact forms.

Responsive ECommerce Grid

This awesome method of displaying ecommerce items comes from CoDrops, but I changed it up a bit. The front and back of the item can be displayed as well as more information. Try changing the size and color. The favorite button also works. This would be an awesome way to display your goods! Additionally, resize your browser and see what happens!

News Tickers – Not Just for News

A news ticker can be used for any kind of attention-grabbing headlines. Just in a few moments these are uses I came up with (remember, headlines in the ticker are clickable!): Ecommerce site – Displaying new or sale item. Blog – Display newest posts Events – Display upcoming events Fundraising – Display current status and ways to donate Restaurant – Display today’s specials Recreation – Display current weather conditions Tickers can also display data from other sites – if there is an RSS feed, it can be included in a ticker easily.

Geocoding Made Simple

Geocoding takes a regular street address and finds the latitude and longitude so that location can be displayed on a map. I do a lot of maps, and geocoding is a big part of that. Sometimes it is built into the application, other times I just need to find the coordinates of something. This little script just takes an address and returns the coordinates.

Stylish, User-Friendly Form Validation

This form script validates AND provides styling for forms. It isn’t the lightest-weight script, but it doesn’t seem to slow down your site and it contains just about anything you might need. This is one where you need to click the image and view the demos to really see how it works.

Style Up Your Login

Give your login a fresh look with this CSS-styled, javascript-enhanced login form with validation. This could even replace WordPress’ standard login.

Form Submission Animation

This flipform animation adds visual interest to a pretty vanilla form and lets your visitor know that the form has been submitted. I can think of other uses for this form though – have a multi-page form? Have the form flip to reveal the next step in the form!

Animation: Add Your Keywords to an Image

Imagine a large image with your focus keywords appearing and disappearing in random positions and sizes – that is what this neat little piece of code does. This would be ideal for a home page, but could be used in a sidebar as well. You can even change the background image AND the random text!

Simple Vertical Navigation Menu in CSS

This is about as simple as it gets – lightweight and fast, able to be infinitely styled, this expanding vertical menu solves most needs.

Date Picker Demo

Date fields should always have a datepicker associated with them. While a datepicker makes it easier to choose a date, it also formats the date to make it easier when processing the form.

Checkbox Styles

The default checkbox style is a little bland – here are three easy styles to add pizzazz to your checkboxes!

Button Hover Effects

Althought there are only a few examples right now, I’m collecting hover effects for buttons in this demo. If you see effects you like, let me know so I can deconstruct them and add them to my list!

Notification with Background Blur

Some nifty CSS and Javascript creates a notification box with the background slightly blurred. You can see the effect in this image (or the demo) with an obnoxious background. The effect is far more subtle on a more neutral background, of course.

Background Slider

This slider accommodates images that are portrait rather than landscape. It would be great in the sidebar of a site, or as a pull-quote style block in a long article with links to similar articles or supporting information.

Want to Use Multiple Themes in a Single Site? You Can Do That!

There is a new plugin at WordPress and it will allow you to assign themes to posts and pages. Want one theme for your main site, a different one for your blog and a third one for your shop? Using jonradio Multiple Themes you can do that and still manage everything – your site, blog and shop, with one WordPress installation! You could even use one theme, but tweak it for different content sections of your site! There are some problems with some paid themes, apparently, bu the plugin has great reviews. Contact me if you’d like a walk-through of this cool plugin!

Discontent with Facebook Spreading Among Advertisers

Advertisers and page owners are speaking out about Google: Facebook may be pulling off one of the most lucrative grifts of all time; first, they convinced brands they needed to purchase all their fans and likes — even though everyone knows you can’t buy love; then, Facebook continues to charge those same brands money to speak to the fans they just bought. ~ James Del, head of Gawker’s content studio Read more: http://www.businessinsider.com/advertisers-talking-about-discontent-with-facebook-2014-3#ixzz2wGHF1QWl

How Much Will My Website Cost? Depends, do you want a Ford Fiesta or a Aston Martin?

Fantastic post for design/programming professionals by Craig Buckler on Sitepoint with the question every professional dreads: “How much will my site cost?” I dread this question. In my experience, the time it takes a client to ask is inversely proportional to the amount of hassle they cause. Many IT novices consider a website to be a product: they want X pages and expect to pay a fixed price of $Y. They do not appreciate that web design and development is a service which touches all aspects of their business. I endeavor to explain this using the car industry as a metaphor. Asking for the price of a website is like walking into a used-car dealership and asking “how much does a car cost?”. The dealer must ask a series of questions: do you have a model in mind? What do you need it for? How many people will use it? How much luggage space is required? Do you have a preferred color? Does it need to be economical? Do you want a sporty car? What’s your budget? And so on. A car could cost $500 for a ten-year old Ford or $1,000,000 for a McLaren P1, yet both provide the same basic […]

Fantastic post for design/programming professionals by Craig Buckler on Sitepoint with the question every professional dreads: “How much will my site cost?”

I dread this question. In my experience, the time it takes a client to ask is inversely proportional to the amount of hassle they cause. Many IT novices consider a website to be a product: they want X pages and expect to pay a fixed price of $Y. They do not appreciate that web design and development is a service which touches all aspects of their business.

I endeavor to explain this using the car industry as a metaphor. Asking for the price of a website is like walking into a used-car dealership and asking “how much does a car cost?”. The dealer must ask a series of questions: do you have a model in mind? What do you need it for? How many people will use it? How much luggage space is required? Do you have a preferred color? Does it need to be economical? Do you want a sporty car? What’s your budget? And so on.

A car could cost $500 for a ten-year old Ford or $1,000,000 for a McLaren P1, yet both provide the same basic function. The cost varies because of design, options, comfort, after-sales service and — most importantly — quality.

Website projects can be infinitely more complex and are tightly coupled with business requirements. Consider two companies: a local electrician and a software manufacturer. Both have the same number of employees, similar annual turnover and ten-page websites. Would you expect them to pay the same for their website?

The electrician should have a web presence but it’s primarily for marketing. Their website is a adverting cost much like ads in local newspapers, trade magazines and the Yellow Pages.

To the software company, the website is their business. It’s their prime marketing, sales and support channel; they would fail without it. The website has become a business asset — not a liability.

A good agency will assess the client’s business requirements to ensure they don’t under or over-pay for the facilities they need. That said, the question “how much for my new website?” will inevitably arise.

IQTELL Update: Mobile App for Productivity on the go

After using IQTELL for the desktop for the two weeks and getting a new, much faster smartphone (the LG G2), I decided to start using the new IQTELL mobile app. Their first app was less than spectacular and I didn’t use it at all after seeing it didn’t include email. The new app has added email support and I’m really enjoying being able to access my email and Next Actions wherever I am. My workflow has even changed a bit to integrate mobile usage. During the day I’m usually in front of my computer and I have the desktop app open in my browser all through the day. The mobile app really works for me in the evenings and weekends when I’m away from my desk. These are the times all of those “I need to…” thoughts come out and distract me from my social and relaxation time. The mobile app makes it easy to capture these thoughts in IQTELL’s CollectBox. The CollectBox is perfect for all of the on-the-go stuff that enters into my head. In two clicks I can have the CollectBox open (one click if I’ve been in it recently as the app remembers where you were) and […]

” IQTELL Mobile App main screen

After using IQTELL for the desktop for the two weeks and getting a new, much faster smartphone (the LG G2), I decided to start using the new IQTELL mobile app. Their first app was less than spectacular and I didn’t use it at all after seeing it didn’t include email. The new app has added email support and I’m really enjoying being able to access my email and Next Actions wherever I am. My workflow has even changed a bit to integrate mobile usage.

During the day I’m usually in front of my computer and I have the desktop app open in my browser all through the day. The mobile app really works for me in the evenings and weekends when I’m away from my desk. These are the times all of those “I need to…” thoughts come out and distract me from my social and relaxation time. The mobile app makes it easy to capture these thoughts in IQTELL’s CollectBox. The CollectBox is perfect for all of the on-the-go stuff that enters into my head.

” The CollectBox

In two clicks I can have the CollectBox open (one click if I’ve been in it recently as the app remembers where you were) and entering in my thought. I don’t use speech-to-text much, but there is that option as well.

I don’t bother at this point deciding a next action or do any GTD thinking about the thought. I just capture it and then, the next time I’m in the office I review the CollectBox and decide what action needs to be taken.

One thing I’d really like to see with the CollectBox is a way to add attachments – especially photos. Right now I take two steps – I capture the image and save to Evernote and then put a note in the CollectBox. I suppose ideally I would treat Evernote’s Inbox as another collection box, but I need to limit my inboxes or I’ll get overwhelmed. I’m not sure it if is doable, but it would be great to add an attachment that automatically saved to Evernote and created a linked CollectBox item.

From within the app it is pretty easy to review CollectBox items and assign them to Actions or make a new Project, but adding a CollectBox item to an existing project takes several steps. To do that you have to move the item to an Action, then go to Actions, open the Action and connect it to a project. Similarly in email you can’t connect an email to an existing Action or Project as you can in the desktop app. (See my update, below)

However, I do like that under projects it is easy to add Action items with just a click. Most of the limitations with the mobile app are limitations with IQTELL’s desktop as well. My only real peeve with IQTELL over all is the way it handles emails – the threading is awful. Once an email has been assigned to a project or action any emails in the same thread should automatically attach. There should also be a way to create an email from right within an Action or Project.

But again, these issues aren’t limited to the mobile app and as IQTELL is just starting out it will just build upon its current platform. Today, without access to my desktop IQTELL app, the mobile app was a lifesaver and I’ve managed to click off 8 next actions (including this blog post)!

As an aside, using IQTELL motivated me to go back and re-read “Getting Things Done” by David Allen, the founder of GTD. It is reminding me of many parts of the system that I’ve dropped, like weekly reviews.

Update: I used the IQTELL app on my tablet last night and found additional feature – you can assign actions from within projects and also an email to a project. In fact it has the same functionality as the website. I’m going to revisit the phone app today and make sure I’m not missing something.

Carousels and Sliders – Are They Effective?

WPMUdev‘s article about UX blunders caught my eye because of the section about carousels. You know, those sliders on the home page that feature different images and content for you to click through? Two-thirds of my projects in the last three months have contained sliders of one type or another, so I was surprised to see that WPMUdev doesn’t think they work. In fact they quote this site. That site quotes the following reports: WeedyGarden, by Jason Runyon – around 1% of users click anywhere on your home page. Of the clicks on carousel, the majority are on the first item. In other words, no one is paying attention to any of the other items. With only 1% of your visitors clicking on your page at all, a miniscule number will click on your slider. Nielson Norman Group found that even when a user was told to look for something on a page (a sale) she didn’t see it in the slider. Their conclusion is user’s “banner-blindness” – we’ve become accustomed to companies selling us in banners, and the sliders/carousels are basically banners, so we don’t even see them. Wider Funnel suggests that sliders are less than useful because they don’t […]

IQTELL: GTD Optimized for You

It began with a tweet: @IQTELL only 3 after today! — Diane Ensey (@dianeensey) January 30, 2014 I So I checked out IQTELL and found out they were yet another GTD application. I’ve tried out dozens, but always returned to my less-than-optimal process of using my Gmail inbox as a to-do list. But IQTELL was free, so I tried them out. After signing up I was presented with a kind of a checklist of short videos that got me started using IQTELL’s workspace. These are well done and you do need them. There is a bit of a learning curve to using the workspace, especially if you’ve been using another system. I linked my email addresses, calendars and Evernote to IQTELL and dove in. Nearly all of my “to-dos” come through emails from clients. I’ve even trained family members to email me with things I need to do. Within the workspace it is simple to change these emails into actions because it comes with pre-loaded macros. With a couple of keystrokes I review an email message, delete it, quickly answer it if I can do it in less than 5 minutes or assign it to one of several macros: Make it […]

It began with a tweet:

@IQTELL only 3 after today!

— Diane Ensey (@dianeensey) January 30, 2014

I So I checked out IQTELL and found out they were yet another GTD application. I’ve tried out dozens, but always returned to my less-than-optimal process of using my Gmail inbox as a to-do list. But IQTELL was free, so I tried them out.

After signing up I was presented with a kind of a checklist of short videos that got me started using IQTELL’s workspace. These are well done and you do need them. There is a bit of a learning curve to using the workspace, especially if you’ve been using another system. I linked my email addresses, calendars and Evernote to IQTELL and dove in.

Nearly all of my “to-dos” come through emails from clients. I’ve even trained family members to email me with things I need to do. Within the workspace it is simple to change these emails into actions because it comes with pre-loaded macros. With a couple of keystrokes I review an email message, delete it, quickly answer it if I can do it in less than 5 minutes or assign it to one of several macros:

Make it a new stand-alone action,
Add it to a pre-existing action,
Make it an action that is part of a project,
Make a whole new project from the email, or
Save it as a reference

Boom! Each email takes about 5 seconds to review and put in the right place and as each macro runs it archives the email message in IQTELL and in your original email folder.

My inbox is now at zero, so I open the Action view screen. Here are a list of all of my actions and I can choose which ones I need to do today by clicking on a star. Once I have my action items I switch views to only see those items and drag them into order. As I accomplish them, click! They are archived.

The best part of this is the way emails can be collected together under an action or project. Remember where I said I could to add an email to a pre-existing action or a project? When I open that project or action I can see all of the emails I’ve associated with it. And here is where Evernote comes in: I can associate Evernote notes with the actions and projects, so collateral materials can be accessed from one spot. I can event associated the folder where the client website lives on my computer with the action or project.

This is what I’m loving about IQTELL and how I’m using it so far. As it has only been a week and a half I’m still both learning how to use everything and how to integrate it into my workflow. The first two days were rocky, but I’m beginning to wonder how I lived without it.

Interactive Gallery from Great Wall of Tees uses Impress.js

Great Wall of Tees uses a plugin that allows them to turn their e-commerce website into an interactive web gallery. I’d love to do something like this in a project!

WordPress e-Commerce Template : Love this Layout

Obox Design has just released a fantastic new template for the WordPress e-Commerce plugin. With a home-page slider, responsive mobile design and different layout options it could be used as-is, or I can customize it for you. The post WordPress e-Commerce Template : Love this Layout appeared first on Sophrosyne Life.

Inspirational Add-ons for Your Websites and Applications

I’ve got a bunch of browser tabs open, but no time to prototype out some of these cool ideas, so this is a roundup of items I plan on making into plugins for WordPress or incorporating into future projects. Ladda by Hakim El Hattab / @hakimel Hakim has created a UI concept that changes the Submit button in a form to reflect the loading indicator status. view News Tickers News tickers are so 1990s, but done right they can encourage visitors to click deeper into your site. Use them to highlight articles or draw attention to what is new. Here are a few I really like. Code Canyon’s Modern News Ticker With 15 different themes and 4 layouts, this ticker is a traditional “CNN news” style ticker. Totem Ticker A vertical ticker. I’d like to make this one a WordPress plugin with the option of displaying the featured image with the title overlayed for each item. VTicker Another vertical ticker, but this one runs off of a plain list (ul li). I’d love to see how this would work with images and text as well. Icon Hover Effects by Codrop I’d like to use these in a non-traditional […]

Adding Functionality to CoDrops’ Responsive Grid Design

Dammit Jim, I’m a coder not a designer. ~Dr. Bones as a programmer I’m terrible with design. My strength is taking other people’s design ideas and writing the code that makes the design work in the real world. Today’s demo is from Codrops and they call it a “responsive grid design”. I loved it right away and decided to code some back-end functionality. The first thing I did was create a JSON file featuring all of the shirts and the sizes and colors available to each (JSON file here). In a live environment this would be pulled from a database. This also makes it very easy to manipulate the items – for example arrange by price or filter by available sizes. I used the standard jQuery .getJSON() call. If you hover over the size box a list of available sizes appears. I added code to show the selected size in the box once a size is chosen. While I loved the tool-tip type popup for the colors, users want to be able to select a different color. Having the shirt image change to match that color is a bonus feature. Click on the upper-right arrow to see the back of the […]

Dammit Jim, I’m a coder not a designer. ~Dr. Bones as a programmer

I’m terrible with design. My strength is taking other people’s design ideas and writing the code that makes the design work in the real world. Today’s demo is from Codrops and they call it a “responsive grid design”. I loved it right away and decided to code some back-end functionality.

The first thing I did was create a JSON file featuring all of the shirts and the sizes and colors available to each (JSON file here). In a live environment this would be pulled from a database. This also makes it very easy to manipulate the items – for example arrange by price or filter by available sizes. I used the standard jQuery .getJSON() call.

If you hover over the size box a list of available sizes appears. I added code to show the selected size in the box once a size is chosen.

While I loved the tool-tip type popup for the colors, users want to be able to select a different color. Having the shirt image change to match that color is a bonus feature. Click on the upper-right arrow to see the back of the shirt, this image changes to match the selected color as well. Finally, the color displaying in the box should always match the color of the shirt, making it easy to grab the color information for the shopping cart.

I coded the change for the “like” heart – now if you click on it the heart will toggle on and off.

The icon on the left was meant by CoDrops for comparison shopping, but I coded it to bring up a lightbox window to show additional information about the item.

Finally I coded a hook for the add to cart icon, collecting the color, size, name and price of the item and displaying it in a popup. It would be simple to add this to a real shopping cart – for example Pay Pal.

There are a couple more things I intend to add, including the JSON change I noted above:

Filtering: The ability to filter the displayed items by price or size availability.
Ability to have different prices and colors for different sizes
Integration with CoDrops’ Horizontal Slide Out Menu. I do a lot of small ecommerce projects and if you had a limited number of items in distinct categories, this would make a cool store solution.

The post Adding Functionality to CoDrops’ Responsive Grid Design appeared first on Sophrosyne Life.

Background Slider

CSS-Tricks had a nice little slider based on Yahoo! Weather app for iOS where the background and text seem to slide separately. It was set up for manual use – users need to click on buttons or use the slider to advance, so added some code to auto-scroll, fast scrolling to the beginning when the end is reached and starting all over again. This would be a great way to highlight new articles on your front page, using the featured image for the post as the background. It would be easy to implement in WordPress. The post Background Slider appeared first on Sophrosyne Life.

Custom Block Quote Plugin

I’ve created a WordPress plugin for the styled blockquote featured in this post. To use: Upload the zip file by logging into your WP admin and clicking on Plugins->Add New Click on Upload After installation is complete click on “Activate” To use the plugin, put the following code wherever you want the blockquote to display: the_image_url.jpg is the complete URL of the image you’ve already uploaded to WP the title is the name of the book or publication. the_source.html is the URL of where the quote came from (can be left blank). The Author is (strangely enough) the author or originator of the quote. The Quotation Body is the actual quote And this is what you get: The Quotation Body The Author the title Download Plugin: bp_custom_block_quotes Thanks to CoDrops, from whom the original CSS came. jQuery(‘.nrelate_default’).removeClass(‘nrelate_default’); /* <![CDATA[ */ nRelate.domain = “www.sophrosynelife.com”; var entity_decoded_nr_mp_url = jQuery(”).html(“http://api.nrelate.com/mpw_wp/0.51.4/?tag=nrelate_popular&domain=www.sophrosynelife.com&url=http%3A%2F%2Fwww.sophrosynelife.com%2F2013%2F02%2Fcustom-block-quote-plugin%2F&nr_div_number=2&maxageposts=5256000&increment=0”).text(); nRelate.getNrelatePosts(entity_decoded_nr_mp_url); /* ]]> */ The post Custom Block Quote Plugin appeared first on Sophrosyne Life.

Round Up of This and That

There’s been an item on my to-do list forever: ”Clean Out To-Blog Folder”. When I’m browsing the web or reading my RSS feeds I bookmark stuff I find interesting and want to come back to. And then I never visit those links again. Today, finding myself with some unaccustomed free time I decided to clean out this catch-all. There is a lot of puzzling stuff in there: Introducing The Open Source Course Management System for WordPress Lovers. Maybe I had a client I thought this would work for? Lots of BuddyPress related links. I must have been testing it out. Bearded Some responsive web design links (now that I look at them, I think they need to be in List.ly: Responsive Navigation Patterns A Responsive Design Approach for Navigation The top responsive web design problems and how to avoid them Scalable Navigation Patterns In Responsive Web Design But here is some gold: A link to a personal bookmark application I set up on my server. I’d forgotten about it. This would be excellent for sharing in-house links. A link to my business FTP area. I set up a FTP area to share files? Huh. Creating Google Calendar Events by submitting […]

There’s been an item on my to-do list forever: ”Clean Out To-Blog Folder”. When I’m browsing the web or reading my RSS feeds I bookmark stuff I find interesting and want to come back to. And then I never visit those links again.

Today, finding myself with some unaccustomed free time I decided to clean out this catch-all. There is a lot of puzzling stuff in there:

Introducing The Open Source Course Management System for WordPress Lovers. Maybe I had a client I thought this would work for?
Lots of BuddyPress related links. I must have been testing it out.
Bearded

Some responsive web design links (now that I look at them, I think they need to be in List.ly:

But here is some gold:

A link to a personal bookmark application I set up on my server. I’d forgotten about it. This would be excellent for sharing in-house links.
A link to my business FTP area. I set up a FTP area to share files? Huh.
Creating Google Calendar Events by submitting a form. This is actually a great reference and I need to make a post about it.
WPNuggets, which reviews WP plugins
21 Beautiful Examples of Textures and Patterns in Web Design
5 jQuery Table of Contents (TOC) Plugins
Sitepoint’s excellent guide to building WP plugins
Twitter Bootstrap, which I use quite a bit.

And nearly a hundred jQuery or WP plugins that I wanted to remember. I guess I have some blogging to do!

jQuery(‘.nrelate_default’).removeClass(‘nrelate_default’);

/* <![CDATA[ */
nRelate.domain = "www.sophrosynelife.com";
var entity_decoded_nr_mp_url = jQuery('‘).html(“http://api.nrelate.com/mpw_wp/0.51.4/?tag=nrelate_popular&domain=www.sophrosynelife.com&url=http%3A%2F%2Fwww.sophrosynelife.com%2F2013%2F01%2Fround-up-of-this-and-that%2F&nr_div_number=2&maxageposts=5256000&increment=0”).text();
nRelate.getNrelatePosts(entity_decoded_nr_mp_url);
/* ]]> */

The post Round Up of This and That appeared first on Sophrosyne Life.

Adding Lat/Long Picker to Admin

This post is slightly out of order, but here is a screen shot of how I implemented the latitude/longitude in yesterday’s post into my standard admin interface: The user can manually enter the lat/long, click on the map – which moves the marker to the new point and fills in the lat/long fields, or enter a street address. When “find” is clicked, the map marker changes to the street address location and the lat/long fields are automatically filled in. jQuery(‘.nrelate_default’).removeClass(‘nrelate_default’); /* <![CDATA[ */ nRelate.domain = "www.sophrosynelife.com"; var entity_decoded_nr_mp_url = jQuery('‘).html(“http://api.nrelate.com/mpw_wp/0.51.4/?tag=nrelate_popular&domain=www.sophrosynelife.com&url=http%3A%2F%2Fwww.sophrosynelife.com%2F2013%2F01%2Fadding-latlong-picker-to-admin%2F&nr_div_number=2&maxageposts=5256000&increment=0”).text(); nRelate.getNrelatePosts(entity_decoded_nr_mp_url); /* ]]> */ The post Adding Lat/Long Picker to Admin appeared first on Sophrosyne Life.

Getting Map Coordinates

I do a lot of map applications where an admin can enter information about a location, business or event and have it appear on a map. In the past I’ve simply coded in a module where the admin enters the address of the location and the latitude/longitude are added to the database for that location. In some cases, however, there isn’t an address. For example, the White Pass Byway displays scenic view information along the highway. In my newest iteration of the admin interface I’ve added a module that allows user to set the latitude/longitude three ways: by street address, by manually entering the latitude and longitude or by clicking on the location on a map. All of Google Maps usual functions are available such as zooming in or out, move the map around, and using the satellite view. While not particularly difficult to implement, it is nice to have all these components in one module that can be added to an application easily. The post appeared first on Sophrosyne Life.

Text Animations

When I saw Aurelio De Rosa’s tutorial on writing a jQuery plugin I bookmarked it. What caught my eye was the title “Flashing Text Effect”. No idea why, but as I read the article and worked through the tutorial I envisioned it being used in a header with a background image. And what if that background image changed as well? I made one change to his code. I want to be able to specify the size of the text: random, normal (unchanging and inheriting the font-size from you page) or a specific, unchanging font size. This required two additions to his code. First, adding a default value: 1 2 3 4 5 6 7 8 9 10 11 12 var defaultValues = { strings: [], // array. A set of strings to show. //My addition here: fontSize: 'normal', //string. "normal" = no resizing. "random"= random resizing. Or enter size in px or ems (16px; 1.5em) //End my addition fadeIn: 300, // numeric. The time in milliseconds the element appears by fading to opaque. duration: 500, // numeric. The time of milliseconds the element stays visible. fadeOut: 300, // numeric. The time of milliseconds the element disappears by fading to transparent. […]

When I saw Aurelio De Rosa’s tutorial on writing a jQuery plugin I bookmarked it. What caught my eye was the title “Flashing Text Effect”. No idea why, but as I read the article and worked through the tutorial I envisioned it being used in a header with a background image. And what if that background image changed as well?

I made one change to his code. I want to be able to specify the size of the text: random, normal (unchanging and inheriting the font-size from you page) or a specific, unchanging font size. This required two additions to his code. First, adding a default value:

var defaultValues = {
      strings: [], // array. A set of strings to show.
      //My addition here:
      fontSize: 'normal', //string.  "normal" = no resizing. "random"= random resizing. Or enter size in px or ems (16px; 1.5em)
      //End my addition
      fadeIn: 300, // numeric. The time in milliseconds the element appears by fading to opaque.
      duration: 500, // numeric. The time of milliseconds the element stays visible.
      fadeOut: 300, // numeric. The time of milliseconds the element disappears by fading to transparent.
      selection: "random" // string. The order of selection of the strings.
                          // The possible values are: "random", "ascending", "descending".
   };</p>
<p>

Then, under the start method I added:

start: function(settings, index, idElem)
      {
         if (typeof idElem === "undefined") {
            idElem = this.selector;
         }
         if (typeof settings === "undefined") {
            $.error("Invalid method call: No settings specified");
            return;
         }
         if (index == null) {
            if (settings.selection === "ascending")
               index = 0;
            else if (settings.selection === "descending")
               index = settings.strings.length - 1;
            else
               index = Math.floor(Math.random() * settings.strings.length);
         }</p>
<p>		//My additions here
                //determine if we are resizing font or not
		var fs = "1 em";
		if(settings.fontSize == 'random') {var fs = (Math.random() * 2 + 0.5) + "em";}else if (settings.fontSize != 'normal'){ var fs = settings.fontSize;}
                //endadditions
<p>         var $text = $("<span>")
         .text(settings.strings[index])
         .addClass("audero-flashing-text") // This is used as a bookmark to help the stop method
         .css({
            position: "absolute",
            display: "none",
            fontSize: fs  //my addition
         })
         .appendTo("#" + idElem)
         .fadeIn(settings.fadeIn)
         .animate({opacity: 1}, settings.duration) // Simulate delay
         .fadeOut(settings.fadeOut, function() {
            // Remove the current element
            $(this).remove();
            var nextIndex;
            if (settings.selection === "ascending")
               nextIndex = (index + 1) % settings.strings.length;
            else if (settings.selection === "descending")
               nextIndex = (index === 0) ? settings.strings.length : index - 1;
            else
               nextIndex = Math.floor(Math.random() * settings.strings.length);
            // Start again the effect
            methods.start(settings, nextIndex, idElem);
         });

I handled the background image changer with a slick little plugin called cross-slide.js

jQuery(‘.nrelate_default’).removeClass(‘nrelate_default’);

/* <![CDATA[ */
nRelate.domain = "www.sophrosynelife.com";
var entity_decoded_nr_mp_url = jQuery('‘).html(“http://api.nrelate.com/mpw_wp/0.51.4/?tag=nrelate_popular&domain=www.sophrosynelife.com&url=http%3A%2F%2Fwww.sophrosynelife.com%2F2013%2F01%2Ftext-animations%2F&nr_div_number=2&maxageposts=5256000&increment=0”).text();
nRelate.getNrelatePosts(entity_decoded_nr_mp_url);
/* ]]> */

The post Text Animations appeared first on Sophrosyne Life.

Fun with JQuery Selectors

Lately I’ve been getting into some advanced selector options with JQuery. Selectors are what the action takes place upon. For example, $(‘h2′) will select all of the <H2> tags while $(‘p[class=”summary”]) will choose all of the <p class=”summary”> blocks. While these are easy, today I had a real challenge. I had markup similar to this: 1 2 3 4 5 6 7 8 9 10 11 12 <h2 id="stats"> <span aria-hidden="true" data-icon=""></span> Stats </h2> <h2><span aria-hidden="true" data-icon=""></span> One </h2> <h2>Two</h2> <h2>Three</h2> <h2 id="four">Four</h2> <h2 id="five">Five</h2> <h2 id="six">Six</h2> Three things needed to happen: An icon needed to appear corresponding to a “data-icon” attribute, if present <H2> tags without an id and without a specified icon needed a question mark <H2> tags with an id, but without a specified icon needed an exclamation point I’m using a custom icon font family generated at IcoMoon and the following CSS for the actual icons: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.svg#icomoon') format('svg'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'); font-weight: normal; font-style: normal; } [data-icon]:before { […]

Lately I’ve been getting into some advanced selector options with JQuery. Selectors are what the action takes place upon. For example, $(‘h2′) will select all of the <H2> tags while $(‘p[class=”summary”]) will choose all of the <p class=”summary”> blocks.

While these are easy, today I had a real challenge. I had markup similar to this:

<h2 id="stats">
  <span aria-hidden="true" data-icon=""></span>
  Stats
</h2>
<h2><span aria-hidden="true" data-icon=""></span>
   One
</h2>
<h2>Two</h2>
<h2>Three</h2>
<h2 id="four">Four</h2>
<h2 id="five">Five</h2>
<h2 id="six">Six</h2>

Three things needed to happen:

An icon needed to appear corresponding to a “data-icon” attribute, if present
<H2> tags without an id and without a specified icon needed a question mark
<H2> tags with an id, but without a specified icon needed an exclamation point

I’m using a custom icon font family generated at IcoMoon and the following CSS for the actual icons:

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot');
	src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('fonts/icomoon.svg#icomoon') format('svg'),
		url('fonts/icomoon.woff') format('woff'),
		url('fonts/icomoon.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

[data-icon]:before {
	font-family: 'icomoon';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-alone {
  display: inline-block; /* Fix for clickability issue in WebKit */
  font-size: 36px;
  text-decoration:none;
  color:#60F;
}
.screen-reader-text { /* Reusable, toolbox kind of class */
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Thanks to CSS-Tricks for their code and an explanation of icons and screen readers.

The Stats and One headers are our plain vanilla markup handled purely by CSS. They both have specific data-icon attributes on their associated spans.

First, let’s add the question mark icon to those headers which don’t have an id:

1
2
3

$('h2:not([id]):not(:has(span))').each(function(){
  $(this).prepend('<span aria-hidden="true" data-icon=""></span>');	
});

<$(‘h2:not([id]):not(:has(span))’)> is the selector in in plain English it reads thus:
Get header tag of <H2>
that doesn’t have an id :not([id])
and doesn’t have a child span <:not(:has(span))>.

To each element that the selector finds we want to attach as the first item under the element a new span <( $(this).prepend(‘‘);>

We now our question mark icons. Next, we need our exclamation point icons for those headers that have an id, but lack a specified data-icon:

1
2
3

$('h2[id]:not(:has(span))').each(function(){
  $(this).prepend('<span aria-hidden="true" data-icon=""></span>');	
});

The selector is <$(‘h2[id]:not(:has(span))’)> and in plain English is reads:
Get each h2 header tag that has any id attribute set <$(‘h2[id]>
excluding ones that do have a child span <:not(:has(span))>.

”

View Demo.

jQuery(‘.nrelate_default’).removeClass(‘nrelate_default’);

/* <![CDATA[ */
nRelate.domain = "www.sophrosynelife.com";
var entity_decoded_nr_mp_url = jQuery('‘).html(“http://api.nrelate.com/mpw_wp/0.51.4/?tag=nrelate_popular&domain=www.sophrosynelife.com&url=http%3A%2F%2Fwww.sophrosynelife.com%2F2013%2F01%2Ffun-with-jquery-selectors%2F&nr_div_number=2&maxageposts=5256000&increment=0”).text();
nRelate.getNrelatePosts(entity_decoded_nr_mp_url);
/* ]]> */

The post Fun with JQuery Selectors appeared first on Sophrosyne Life.

I Hate Phones

I worked for 10 years in a job where I was responsible for the phones for a business, first as the receptionist and then ultimately as the controller in charge of office staff. As a result I hate phones. I hate hearing them ring and I hate talking on them. In fact my brain tends to go blank when I talk on a phone. Probably post traumatic stress disorder. Voice mail is terrible because it is impossible to leave a succinct message on the spur of the moment. I use Google Voice for voicemail, so the interface is OK, but most messages boil down to “call me”. I make it very clear in my business that I prefer email to telephone conversations, which is why I was delighted to see John Scalzi express the same preference: Well, I finally did what I should have done about four years ago, which is to change my cell phone voice mail message to this: Hi, this is John Scalzi. I will never ever ever ever listen to the voice mail you’re about to leave, because voice mail is a pain in the ass. So if you actually want to reach me, you can either […]

”I worked for 10 years in a job where I was responsible for the phones for a business, first as the receptionist and then ultimately as the controller in charge of office staff. As a result I hate phones. I hate hearing them ring and I hate talking on them. In fact my brain tends to go blank when I talk on a phone. Probably post traumatic stress disorder. Voice mail is terrible because it is impossible to leave a succinct message on the spur of the moment. I use Google Voice for voicemail, so the interface is OK, but most messages boil down to “call me”.

I make it very clear in my business that I prefer email to telephone conversations, which is why I was delighted to see John Scalzi express the same preference:

Well, I finally did what I should have done about four years ago, which is to change my cell phone voice mail message to this:

Hi, this is John Scalzi. I will never ever ever ever listen to the voice mail you’re about to leave, because voice mail is a pain in the ass. So if you actually want to reach me, you can either send me a text at this number, or send me e-mail at “john@scalzi.com.” Feel free to leave a voice message if you want, but remember, I will never ever listen to it. Have a nice day!

Why? Because fuck me, voice mail is annoying. Especially on cell phones, on which it seems designed by the furies to punish everyone, not just the people who mock the gods. And you know what? Life is too short to deal with a horrible user interface, especially when everyone under the age of 103 knows how to send a goddamned text. So that’s it, I’m done with voice mail, that hateful contrivance. And I feel good.

There are a very few times when phone calls clear up misunderstandings or settle a problem that would have taken multiple emails, but in those cases I just schedule a phone call. Other than that, my phone is set to ring only for family and close friends.

BTW – if you don’t follow John Scalzi’s blog you are really missing out. He covers a range of issues in a thoughtful, intelligent way. And he has cats and a lovely daughter and wife and he make no effort to hide that he adores them.

jQuery(‘.nrelate_default’).removeClass(‘nrelate_default’);

/* <![CDATA[ */
nRelate.domain = "www.sophrosynelife.com";
var entity_decoded_nr_mp_url = jQuery('‘).html(“http://api.nrelate.com/mpw_wp/0.51.4/?tag=nrelate_popular&domain=www.sophrosynelife.com&url=http%3A%2F%2Fwww.sophrosynelife.com%2F2013%2F01%2Fi-hate-phones%2F&nr_div_number=2&maxageposts=5256000&increment=0”).text();
nRelate.getNrelatePosts(entity_decoded_nr_mp_url);
/* ]]> */

The post I Hate Phones appeared first on Sophrosyne Life.

Redesigning an Admin Interface to a Database Part 1

Many of my clients need database applications for their website, and some time ago I built a module system that I could use as a base for more customized functionality. The modules work together to create an admin area – a password protected part of the site where the administrator can add, edit and delete items from the database. For example, Washington Farmers Markets Association uses a database to gather member information which then displays on a Google Map on the public side of their website. Other clients use custom database applications to: collect registration information for potential students collect job applicant information and track interviews create a custom catalog of employee uniforms for franchise-based organizations The Problem My code was around 5 years old and really needed updating from the group up and the interface – the look and feel of the admin site pages – was down-right ugly. I needed to start all over. The Template I decided to use a template system from ThemeForest called Developr to give my new interface a fresh, modern look. It includes styling and jquery code for everything I could ever want; forms, columns, modal and popup notifications – you name […]

Many of my clients need database applications for their website, and some time ago I built a module system that I could use as a base for more customized functionality. The modules work together to create an admin area – a password protected part of the site where the administrator can add, edit and delete items from the database.

For example, Washington Farmers Markets Association uses a database to gather member information which then displays on a Google Map on the public side of their website.

”

Other clients use custom database applications to:

collect registration information for potential students
collect job applicant information and track interviews
create a custom catalog of employee uniforms for franchise-based organizations

The Problem

My code was around 5 years old and really needed updating from the group up and the interface – the look and feel of the admin site pages – was down-right ugly. I needed to start all over.

The Template

I decided to use a template system from ThemeForest called Developr to give my new interface a fresh, modern look. It includes styling and jquery code for everything I could ever want; forms, columns, modal and popup notifications – you name it, it is included. The learning curve was pretty easy once I stepped into it.

”

You can test drive this template here. Use anything for the username and password.

In my next post I’ll talk about authentication and getting the basic framework set up.

jQuery(‘.nrelate_default’).removeClass(‘nrelate_default’);

/* <![CDATA[ */

var entity_decoded_nr_mp_url = jQuery('‘).html(“http://api.nrelate.com/mpw_wp/0.51.4/?tag=nrelate_popular&domain=www.sophrosynelife.com&url=http%3A%2F%2Fwww.sophrosynelife.com%2F2013%2F01%2Fredesigning-an-admin-interface-to-a-database-part-1%2F&nr_div_number=4&maxageposts=5256000&increment=0”).text();
nRelate.getNrelatePosts(entity_decoded_nr_mp_url);
/* ]]> */

The post Redesigning an Admin Interface to a Database Part 1 appeared first on Sophrosyne Life.

Give Your Pages an Obvious Name

by Tambako the Jaguar Time for a rant about websites that use cute or unusual page naming conventions. You know the ones – instead of “Contact” or “Contact Us” they say “Start a Conversation”, ”How Can We Help” or some other verbiage which makes me stop and think. This is a bad thing. Unless I have a very good reason, I won’t stop and think. Instead of trying to decipher what you mean I’ve already moved on to your competitor who has a clearly labelled Support page instead of your cutesy “Let’s Figure This Out”. These are the page I expect to easily find on a website: Contact Support About At the very minimum, if you have these pages, don’t conceal them with silly names. Don’t make me work. Make me a client. jQuery(‘.nrelate_default’).removeClass(‘nrelate_default’); /* <![CDATA[ */ nRelate.domain = "www.sophrosynelife.com"; var entity_decoded_nr_mp_url = jQuery('‘).html(“http://api.nrelate.com/mpw_wp/0.51.4/?tag=nrelate_popular&domain=www.sophrosynelife.com&url=http%3A%2F%2Fwww.sophrosynelife.com%2F2013%2F01%2Fgive-your-pages-an-obvious-name%2F&nr_div_number=2&maxageposts=5256000&increment=0”).text(); nRelate.getNrelatePosts(entity_decoded_nr_mp_url); /* ]]> */ The post Give Your Pages an Obvious Name appeared first on Sophrosyne Life.

Sneak Peak: New Admin Interface

I have an admin interface that I use for my database projects which has sorely needed updating. Here is a sneak peak at what editing and adding a new entry will look like: I’m using the Developr template which gives the page its look and has styling for toggles and many kinds of buttons. The biggest feature I’ve added to the new interface so far is the ability to add multiple image to a listing! Now you can have as many images as you want! Coming features include: Add new categories/subcategories from the edit screen. Add tags from the edit screen. Get latitude/longitude by clicking on a map. All of this data is used to create customized Google Maps on the client-side. Some examples include: Washington Farmers Market Association White Pass Byway jQuery(‘.nrelate_default’).removeClass(‘nrelate_default’); /* <![CDATA[ */ var entity_decoded_nr_mp_url = jQuery('‘).html(“http://api.nrelate.com/mpw_wp/0.51.4/?tag=nrelate_popular&domain=www.sophrosynelife.com&url=http%3A%2F%2Fwww.sophrosynelife.com%2F2013%2F01%2Fsneak-peak-new-admin-interface%2F&nr_div_number=4&maxageposts=5256000&increment=0”).text(); nRelate.getNrelatePosts(entity_decoded_nr_mp_url); /* ]]> */ The post Sneak Peak: New Admin Interface appeared first on Sophrosyne Life.

Speeding Up Your WordPress Site

My personal and business site score really well, but I’m thinking of testing these plugins on my sandbox installs where I’m running a bunch of different plugins. 2 Plugins to Put Your Site in the Fast Lane jQuery(‘.nrelate_default’).removeClass(‘nrelate_default’); /* <![CDATA[ */ nRelate.domain = "www.sophrosynelife.com"; var entity_decoded_nr_mp_url = jQuery('‘).html(“http://api.nrelate.com/mpw_wp/0.51.4/?tag=nrelate_popular&domain=www.sophrosynelife.com&url=http%3A%2F%2Fwww.sophrosynelife.com%2F2012%2F12%2Fspeeding-up-your-wordpress-site%2F&nr_div_number=2&maxageposts=5256000&increment=0”).text(); nRelate.getNrelatePosts(entity_decoded_nr_mp_url); /* ]]> */ The post Speeding Up Your WordPress Site appeared first on Sophrosyne Life.

Curved Text with ArcText.js

In an ideal website, text is completely separate from images. This way you can edit the text without needing a new image. In the real world this can be difficult. The ArcText.js plugin takes care of one design issue: curving your text. jQuery(‘.nrelate_default’).removeClass(‘nrelate_default’); /* <![CDATA[ */ nRelate.domain = "www.sophrosynelife.com"; var entity_decoded_nr_mp_url = jQuery('‘).html(“http://api.nrelate.com/mpw_wp/0.51.4/?tag=nrelate_popular&domain=www.sophrosynelife.com&url=http%3A%2F%2Fwww.sophrosynelife.com%2F2012%2F12%2Fcurved-text-with-arctext-js%2F&nr_div_number=2&maxageposts=5256000&increment=0”).text(); nRelate.getNrelatePosts(entity_decoded_nr_mp_url); /* ]]> */ The post Curved Text with ArcText.js appeared first on Sophrosyne Life.

Footers for Your Website

Some really great footer designs were posted over at WPMU. I wish I had the creativity of a designer to dream up designs like this, but being a programmer has its advantages too. My favorite: I love how the images and the dynamic content fit together. jQuery(‘.nrelate_default’).removeClass(‘nrelate_default’); /* <![CDATA[ */ nRelate.domain = "www.sophrosynelife.com"; var entity_decoded_nr_mp_url = jQuery('‘).html(“http://api.nrelate.com/mpw_wp/0.51.4/?tag=nrelate_popular&domain=www.sophrosynelife.com&url=http%3A%2F%2Fwww.sophrosynelife.com%2F2012%2F12%2Ffooters-for-your-website%2F&nr_div_number=2&maxageposts=5256000&increment=0”).text(); nRelate.getNrelatePosts(entity_decoded_nr_mp_url); /* ]]> */ The post Footers for Your Website appeared first on Sophrosyne Life.

Make jQuery Menu Widget Horizontal

I was excited to see the menu widget added to jQuery, but it defaults to a vertical list. After playing around with it and doing some research, I found this fix to make the menu horizontal: 1 2 3 4 5 6 7 8 9 10 11 <ul id="nav"> <li><a href="#">Item #1</a> <ul> <li><a href="#">Sub#1</a></li> <li><a href="#">Sub#2</a></li> </ul> <li><a href="#">Item #2</a></li> <li><a href="#">Item #3</a></li> <li><a href="#">Item #4</a></li> <li><a href="#">Item #5</a></li> </ul> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .ui-menu .ui-menu-item { margin:10px; padding: 0; zoom: 1; float: left; clear: none; width: auto; } #nav li { width: auto; clear: none; } .ui-menu .ui-menu-item a{ padding: 2px .2em; } Thanks to coderevision.com for the above. However, submenus still hang out to the right of the menu item. Changing this is easy using jQuery UI positioning: 1 $('#nav').menu({ position: { my: "center bottom"} }); The post Make jQuery Menu Widget Horizontal appeared first on Sophrosyne Life.

Console in IE Will Break Code

While creating a javascript app yesterday I discovered the IE dislikes the console tool. My app was working perfectly in Firefox and Chrome, but would not work for anything in IE unless the Developer Tools were open. After some research and a little trial-and-error I found that it was a console.log() command that was breaking the app. For reference, using a check to see if console was available broke the code as well. Example: 1 if(console){console.log(error);} The post Console in IE Will Break Code appeared first on Sophrosyne Life.

Battling Comment Spam

Many of my clients are getting hit big time by comment spam on their blogs. For whatever reason the problem has been worse than usual in the past two months. There are some easy solutions, however. Spam Filter Akismet is the spam solution bundled with WordPress. You have to pay around $5/mo for a business blog, but it is worth it. I use Akismet on my blogs and only rarely have to deal with spam. Limit the Comment Period From the WordPress dashboard click on Settings->Discussion. Where it says “Other Comment Settings” click on “Automatically close comments on articles older than 14 days” and set the number of days. I suggest using the default 14 days. This will keep spambots from trying to add comments for all of your old posts. Approve Comments Don’t allow comments to automatically appear on your blog! While you are in the Discussion settings page, make sure one of these is checked: An administrator must always approve the comment Comment author must have a previously approved comment Watch Out for Stealth Spam Don’t just look at the comment. I’m seeing a lot of comments that look like they are real, but when I look at the […]

”Many of my clients are getting hit big time by comment spam on their blogs. For whatever reason the problem has been worse than usual in the past two months. There are some easy solutions, however.

Spam Filter

Akismet is the spam solution bundled with WordPress. You have to pay around $5/mo for a business blog, but it is worth it. I use Akismet on my blogs and only rarely have to deal with spam.

Limit the Comment Period

From the WordPress dashboard click on Settings->Discussion. Where it says “Other Comment Settings” click on “Automatically close comments on articles older than 14 days” and set the number of days. I suggest using the default 14 days. This will keep spambots from trying to add comments for all of your old posts.

Approve Comments

Don’t allow comments to automatically appear on your blog! While you are in the Discussion settings page, make sure one of these is checked:

An administrator must always approve the comment
Comment author must have a previously approved comment

Watch Out for Stealth Spam

Don’t just look at the comment. I’m seeing a lot of comments that look like they are real, but when I look at the URL or email of the person writing the comment I can see it is spam. How can you tell? Oh, you’ll know. Here are a sample of URLs I’ve seen:

buycheapestcigarettesonline.com/11-parliamentxsimadotson@t-online.de
healthycholesteroldiets.com/vingplaz@msn.com
cheapjerseysoutletsshop.com/lqeeztojiz@gmail.com

You get the picture. My philosophy is “when in doubt, it is spam”.

For Laughs

Here are some of the strange spam comments I’ve seen:

If I may well –perhaps you must contemplate adding several images. I dont mean to disrespect what youve said; its very enlightening, indeed. However, I feel would respond to it a lot more positively if they could possibly be something tangible to your ideas. Keep it up, but put a little more into it next time.
I am usually to blogging and i actually respect your content. The article has really peaks my interest. I am going to bookmark your web site and maintain checking for brand spanking new information.
Oh my goodness! an incredible article dude. Thanks Nevertheless I am experiencing difficulty with ur rss . Dont know why Unable to subscribe to it. Is there anybody getting equivalent rss downside? Anybody who is aware of kindly respond. Thnkx
A lot of thanks for making that the effort to discuss this, I feel strongly about this and such as learning a great deal more on this topic. If doable, because you gain expertise, would you mind updating your webpage with a great deal more details? It’s really beneficial for me

The post Battling Comment Spam appeared first on Sophrosyne Life.

5 Steps to Consistent Blogging

You have your blog and it is all shiny new, customized to your specifications. For the first month or two, blogging will be easy. You will have lots of topics to write about and your posts will just fly from your fingers. You may blog once a day or several times a week at least. Then it gets tough. You run out of easy topics. Other parts of your life and business call to you. Blogging becomes less important. Your posts fall to once a week, then monthly and every post seems to start with “Sorry I haven’t update in awhile…” Every blogger runs into this, even veteran bloggers will have dry spells. Here are 5 steps to keeping your blog updated and consistent. Decide on a Posting Schedule How many times a week do you want a new post to appear on your blog? Look at your potential readership and decide how many posts a week (or month) will keep them engaged. You aren’t deciding how many times a week you will sit down and write a blog post here, but just the number of posts that need to be created. Use an Editorial Calendar I use the WordPress Editorial […]

You have your blog and it is all shiny new, customized to your specifications. For the first month or two, blogging will be easy. You will have lots of topics to write about and your posts will just fly from your fingers. You may blog once a day or several times a week at least. Then it gets tough. You run out of easy topics. Other parts of your life and business call to you. Blogging becomes less important. Your posts fall to once a week, then monthly and every post seems to start with “Sorry I haven’t update in awhile…”

Every blogger runs into this, even veteran bloggers will have dry spells. Here are 5 steps to keeping your blog updated and consistent.

Decide on a Posting Schedule

How many times a week do you want a new post to appear on your blog? Look at your potential readership and decide how many posts a week (or month) will keep them engaged. You aren’t deciding how many times a week you will sit down and write a blog post here, but just the number of posts that need to be created.

Use an Editorial Calendar

I use the WordPress Editorial Calendar which allows me not only to view at a glance the posts I have scheduled, but also to schedule posts. For example, I like to run a WordPress plugin review on Wednesdays, so I will schedule this ahead and I can look immediately and see where I have posts that need to be written because they are marked as “Draft”:

”

Looking at this calendar I can see that I have some catching up to do. I need a post for today (Nov. 1), tomorrow and next week.

Write Posts All At Once

I rarely sit down to write a post on the day it is scheduled to appear. I usually have two or three posts already written ahead and when I do have time to write I post another two or three, scheduling them in the future. Today I let myself get behind because I had two weeks of posts scheduled, got lazy and didn’t write anything more or look at my blog until today. Now I have to get caught back up!

The editorial calendar plugin also makes it easy to rearrange posts. If something more timely comes up, I can post that immediately and moved the scheduled post to another day.

Keep a List of Topics

Most of my posts come as a result of either something I’m working on for a client, a new script I found cool and want to share. I put the code snippet and any notes inside its own folder which goes in a folder called “To Blog” on my computer. When I’m ready to blog I look at all of the folders and decide what I want to finalize and share.

I also find topics in blog posts by other people. When I go through my RSS feed (I use Google Reader) I open each post I find particularly interesting and bookmark it in a bookmark folder called (you guessed it) “To Blog”. As a result, when I have time to write posts I have lots of things to choose from.

Find the Time

Blogging does take time and every person’s schedule is different. I work for myself, so it is somewhat easier to find time to blog. I also find it relaxing, so as a break sometimes I’ll sit and hammer out a post or two. Once of my clients sits down on Sunday evening and writes her posts for the upcoming week. Make your blog important and you will find the time to write your posts.

I’d love to hear how you keep up with your blogging! Any tips? Share them in the comments.

The post 5 Steps to Consistent Blogging appeared first on Sophrosyne Life.

Custom Login Form with Validation

I’m not a designer and lack that creative spark, so I get excited when I see new, unusual designs like this login form: This was created by Hugo Giraudel at Codrops and the use of icons and round button caught my eye. In my example I’ve souped it up a bit with validation: As you click on each field to supply the missing information, the corresponding validation box disappears. There is no additional HTML markup. Here is the CSS: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 div.error{ font-size: 12px; color: red; font-weight: bold; position:absolute; left: 175px; top:0px; width: 250px; height: 40px; z-index: 999; padding: 10px; /* Styles */ box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 3px 7px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255,255,255,1), inset 0 -3px 2px rgba(0,0,0,0.25); border-radius: 5px; background: white; /* Fallback */ background: -moz-linear-gradient(#eeefef, #ffffff 10%); background: -ms-linear-gradient(#eeefef, #ffffff 10%); background: -o-linear-gradient(#eeefef, #ffffff 10%); background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff)); background: -webkit-linear-gradient(#eeefef, #ffffff 10%); background: linear-gradient(#eeefef, #ffffff 10%); } .error p{margin-left: 40px;} .error span […]

I’m not a designer and lack that creative spark, so I get excited when I see new, unusual designs like this login form:

”

This was created by Hugo Giraudel at Codrops and the use of icons and round button caught my eye. In my example I’ve souped it up a bit with validation:

As you click on each field to supply the missing information, the corresponding validation box disappears. There is no additional HTML markup. Here is the CSS:

div.error{
font-size: 12px;
color: red;
font-weight: bold;
position:absolute;
left: 175px;
top:0px;
width: 250px;
height: 40px;
z-index: 999;
padding: 10px;

/* Styles */
box-shadow:
0 0 1px rgba(0, 0, 0, 0.3),
0 3px 7px rgba(0, 0, 0, 0.3),
inset 0 1px rgba(255,255,255,1),
inset 0 -3px 2px rgba(0,0,0,0.25);
border-radius: 5px;
background: white; /* Fallback */
background: -moz-linear-gradient(#eeefef, #ffffff 10%);
background: -ms-linear-gradient(#eeefef, #ffffff 10%);
background: -o-linear-gradient(#eeefef, #ffffff 10%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff));
background: -webkit-linear-gradient(#eeefef, #ffffff 10%);
background: linear-gradient(#eeefef, #ffffff 10%);
}
.error p{margin-left: 40px;}
.error span {
/* Size and position */
width: 30px;
height: 30px;
float: left
}
i{color:#42A2BC;}

The jQuery:

$(function() {
$('#form-1').on('submit',function(e){
e.preventDefault();
//Check that each field is not empty
$('input').each(function(){
if($(this).val() == ""){
$(this).before('<div class="error"><span><i class="icon-arrow-left icon-large"></i></span><p>'+$(this).attr('placeholder') +' required</p></div>');
}
});

//If no error messages, send
if($('.error').size() == 0){
alert('Submitted');
$('#form-1').submit(function(){
//Some submission stuff here
});
}
});

$('input').on('focusin',function(){
$(this).prev('div').remove();
});

});

All we are doing here is adding a <div> with the error message if a field is empty, then removing it when the appropriate field gets clicked on. We don’t need any more sophisticated validation for this form, but checking for valid email or other validations would be pretty easy to integrate.

The post Custom Login Form with Validation appeared first on Sophrosyne Life.

Transparent Notification Box

An informational notification box that is slightly transparent over the background. This uses the blur.js plugin and you can see the transparency is more pronounced with a brighter background: I like this notification plugin for longer messages or information – perhaps even to preview blog posts before clicking through to them. The post Transparent Notification Box appeared first on Sophrosyne Life.

Color Tool Tips

Ah tool tips. Does anyone use them anymore? I can think of several reason why they could be necessary: Tell a visitor where a link is leading them – off your site? On your site? Define an acronym. If you use a lot of acronyms, it might just be easier to use a tool tip for the full name. Limited footnote information. Explain a term or describe where the information came from. Hover over the links in the paragraph below to see the different tool tips. You can also see the demo here. This is a jQuery plugin and is extremely lightweight. Adding tool tips is simple, just add a title tag to your link: <a href=”https://beyond-paper.com” title=”The tooltips do not use any images”> The post Color Tool Tips appeared first on Sophrosyne Life.

More Notification Plugins for Your Website or Application

Yesterday I talked about Gritter, my favorite notification plugin, but there are times you want something different. Noty and Notify! each handle notifications in a different way and have a place in the website design toolbox. Noty In a nutshell, Noty lets you place a popup anywhere on the screen with formatting for Warning, Information, Notification, Error and Success. This is a nifty plugin, fairly lightweight and easy to style to fit in with your site: Notify! Notify‘s notifications appear at the top of the browser screen. I’ve seen this kind of notification quite a bit, but I’m not entirely sure they stand out enough on a busy site. That said, you could style the notification to appear lower, within an element for example. In the demo I moved the notification to appear below my header: How to choose which type of notification to use? It really depends on your audience and what they will respond to best. For notifications that aren’t error warnings, I like Gritter. For warnings, depending on the context and site layout something like Notify! or Noty works better. While I was looking up the homepage links for Noty and Notify! I found lots […]

Opaque Notification Popups for Your Website or Application

Jordan Boesch over at boedesign.com has developed what is becoming my favorite notification app, Gritter for jQuery. Gritter notifications appear on the right side of the screen with an opaque background and are clean, elegant and modern way of handling alerts and notifications. Notification can remain until the user clicks them off, or can fade out, and numerous notifications can appear stacked. As one notification closes the others slide up. Notification can include images and there is an option for a light background as well. The post Opaque Notification Popups for Your Website or Application appeared first on Sophrosyne Life.

Do You Schedule Your Social Media Posts?

I’m reading Web Automation, Part 1 a guide by MakeUseOf.com and written by Rahul Saigal and one section got me thinking: automating social posts. The whole idea of social media (Facebook, Twitter, etc) is its immediacy, so why would you schedule your posts? The main reason to my mind is avoiding cluttering up your followers’ feed with a whole bunch of posts all at once. Unlike me, you probably access Facebook once or twice a day and post and share everything on your mind all at once. That quote you saw, a picture or two, posts from a couple of friends. Right there you’ve posted 4-5 items in a row, all of which show up in your friend’s feeds at once. How likely is it that all those posts are going to be really read? A better idea is to space out your posts. If you are posting to a Facebook page (not your profile), this is easy. When you create the post there is a little clock icon to click on that walks you through setting the date and time you want your post to appear. Posting to your profile page on Facebook or to Twitter requires a separate application. I use […]

Menus: Drop Down, Graphic and Social Media Style

Caveat: I got all of these examples from somewhere over the years and collected them in a folder. If you recognize your work let me know – I want to give you credit! Vertical Drop Down Basically styled, this dropdown is lightweight and supports nested submenus. View Demo I like this menu. It is very minimalist, but the CSS could be jazzed up if you need more flair. It is nice and clean though and will work everywhere. Clean Drop Navigation When clicked, the submenus drop down from a rounded button. Though I have the buttons on a contrasting background, you could make them both the same for a cleaner look, or add a gradient for a more 3-d feel. Graphic Background Menu An awesome way to use a custom background and break out of the horizontal menu look. Garage Door Sliding Menu On hover the images for each button slide up to reveal text behind the button. I think this one is unusual as well and add some interest to a page. YouTube Style Buttons Buttons that are unobtrusive, but when hovered over seem to pop up. I need to work on coding a solution for the dropdowns for […]

Create a WordPress Index List with Tags as Headers

I’ve been going through my inspiration folders and blogging about the items I find cool or useful, but I wanted an easier way for readers and clients to browse my inspiration pieces. In the past I’d managed a hard-coded list with links, not something I wanted to maintain now. Since I write posts about most of these items, it made sense to find a way for WordPress to compile the index itself using tags. The criteria: Each tag would be a header with a list of posts under it Some posts would appear in multiple tags Only the categorizing tags would appear in the list (i.e. not every tag I use, just those I want in the index) The list of posts would consist of the title which is linked to the demo (not the post itself). If there is no separate demo, it will link to the post. The result: First, I created a new page template. Because I use the Genesis framework, this would be the easy part. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <?php /* Template Name: Inspiration */ /** Remove the […]

I’ve been going through my inspiration folders and blogging about the items I find cool or useful, but I wanted an easier way for readers and clients to browse my inspiration pieces. In the past I’d managed a hard-coded list with links, not something I wanted to maintain now. Since I write posts about most of these items, it made sense to find a way for WordPress to compile the index itself using tags. The criteria:

Each tag would be a header with a list of posts under it
Some posts would appear in multiple tags
Only the categorizing tags would appear in the list (i.e. not every tag I use, just those I want in the index)
The list of posts would consist of the title which is linked to the demo (not the post itself). If there is no separate demo, it will link to the post.

The result:

”

First, I created a new page template. Because I use the Genesis framework, this would be the easy part.

<?php
/*
Template Name: Inspiration
*/
/** Remove the standard loop */
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action('genesis_loop', 'bp_do_loop');

&nbsp;

&nbsp;

/** Add the Portfolio widget area */
/*
add_action( 'genesis_loop', 'lifestyle_portfolio_widget' );
function lifestyle_portfolio_widget() {
dynamic_sidebar( 'portfolio' );
}
*/
genesis();

I removed the standard genesis loop which actually creates the content of a page and added a call to my own custom loop….which I now needed to write. But first, I created the new page in WordPress (Dashboard->Pages->Add New) and applied the template so I could test everything as I went along. I also created a category called “Inspiration Index”.

The Loop

We are actually doing something pretty complicated here. First, we want to get a list of all of the tags in the category “Inspiration Index”. Then we want to go through each tag, print it as a header and then find all of the posts that are in “Inspiration Index” and use that tag.

I was lucky and found a ready made search function in the WordPress forums :

function get_category_tags($args) {
global $wpdb;
$tags = $wpdb-&gt;get_results
("
SELECT DISTINCT terms2.term_id as tag_id, terms2.name as tag_name, null as tag_link
FROM
wp_posts as p1
LEFT JOIN wp_term_relationships as r1 ON p1.ID = r1.object_ID
LEFT JOIN wp_term_taxonomy as t1 ON r1.term_taxonomy_id = t1.term_taxonomy_id
LEFT JOIN wp_terms as terms1 ON t1.term_id = terms1.term_id,

wp_posts as p2
LEFT JOIN wp_term_relationships as r2 ON p2.ID = r2.object_ID
LEFT JOIN wp_term_taxonomy as t2 ON r2.term_taxonomy_id = t2.term_taxonomy_id
LEFT JOIN wp_terms as terms2 ON t2.term_id = terms2.term_id
WHERE
t1.taxonomy = 'category' AND p1.post_status = 'publish' AND terms1.term_id IN (".$args['categories'].") AND
t2.taxonomy = 'post_tag' AND p2.post_status = 'publish'
AND p1.ID = p2.ID
ORDER by tag_name
");
$count = 0;
foreach ($tags as $tag) {
$tags[$count]-&gt;tag_link = get_tag_link($tag-&gt;tag_id);
$count++;
}
return $tags;
}

This function takes an array of category ids and returns all of the tags for those categories, which is half the work! I added the function to my functions.php file and created a new function for my custom loop:

1
2
3

function bp_do_loop(){

}

I get the list of tags for my category “Inspiration Index” (which has an id of 209):

$args = array('categories' => '209');
$tags = get_category_tags($args);

}

&nbsp;

and create a loop to step through each tag in my list:

{code type=php}

foreach ($tags as $tag) {
if($tag->tag_name != 'bp' && $tag->tag_name != 'featured content'){
echo "<h3>".ucfirst($tag->tag_name)."</h3><ul class='no-list'>";

}

}

&nbsp;

The if statement removes two tags from consideration, "bp" and "featured content".  I don't want these tags in my list because they are used in other contexts.  I am also creating the tag header here.  Now for the search:

{code type=php}

$the_query = new WP_Query(array('tag'=>$tag->tag_name, 'cat' =>209));

I now have the posts for my particular tag, so I just print them out and reset the postdata before going on to the next tag and doing it all over

while ( $the_query->have_posts() ) : $the_query->the_post();
$thelink = get_post_custom_values('bp_inspiration_url');
?><li><a href="<?php echo($thelink[0]) ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>" target="_blank"><?php the_title(); ?></a></li><?php
endwhile;

// Reset Post Data
wp_reset_postdata();
}
}

Remember when I said I wanted the post link to go to the demo? I used a custom field (bp_inspiration_url) to hold the URL I want the link to go to.

I added some page and list formatting to the loop and here is the code in its entirety:

function get_category_tags($args) {
global $wpdb;
$tags = $wpdb->get_results
("
SELECT DISTINCT terms2.term_id as tag_id, terms2.name as tag_name, null as tag_link
FROM
wp_posts as p1
LEFT JOIN wp_term_relationships as r1 ON p1.ID = r1.object_ID
LEFT JOIN wp_term_taxonomy as t1 ON r1.term_taxonomy_id = t1.term_taxonomy_id
LEFT JOIN wp_terms as terms1 ON t1.term_id = terms1.term_id,

wp_posts as p2
LEFT JOIN wp_term_relationships as r2 ON p2.ID = r2.object_ID
LEFT JOIN wp_term_taxonomy as t2 ON r2.term_taxonomy_id = t2.term_taxonomy_id
LEFT JOIN wp_terms as terms2 ON t2.term_id = terms2.term_id
WHERE
t1.taxonomy = 'category' AND p1.post_status = 'publish' AND terms1.term_id IN (".$args['categories'].") AND
t2.taxonomy = 'post_tag' AND p2.post_status = 'publish'
AND p1.ID = p2.ID
ORDER by tag_name
");
$count = 0;
foreach ($tags as $tag) {
$tags[$count]->tag_link = get_tag_link($tag->tag_id);
$count++;
}
return $tags;
}

function bp_do_loop(){

$args = array('categories' => '209');
$tags = get_category_tags($args);


echo '<div class="page inspirationindex">';
echo"<h2>Inspiration Index</h2>";


foreach ($tags as $tag) {
if($tag->tag_name != 'bp' && $tag->tag_name != 'featured content'){
echo "<h3>".ucfirst($tag->tag_name)."</h3><ul class='no-list'>";

$the_query = new WP_Query(array('tag'=>$tag->tag_name, 'cat' =>209));

while ( $the_query->have_posts() ) : $the_query->the_post();
$thelink = get_post_custom_values('bp_inspiration_url');
?><li><a href="<?php echo($thelink[0]) ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>" target="_blank"><?php the_title(); ?></a></li><?php
endwhile;


echo"</ul>";
// Reset Post Data
wp_reset_postdata();
}
}
echo '</div>';
}

You can see the result here.

Google Map Places

If you run a community-oriented business have you considered a map showing features of interest around your neighborhood? The Google Maps API makes it easy. You can designate items of interest to show, such as: Museums, Art Galleries Restaurants Coffee Shops Parks, and many, many more. View all the types of places available here. Here is an example for the main retail district of my city: There are many things you could do this this. Put your business at the center of the map with a permanent marker and popup, then show points of interest around you. Are you a Bed & Breakfast or Hotel? How about stores and restaurants in walking distance? A coffee shop? Show nearby parks or bookstores. Own rentals or selling a home? Show nearby amenities.

Edit in Place

Sometimes you just need to be able to change on area on your website frequently, for example a “What’s New” or “Media” box on your home page. Instead of paying your webmaster to do this, it can be done right on your website: This uses the jQuery editable plugin and ajax to save the information via PHP. Here I save it to a database, but it could be saved to a flat file instead.

WordPress Plugin Review: Auto Save Remote Image

Did you know that articles with images get 94% more views? Images also can improve your SEO (search engine optimization), especially if you use the title attribute. Finding images is a whole ‘nother issues, but how you can easily grab an image from the internet and include it in your blog post is solved by Auto Save Remote Image. This plugin doesn’t just link to the photograph on your site, but copies it to your own host, so if it disappears from its original location you are still hosting it on your own. It also sets the image as your featured image automatically Here is how I use it: I generally search Flickr for my images, using the advanced search feature and looking only for images that are Creative Commons-licensed and allow me to use the image commercially: Once I’ve found my image, I right-click to copy the URL of the image: And then, in my blog post I click on the Upload/Insert link and page in the URL Once the blog is published, the Autosave Remote Images plugin looks for the first off-site image in your post; it then downloads it, adds it to your media gallery, and automatically sets it as the Featured […]

Charting Data Dynamically

I’ve covered some charting applications before, but this neat little charting function came to my attention when I reviewed some old applications I’d coded up or saved from other sources. This one is nice because it takes data from an HTML table and converts it into a chart: The plugin is called gvChart. In real-life, the tables would be created dynamically from a database or other data source, giving you up-to-the minute charts.

Featured Article Rotator

Once visitors come to your site you want to keep them there as long as possible. One way to do this is highlighting featured articles that are easy to click through and view. This Featured Article Rotator takes three articles and uses a little animation to switch between them: This would be extremely easy to implement in WordPress: Use an article excerpt and “read more..” to display the text and encourage a click-through to the article The image would use the featured image (you are using the “featured image” functionality aren’t you?) Assign a category for featured articles. The rotator would show a random selection of three articles from those marked as featured. Note: I’m going through a folder I have on my website called “inspiration”, making sure everything works, reformatting and tweaking. In the process I’m finding neat little items like this one that I forgot I had. It pays to go through your old folders!

Customize Your Blockquotes

On Friday I happened to lose half an hour when I ran across some cool blockquote formatting at Codrops. I especially like one with a circular image: [bpiq style = ‘default’ image=”http://beyond-paper.com/wp-content/uploads/2017/05/alexandre-dumas-9280765-1-402.jpg” title=”The Three Musketeers” source=”http://www.gutenberg.org/ebooks/1257″ author=”Alexandre Dumas”]Never fear quarrels, but seek hazardous adventures.[/bpiq] The author provides all the code, but I wanted it to be more flexible, after all I’m not always going to quote from The Three Musketeers. I added an attribute of “data-image” to the appropriate class and With a little bit of javascript the image will change to match the quote: [bpiq style = ‘default’ image=”http://beyond-paper.com/wp-content/uploads/2017/05/lewis_carroll_06-552×6201.jpg” title=”Jabberwocky” source=”http://en.wikipedia.org/wiki/Jabberwocky” author=”Lewis Carroll”]Twas bryllyg, and ye slythy tovesDid gyre and gymble in ye wabe: All mimsy were ye borogoves; And ye mome raths outgrabe.[/bpiq] You can see the original code here (Example 1). These were my additions: CSS .mb-style-1 .mb-thumb { display: block; width: 180px; height: 180px; border: 10px solid rgba(255,255,255,0.5); border-radius: 50%; background: url( ) no-repeat center center; position: absolute; left: 50%; top: -90px; margin: 0 0 0 -90px; box-shadow: inset 1px 1px 4px rgba(0,0,0,0.5), 0 2px 3px rgba(0,0,0,0.6); } HTML <div class=”mb-wrap mb-style-1″> <div class=”mb-thumb” data-image=”http://www.sophrosynelife.com/wp-content/uploads/2012/10/Dartagnan-musketeers.jpg”></div> <blockquote cite=”http://www.gutenberg.org/ebooks/1257″>Never fear quarrels, but seek hazardous adventures.</blockquote> <div class=”mb-attribution”> <p […]

On Friday I happened to lose half an hour when I ran across some cool blockquote formatting at Codrops. I especially like one with a circular image:

[bpiq style = ‘default’ image=”http://beyond-paper.com/wp-content/uploads/2017/05/alexandre-dumas-9280765-1-402.jpg” title=”The Three Musketeers” source=”http://www.gutenberg.org/ebooks/1257″ author=”Alexandre Dumas”]Never fear quarrels, but seek hazardous adventures.[/bpiq]

The author provides all the code, but I wanted it to be more flexible, after all I’m not always going to quote from The Three Musketeers. I added an attribute of “data-image” to the appropriate class and With a little bit of javascript the image will change to match the quote:

[bpiq style = ‘default’ image=”http://beyond-paper.com/wp-content/uploads/2017/05/lewis_carroll_06-552×6201.jpg” title=”Jabberwocky” source=”http://en.wikipedia.org/wiki/Jabberwocky” author=”Lewis Carroll”]Twas bryllyg, and ye slythy toves
Did gyre and gymble in ye wabe:
All mimsy were ye borogoves;
And ye mome raths outgrabe.[/bpiq]

You can see the original code here (Example 1). These were my additions:

CSS

.mb-style-1 .mb-thumb {
display: block;
width: 180px;
height: 180px;
border: 10px solid rgba(255,255,255,0.5);
border-radius: 50%;
background: url( ) no-repeat center center;
position: absolute;
left: 50%;
top: -90px;
margin: 0 0 0 -90px;
box-shadow:
inset 1px 1px 4px rgba(0,0,0,0.5),
0 2px 3px rgba(0,0,0,0.6);
}

HTML

<div class=”mb-wrap mb-style-1″>
<div class=”mb-thumb” data-image=”http://www.sophrosynelife.com/wp-content/uploads/2012/10/Dartagnan-musketeers.jpg”></div>
<blockquote cite=”http://www.gutenberg.org/ebooks/1257″>Never fear quarrels, but seek hazardous adventures.</blockquote>
<div class=”mb-attribution”>
<p class=”mb-author”>Alexandre Dumas</p>
<cite><a href=”http://www.gutenberg.org/ebooks/1257″>The Three Musketeers</a></cite>

</div>
</div>

jQuery

(Note I’m using “jQuery” instead of “$” to avoid conflicts with my WordPress install)

jQuery(function(){
jQuery(‘.mb-thumb’).each(function(){
var theurl = jQuery(this).attr(‘data-image’);
jQuery(this).css(‘background-image’, ‘url(‘+theurl+’)’);
});
});

Responsive Web Design Content Sliders Using CSS, Attributes and jQuery

As you know, I’m working on a redesign of an existing website to make it responsive. One of things this site has are lots of drop-down navigation options. The drop-down options, however, go to anchor points on the page accessed by the main menu item. In other words: There is a page called “Programs” and on that page are sections: Group Fitness, Aquatics, Court Sports, Youth Programs, Specialty Programs. I did some research into how responsive navigation is usually handled. As I knew from visiting lots of sites on my own smartphone, the navigation is usually stacked: (The menu items hide and show when the “Menu” item is clicked on) While we could make each of these menu items sliders to show the navigation, this fills up the screen super fast and means lots of clicks. Instead we decided to hide content in boxes with headers. Visitors can see all of the content headers at once and click to open it: Remember, these just show in the smartphone view. On a desktop visitors see this: If you know CSS, changing the menu and subcontent headers is just a styling issue. The menu bar is with CSS until the smartphone view […]

As you know, I’m working on a redesign of an existing website to make it responsive. One of things this site has are lots of drop-down navigation options. The drop-down options, however, go to anchor points on the page accessed by the main menu item. In other words:

”

There is a page called “Programs” and on that page are sections: Group Fitness, Aquatics, Court Sports, Youth Programs, Specialty Programs.

I did some research into how responsive navigation is usually handled. As I knew from visiting lots of sites on my own smartphone, the navigation is usually stacked:

”

(The menu items hide and show when the “Menu” item is clicked on) While we could make each of these menu items sliders to show the navigation, this fills up the screen super fast and means lots of clicks. Instead we decided to hide content in boxes with headers. Visitors can see all of the content headers at once and click to open it:

”

Remember, these just show in the smartphone view. On a desktop visitors see this:

”

If you know CSS, changing the menu and subcontent headers is just a styling issue. The menu bar is with CSS until the smartphone view is called and then the menu items and subcontent text is hidden. With a tiny bit of jQuery toggling the menu or the subcontent text to open or close is easy. The really sexy trick I learned today is the plus and minus sign which gets added to the subcontent titles in the smartphone view:

”

This is achieved by adding an attribute to the title tag called “data-content”. Here is what the markup looks like:

<h2 data-content=" +">First Subcontent</h2>

Because the default of the subcontent text is going to be closed, we want the plus sign to signal that it can be clicked on. Next, we add the CSS:

.inner-title h2:after{content: attr(data-content);}

Here we are using the CSS pseudo-element “:after” to put some content after whatever is found inside the <h2> tag. The content is being pulled from the attribute “data-content” of the tag itself! So the content could be different from header to header, though here we just want plus or minus. How do we achieve that? With a bit of jQuery:

$(".inner-title").on('click',function(e){
   $(this).children('.inner-content').toggle();
   if($(this).children('h2').attr('data-content') == " +"){
      $(this).children('h2').addClass('change').attr('data-content',' -');
   }else{
      $(this).children('h2').removeClass('change').attr('data-content',' +');
   }
 });

I actually had a bit of trouble figuring this out, so let’s take it in parts:

$(".inner-title").on('click',function(e){

When someone clicks on a tag with the class of “inner-title”,

$(this).children('.inner-content').toggle();

any child tags with a class of “inner-content” will show if hidden or hidden if visible. Then we look at the <h2> tag:

 if($(this).children('h2').attr('data-content') == " +"){

We want to check and see what attribute (a plus or minus) is currently showing and then change it to the opposite. So, if the “plus” is showing, we change it to a “-” here:

  $(this).children('h2').attr('data-content',' -');

And this works well. If you look at the underlying code, the attribute indeed changes but the change doesn’t actually appear in the CSS. To force the CSS to refresh for the item we add a bogus class:

  $(this).children('h2').addClass('change').attr('data-content',' -');

And that little trick took me about an hour to figure out. Now you and I know the trick!

WordPress Plugin: Google Drive for WordPress

How often do you backup your WordPress database? I’m really bad about my own backup schedules and was excited to find out that I can schedule backups and save them to my Google Drive. The plugin, Google Drive for WordPress so far seems to do a good job. My first manual backup occurred, through I haven’t had it installed long enough for my requested automated weekly backup to happen. I’ll update if I find a problem with that. Setup was harder than it needed to be due to lack of instructions. First of all, instead of putting the menu item down under “Settings” or at the bottom of the menu, it is placed up top, right under “Posts”. That was confusing. Configuration required a client id and client secret from Google, and a link is provided, but there are several options you can choose from. After trial and error here is what I did: Copy the URL that is provided on the configuration page From the Google page that the link sends you to, choose either “Create an OAuth Id” or “Create Another Id”. From the popup, choose the first option “Web Application” Where it asks for “Your site or hostname” […]

How often do you backup your WordPress database? I’m really bad about my own backup schedules and was excited to find out that I can schedule backups and save them to my Google Drive. The plugin, Google Drive for WordPress so far seems to do a good job. My first manual backup occurred, through I haven’t had it installed long enough for my requested automated weekly backup to happen. I’ll update if I find a problem with that.

Setup was harder than it needed to be due to lack of instructions. First of all, instead of putting the menu item down under “Settings” or at the bottom of the menu, it is placed up top, right under “Posts”. That was confusing.

Configuration required a client id and client secret from Google, and a link is provided, but there are several options you can choose from. After trial and error here is what I did:

Copy the URL that is provided on the configuration page

”

From the Google page that the link sends you to, choose either “Create an OAuth Id” or “Create Another Id”.
From the popup, choose the first option “Web Application”
Where it asks for “Your site or hostname” choose “more options that you copied in step one above.
Where it says “Authorized Javascript origins” type in your website URL

”

Click on create client ID.

The popup will close and you will see a box with your information in it. Just copy and paste the Client ID and Client Secret and then click through the two “allow access” screens. Whew!

The remaining steps are much more straight forward. You’ll first set up your backup settings:

”

You can apparently get a notication email and I’m assuming the “Custom Main ID” will appear in the subject line of the email, but who knows? Another place where some explanation would be nice.

And then your database settings. I don’t suggest excluding any database files.

”

You have the option of excluding certain files from the backup. I suggest leaving everything as-is on the “Manage Files” menu item.

Finally, the “On time Backup” menu item apparently backs up your files immediately.

I like the idea of this plugin and I like being able to schedule regular backups to my Google Drive account, but the plugin definitely needs some documentation and helpful notes for a smooth installation. It would be pretty easy just add this to each configuration page. As it is, I would recommend novice users have their webmaster install this for them.

Hover Animation for Social Sharing

And now for something just a little different – a new way of displaying social media share icons on a page: Note that this is displayed in an iframe so I can share this post on different sites. The original. Thanks to inserthtml for this cool widget!

Converting Existing Site to Responsive Web

I’m doing my first conversion of an existing website to a responsive site. The client wants the basic theme to stay the same, just make the elements responsive – that is, fit them according to the device. So far it is going pretty well, except for the exceptional use of <div> tags by the original designer plus a table here or there where the designer couldn’t figure out how to float elements. One drawback is that when testing the site on my smartphone, it caches the page so I can’t immediately see changes. This was frustrating. I used an online Opera emulator, which helped but, as always, the devil is in the details. The main thing I’ve learned is don’t try and float elements in the smaller screen sizes. Just stack them one over the other.

Busy Friday Round Up

Things are rocking here, so instead of a thoughtful post I’m going to cop out and share the tabs that are open in my browser right now. When I see something I want to come back to I just open it in a separate tab, but so far I haven’t gotten to any of these today: Top 10 Free Responsive WordPress Themes – professionally interested in seeing how other people code responsive websites and WordPress themes. Digging Into WordPress 3.4 – I want to see if this is worth reading or just reiterates everything I already know. New Free Textures for Your Delight – To add to my Textures Listly How to Monetize Your WordPress Posts with 1 Easy-To-Use Plugin – Really? The Best WordPress Related Websites On the Internet – If I’m not following them in Google Reader, I want to add them. 10 Cool jQuery Flyout Menu Plugins – Because I always seem to need one that does something just slightly different. Hopefully I can get to these this weekend….though I’m seriously thinking about taking a no-tech weekend.

Use a Sticky Header to Get Your Message Across

If you visit my blog or my website you’ll notice a new feature – a sticky header. A sticky header sits at the top of the browser screen even when the page scrolls, so it can be used to hold information or links that you want your visitors to have quick access to. On my website the header contains social links, a search box, and the link that opens a live chat: Similarly, on my blog I have add a link to my website: I’m playing around with adding drop down content to a sticky header: I’m sure you can think of other uses for a sticky header. Let me know in the comments!

WordPress Plugin: Event Espresso

In my ongoing search for an event plugin for WordPress I was contact by the people at Event Espresso via Twitter and invited to take a look at their product. These folks have obviously used and thoroughly know the needs of scheduling and managing events. Unlike many plugins, the navigation is kept to the minimum. The Event Overview controls all aspects of the event, including: Event start/end Registration start/end Recurring Events* Attendee Limit Pricing Venue information Email confirmations Questions to ask during the registration phase Discounts/coupon promotions *Some of these items require additional plugins to work. From the main overview screen you can see the pertinent details for all of your events. If you click on the attendees for an event you are taken to a screen listing all of the attendees and their payment status. You can even keep track of who attended the event! See those icons to the right? They make it easy to check the payment record, send an invoice, edit attendee information (including the cost of their ticket, resend registration details, get a PDF invoice for mailing or print a ticket. If you use the ticket plugin, the tickets have a QR code and you […]

In my ongoing search for an event plugin for WordPress I was contact by the people at Event Espresso via Twitter and invited to take a look at their product. These folks have obviously used and thoroughly know the needs of scheduling and managing events. Unlike many plugins, the navigation is kept to the minimum. The Event Overview controls all aspects of the event, including:

Event start/end
Registration start/end
Recurring Events*
Attendee Limit
Pricing
Venue information
Email confirmations
Questions to ask during the registration phase
Discounts/coupon promotions

*Some of these items require additional plugins to work.

From the main overview screen you can see the pertinent details for all of your events.

”

If you click on the attendees for an event you are taken to a screen listing all of the attendees and their payment status. You can even keep track of who attended the event!

”

See those icons to the right? They make it easy to check the payment record, send an invoice, edit attendee information (including the cost of their ticket, resend registration details, get a PDF invoice for mailing or print a ticket.

If you use the ticket plugin, the tickets have a QR code and you can use the Event Espresso Android or IPhone app to scan in the attendees when they arrive! (Check out their post on using Event Espresso to manage Haunted House tickets)

I’ve just looked at a fraction of what this can do and I’m really impressed. The crew involved has an active Blog and support forum and their website mentions future upgrades and additional features and solicits input – which implies they will be around awhile and the plugin will stay fresh and updated as WordPress evolves.

Pricing

There is a free version of this plugin that includes the following features:

out-of-the-box event registration from your WordPress website
process payments via PayPal IPN
create custom event registration questions
automated confirmation and reminder emails
manage attendees and export attendee data
easily manage attendees profiles

However, for $89.95 you get all of the premium features, plus the calendar and social media add-ons:

Premium Features:

manual registration
additional payment gateways including Authorize.net, IDEAL, Firstdata and PayPal Pro
multiple pricing options
promotion codes
custom post type support
reusable email templates
upcoming event calendar
MailChimp integration (advanced & developer)
recurring events (advanced & developer)
members integration (advanced & developer)
Groupon integration (advanced & developer)
custom files (advanced & developer)
multiple event registration (advanced & developer)

The Calendar add-on gives you a nice visual calendar:

”

While the social media add-on adds Twitter, Facebook and Google+ buttons to your events.

Other add-ons include:

Ticketing
Multiple Event Sign-up
Recurring Events
Seating Chart (for events with reserved seating)
MailChimp Integration
Roles & Permissions (give users the ability to submit events)

Contact me if you are interested in installing Event Espresso. I am offering packages which include installation of the the premium version, all 12 add-ons, up to 1 hour of training and 30 days of email support. Find out more.

Disclaimer: Though I discovered this plugin when the Events Espresso folks contacted me via Twitter, I was neither compensated nor received free product for this review.

Add Your Contact Information Above the Fold on Your Responsive Website

A colleague just sent me this article from Marketing Vox which talks about needing a mobile-friendly site. What caught my attention was this: DudaMobile in February reported that nearly 20% of visits to small business sites led to an immediate call to the business (e.g. with click-to-call), with some local businesses skewing much higher (e.g., pizzerias at 32%, car services at 27.8%). But businesses have to earn that call with a mobile-friendly site that puts that phone number above the fold and in eyeshot. I know that when I search for a business on my smartphone I’m looking to get in touch with them immediately. I want their phone number, hours of operation or address without a bunch of clicking around. Easily done! I added a block with contact information on my bpEnigma responsive template. When viewed on a computer or tablet you will see this: But on a smartphone you will see the contact information right below the navigation (it could easily be above): I strong suggest you add this to your own responsive websites – especially if you are brick and mortar. Make it easy for people to find you! Note: My template bpEnigma can be found here. There is […]

4 Steps to Implementing a Web Form

Oh, forms. Nearly every website has at least one and there are copious do’s and don’ts about form design. I handle 5-10 forms a week. They come to me from the designer and it is my job to make the form validate its information and send that information to at least one other person (usually the website owner) with a confirmation to the person who filled out the form. While I’m at it, I minimize spambot submissions of the form. Here are the steps I go through on every form: Clean Up the HTML Working in the HTML view I look at each input field and make sure it has: a descriptive, unique name, and a default or option value, if necessary. The name is going to be used to retrieve the information, so calling the input field collecting the phone number “input5″ is unnecessarily confusing. Just call it “phone”. Default values occur in text fields when you want information submitted in a certain way, for example mm/dd/yyyy for a date field. In radio fields and checkboxes, the value is the information that is submitted. So the values of the checkboxes to the right should be set at “motorcycle”, “boat”, […]

Oh, forms. Nearly every website has at least one and there are copious do’s and don’ts about form design. I handle 5-10 forms a week. They come to me from the designer and it is my job to make the form validate its information and send that information to at least one other person (usually the website owner) with a confirmation to the person who filled out the form. While I’m at it, I minimize spambot submissions of the form. Here are the steps I go through on every form:

Clean Up the HTML

”Working in the HTML view I look at each input field and make sure it has:

a descriptive, unique name, and
a default or option value, if necessary.

The name is going to be used to retrieve the information, so calling the input field collecting the phone number “input5″ is unnecessarily confusing. Just call it “phone”. Default values occur in text fields when you want information submitted in a certain way, for example mm/dd/yyyy for a date field. In radio fields and checkboxes, the value is the information that is submitted. So the values of the checkboxes to the right should be set at “motorcycle”, “boat”, “RV”, etc rather than “checkbox1″, “checkbox2″, “checkbox3″.

Validate the Information

I prefer front-end validation that occurs while the user is completing the form. Why force someone to fill out a complete form and then find out something is wrong? I’m currently enthusiastic about IdealForm, which I use in the following example:

Validating on the front end means using Javascript, however, and a very few people (and all spambots) don’t use Javascript. For those users I prefer to prevent form submission altogether and give them a message that they need Javascript to continue.

I also do some validation on the server side, after the form is submitted. This is just to ensure that the information coming from the form isn’t malicious code and is coming from the form page.

Captcha

Captchas are those little boxes just before the submit button that ask you to type in numbers or words matching an image. I only use a Captcha if a client is having problems with a lot of spam. In my experience it isn’t worth installing one until there is a problem. The code I use against the spambots (by not allowing users without Javascript) handles a large percentage of problems.

Format the Emails and Send

The email to the client containing the form information is generally formatted like the form itself and the person who filled out the form gets a standard “Thank you, someone will be in touch” message. Sending the message requires a little detective work. Your webhost must have sendmail enabled – not a problem for all the large hosting companies, but if you use a small company or your own servers you may be out of luck. In that case we need to send via SMTP relay, which means you need an email account through which emails can be sent….and some email providers don’t allow you to do this because of the risk of spam. I generally run a few tests and have several scripts that work for most situations.

Google Map Highlighter

I got this sweet code from CSS Tricks. It uses CSS and javascript to change a HTML list to a nice Google map interface. My contribution was adding the ability to change the zoom level by location. It also would not be too difficult to add polylines – for example to outline a college campus or highlight a bike trail.

Using Buffer to Promote Your Posts

Are you using Twitter to promote your website or blog posts? This is a tricky area; you want to promote your posts, but you don’t want to overwhelm your Twitter feed with clumps of tweets that are self-serving. I’m taking the advice of Tom Ewer and using Buffer to schedule my posts throughout the day. He suggests using Tweriod to determine when your Twitter followers are most active, then scheduling your most important posts (i.e. promote your blog post) at those times. Tweriod analyzes your followers and their tweeting habits to determine when they are most likely to be online. Once your report is generated you can send it over to Buffer with just a click – very slick. Buffer is the key here – it allows you to schedule tweets for certain times of the day and certain days of the week. You set up a schedule of when tweets will appear and then just add tweets to the queue. In your dashboard you can re-order tweets by dragging and dropping: To promote my blog posts I’m using Tom’s suggestion to tweet each three times: Once when the post appears: New Post @ LWB: [Post Name] [Post URL] Please […]

Testing IFTTT to Google Calendar to Buffer to Twitter integration

Since I blog ahead (like you probably do), I needed an automatic way to post the Tweets for future days and I may have found a way to automate the “today” and “yesterday” tweets using IFTTT.com and Buffer. Today’s post is simple enough, the recipe triggers when the feed updates and sends to Buffer. For the “yesterday” tweet I set up one recipe to save the Tweet to a dedicated google calendar (called tweets) scheduling it tomorrow at 8am. Then I set up a second recipe that triggers when the calendar event occurs. When the tweets are set up the wording can be altered to include “Today’s Post…” or “Yesterday’s post”. You’d want to be careful on when you schedule your Buffers and posts so they will most likely fall correctly. Oh, and for the initial Tweet, I just use the WP Twitter plugin. Since I just set it up today I haven’t completely tested it in the wild – here’s hoping it works!

WordPress Plugin Review: Events Manager Pro

I think I may have found an events manager/registration system for WordPress that functions similarly to Eventbrite but without the per-ticket fee (see my previous review of Events+) – Events Manager Pro. There is a free version, but some key features are missing, so I strongly suggest shelling out the one-time fee of $75 to support this excellent plugin. On the Admin side, events are added just like you would add a new post. Recurring Events have their own screen, separate from the main events page, which was confusing, but the learning curve is not steep at all. One nice feature allows the site manager to set up various levels for submitting new events. This means that you could create a community events page where the public can submit an event, which is then moderated by an admin before being added to the actual site. The front-end integration is really nice. Check out the demo here. Events Manager Pro is created with designer control in mind, so just about anything to do with how events display to the public can be changed. Check out one of the available sidebar widgets: Are your events located all over town? There’s a map […]

IE6 Upgrade Warning

Probably the biggest frustration for programmers and designers are users with old browsers. I made a decision about 18 months ago to no longer support IE6 and IE7 should be on its way out as well. But how to alert visitors with old browser versions that the site won’t work for them? Google provides a neat little javascript that displays a popup window when a browser running IE6 is detected: The javascript is simple enough to change it to include IE7 if you so wish. I’m going to start adding this to sites I design in the future.

Identify Your Target Audience

Whether you have a website or are blogging, you need to know who is going to be interested in what you are offering. Corporations often hire consultants who build virtual customers, complete with a life story, profession, income level, family status and clothing preferences. They give each virtual customer a name and marketing is then targeted towards that particular customer. You can do the same thing. Build 2-3 virtual visitors to your site. For example, here is a person I built for my business site: Karen is a 40 year old graphic designer who is often asked by her clients to build a complete website. She would rather work with a dedicated professional to do the work and just handle the design and project management herself. She works out of a home office, has 2 school age children and is married. She worked in the corporate world for about a decade before deciding to start her own business and has been in operation for 5 years. She’s not interested in learning how to do all of the cutting edge things, but wants an overview of what is available so she can take it into consideration when designing a site […]

Short Bites Friday

Wrapping text around a video in WordPress is problematic, but Joseph Foley has a solution. I’ve made some change to my business website. Let me know what you think! CSS-Tricks did a post listing the WordPress plugins they regularly use. I need to do this too. Are you following me on Facebook? I post lots of additional links and resources there. A brief history of texting. I’m encouraging clients to text me more – phone calls are so disruptive! Are you using texting in your business? A couple of neat coding examples I’m anxious to try out and hack for myself: Sticky content Input Character count My newest template: bpEnigma

Changing a Domain Name with a WordPress Installation

Recently a company I did some contract work for decided to change the domain name associated with their website hosting. As a result, their website, which was built on WordPress, no longer functioned correctly. While the posts and other information were being pulled in, all the formatting was gone. The reason for this is that WordPress is database centered. All the information about your site is saved in that database, including your URL. That URL is used to make the links to the templates and downloads. If you change your domain name, you’ve changed your URL. If you change the URL without changing the database, your site is not going to look correct. Ideally, just before you make the change you should log into your site, click on Settings->General and then change the URLs here: The “Home” setting is the address you want people to type in their browser to reach your WordPress blog. The “Site URL” setting is the address where your WordPress core files reside. Note: Both settings should include the http:// part and should not have a slash “/” at the end. What should you do if you’ve already change the domain name and find yourself locked […]

Recently a company I did some contract work for decided to change the domain name associated with their website hosting. As a result, their website, which was built on WordPress, no longer functioned correctly. While the posts and other information were being pulled in, all the formatting was gone.

The reason for this is that WordPress is database centered. All the information about your site is saved in that database, including your URL. That URL is used to make the links to the templates and downloads. If you change your domain name, you’ve changed your URL. If you change the URL without changing the database, your site is not going to look correct.

Ideally, just before you make the change you should log into your site, click on Settings->General and then change the URLs here:

The “Home” setting is the address you want people to type in their browser to reach your WordPress blog.
The “Site URL” setting is the address where your WordPress core files reside.

Note: Both settings should include the http:// part and should not have a slash “/” at the end.

What should you do if you’ve already change the domain name and find yourself locked out?

If you have access to the site via FTP, then this method will help you quickly get a site back up and running, if you changed those values incorrectly.

1. FTP to the site, and get a copy of the active theme’s functions.php file. You’re going to edit it in a simple text editor (like notepad) and upload it back to the site.

2. Add these two lines to the file, immediately after the initial “<?php” line.
update_option('siteurl','http://example.com/blog');
update_option('home','http://example.com/blog');
Use your own URL instead of example.com, obviously.

3. Upload the file back to your site, in the same location. FileZilla offers a handy “edit file” function to do all of the above rapidly; if you can use that, do so.

4. Load the login or admin page a couple of times. The site should come back up.

5. Repeat the above steps, but remove those lines. IMPORTANT: Do NOT leave those lines in there. Remove them immediately after the site is up and running again.

If there is no functions.php file in the theme:

Create a new text file called “functions.php”.

Edit it with notepad, and add this text to it, using your own URL instead of example.com:
<?php
update_option('siteurl','http://example.com/blog');
update_option('home','http://example.com/blog');
?>
Upload that to your theme directory, then proceed as stated above. Remove the file afterwards.

~WordPress.org

Note: Another problem I’ve run into with former clients is changing hosting. In one case, the new webmaster simply copied all of the files over and terminated the previous hosting. The database was not transferred over and three years of daily posts were completely lost. If you want to change hosts and you have a WordPress installation, please contact me before you do anything!

WordPress Plugin Review: Events+

A few of my clients use event scheduling to handle ongoing classes or one-time events, and we’ve been using EventBrite for that. I like EventBrite, especially the ability to add a registration form right to a page. See this in action at Studio of Good Living. What do we like about EventBrite? Ability to embed registration into a web page or blog post. Manage registered people, send them emails, collect additional information upon registering. Registrants can print tickets. EventBrite handles all kind of ongoing events, such as classes. Uses PayPal (and other gateways) for payment processing. Widgets for WordPress and for blogs! EventBrite is really a full-featured solution for events, but there is one drawback. They charge a fee for every ticket sold. This fee can be added to the ticket price (like Ticketmaster) or embedded within the price, but for a few clients this is a deal-breaker. If your price point and margin are slim enough, that additional fee can tip your event over the edge into unprofitability. So my mission is to find a plugin for WordPress that duplicates the features we like best in Eventbrite. I headed over first to WPMUDEV to look at Events+. At first […]

A few of my clients use event scheduling to handle ongoing classes or one-time events, and we’ve been using EventBrite for that. I like EventBrite, especially the ability to add a registration form right to a page. ~~See this in action at Studio of Good Living.~~ What do we like about EventBrite?

Ability to embed registration into a web page or blog post.
Manage registered people, send them emails, collect additional information upon registering.
Registrants can print tickets.
EventBrite handles all kind of ongoing events, such as classes.
Uses PayPal (and other gateways) for payment processing.
Widgets for WordPress and for blogs!

”

EventBrite is really a full-featured solution for events, but there is one drawback. They charge a fee for every ticket sold. This fee can be added to the ticket price (like Ticketmaster) or embedded within the price, but for a few clients this is a deal-breaker. If your price point and margin are slim enough, that additional fee can tip your event over the edge into unprofitability.

So my mission is to find a plugin for WordPress that duplicates the features we like best in Eventbrite. I headed over first to WPMUDEV to look at Events+.

At first I thought it would work. Events+ uses PayPal as the main payment gateway and has additional plugins for other gateways (or pay by check). Registrants can sign in using their Facebook or Twitter accounts or just type in their information.

Adding events is much like adding a blog post and Events+ handles recurring events just fine. Where it fell down was on the front end – the ability to display events on your site.

There are some specialized plugins to display, for example, a calendar of events for the upcoming week, a countdown until the event and the next recurring event. These are sadly lacking.

The upcoming events displays in an agenda fashion:

”

The problem is that while you can edit the calendar interval for the hours, what if you have some 4 hour events and some 2 hour events? The image above was set at 4 hour intervals. Here it is at 2 hours:

”

It looks like there are 4 events, while there are only 2! I supposed I could find the code and hack it into behaving, but out of the box this just doesn’t work.

I’d also like to see a small monthly calendar that could be embedded into a post or page. The event countdown, next event countdown and next event plugins also don’t work well. They don’t show the name of the event, for instance, or provide a link to the event. There is also no feature to edit the registration information from attendees.

This plugin will also involve a lot of style formatting to fit your site. Notice the “Prev/Next” links in the images above – shouldn’t they be styled left and right? Or at least the links separated?

This isn’t a terrible plugin for someone looking to collect registrations for a single event, but it isn’t the quality of plugin that I’ve come to expect from WPMUDEV.

Next week I’ll be reviewing Events Manager.

3 Beginning Steps to Responsive Website Design

According to a study by BuzzCity, 45% of people on the internet have a smartphone and 85% of users prefer access to websites on a mobile phone. Within the last week I’ve used my smartphone to look up the happy hour at a restaurant, read the news, compare prices for ink cartridges, accessed my appointment information for my dentist, and looked for store hours for three local businesses. Of those sites, few were optimized for my phone, in fact my local newspaper is nearly impossible to use on a smartphone. How about your website? Do you know what it looks like on a tablet or smartphone? How do you go about making your website flexible for use on multiple platforms? 1. What Does Your Site Look Like Now? Don’t have a smartphone or tablet? Using your computer browser, iPad Peek will render your website on a virtual iPad and iPhone. MobiReady will make various compliance checks as well as emulate very small phone screen sizes. Mobile Phone Emulator is probably my favorite and will show you site at actual size on Android devices: 2. Use Flexible Layouts When working with a designer, make sure they understand flexible layout design. This […]

According to a study by BuzzCity, 45% of people on the internet have a smartphone and 85% of users prefer access to websites on a mobile phone. Within the last week I’ve used my smartphone to look up the happy hour at a restaurant, read the news, compare prices for ink cartridges, accessed my appointment information for my dentist, and looked for store hours for three local businesses.

Of those sites, few were optimized for my phone, in fact my local newspaper is nearly impossible to use on a smartphone. How about your website? Do you know what it looks like on a tablet or smartphone? How do you go about making your website flexible for use on multiple platforms?

1. What Does Your Site Look Like Now?

Don’t have a smartphone or tablet? Using your computer browser, iPad Peek will render your website on a virtual iPad and iPhone.

”

MobiReady will make various compliance checks as well as emulate very small phone screen sizes. Mobile Phone Emulator is probably my favorite and will show you site at actual size on Android devices:

”

2. Use Flexible Layouts

When working with a designer, make sure they understand flexible layout design. This means that as you change the size of your browser, the website resizes, without needing scrollbars. Take a look at CSS-Tricks. Try making your screen smaller and wider and notice how the page (including images) change to accommodate. At the narrowest width notice that the sidebars move from the side to below the main content. Additionally, some images disappear completely at narrower widths to give a cleaner look. (Here are a few additional responsive websites to look at: Andersson-Wise Architects, The Work Cycle, Smashing Magazine)

Many designers are just designers – creating the layout and look for a site, which is then passed on to the web designer or programmer to make into actual web pages. Make sure both your designers understand that you want a responsive web design from the very beginning. Like your current design, but want it responsive? Your designer can tell you if it can be converted to a responsive web design. (Or contact me for a free consultation).

3. Be Flexible Yourself

Responsive website design depends upon percentages and proportions – this isn’t a place for pixel perfect layouts. (Actually web design never was, but that’s another article). Realize that how you view your site and how your customer views it will be different and let go of finding to perfect pixel size for that font. Instead, concentrate on content, overall feel and usability.

Unusual Use of an Accordian Slider for a Website

Check out how scrolling down seems to raise the screen like an accordian. I’m eager to figure out the code on this one!

WordPress Plugin Review: Marketpress

This week I’ve been working with Marketpress, a plugin from the fine folks at WPMUDEV. Marketpress is an ecommerce/shopping cart plugin with enough features for most small business ecommerce needs. As they say on their website: Payment gateways coming out of our ears. 100% ready for easy translation into any language. Supports all major currencies. Ready to go for tax and VAT. Digital or physical objects. Multiple shipping options. Coupons, discounts and affiliate ready. Fully integrated with Google Analytics eCommerce. Unlimited product variations. Stock tracking and alerts per variation. Per order product limits. AJAX cart and cart widget. Powerful shortcodes that you can use anywhere. Link any product to an external link (hello Amazon affiliates!). Categories and tags. Stock tracking and order management and alerts. Fully customizable urls. Checkout *without* having to be a site user. Start your own Etsy shopping network. Global shopping carts (for that network). Tax inclusive pricing options. Custom personalization fields. Extensive tracking number options. Viewing, adding and editing products is very similar to how you would work with a post: If you are selling electronic goods that are downloadable, Marketpress manages that for you. Once the payment gateway signals that payment took place it allows […]

This week I’ve been working with Marketpress, a plugin from the fine folks at WPMUDEV. Marketpress is an ecommerce/shopping cart plugin with enough features for most small business ecommerce needs. As they say on their website:

Payment gateways coming out of our ears.
100% ready for easy translation into any language.
Supports all major currencies.
Ready to go for tax and VAT.
Digital or physical objects.
Multiple shipping options.
Coupons, discounts and affiliate ready.
Fully integrated with Google Analytics eCommerce.
Unlimited product variations.
Stock tracking and alerts per variation.
Per order product limits.
AJAX cart and cart widget.

Powerful shortcodes that you can use anywhere.
Link any product to an external link (hello Amazon affiliates!).
Categories and tags.
Stock tracking and order management and alerts.
Fully customizable urls.
Checkout *without* having to be a site user.
Start your own Etsy shopping network.
Global shopping carts (for that network).
Tax inclusive pricing options.
Custom personalization fields.
Extensive tracking number options.

Viewing, adding and editing products is very similar to how you would work with a post:

”

If you are selling electronic goods that are downloadable, Marketpress manages that for you. Once the payment gateway signals that payment took place it allows download of the item, and you can control the number of downloads!

There were a few problems, however.

As installed Marketpress adds a store page and then generates views for the products, shopping cart, etc. In my installation the product view didn’t work correctly, showing all of my blog posts instead of just my products. I also didn’t like how the category and product listings pages displayed. This was overcome by editing the store page. I just used the pages to override the Marketpress generated views by changing the links on the store page. Another plugin, Marketpress Product Grid Shortcut worked correctly and also showed a list of products in a grid format, which I like better, so I didn’t have to hack anything there. Using pages instead of Marketpress’ defaults also allowed me to customize the sidebar to show the shopping cart and product categories.

Tax is another problem – but it is a problem with nearly every shopping cart in existence. The intricacies of taxation – who gets taxed, who doesn’t – is a pain in the rear and for my products I solved it by just including tax in the price. In Washington they don’t care if you charge tax to the customer, they just care that you pay the tax to the state. So basically, I’ll charge a flat rate and then go back and pay the tax based on my sales. That way I don’t get into arguments or lose sales because “I shouldn’t have to pay Washington sales tax”.

Although full-featured, Marketpress isn’t going to replace ZenCart or other ecommerce solutions. However, if you sell less than 50 items and are just looking at a basic solution that is easy to use – Marketpress is for you.

Disclosure: I am an affiliate of WPMUDEV and if you buy something from them using the links in the post I get reimbursed. This review was not solicited, however.

Hovercards: Add information to your web pages

Hovercard by Prashant Chaudhary takes tool tips to a different level and different uses. Hover over text and a card appears, centered on the keyword in your text. It is easier to see than to explain, so take at the example below: Update: Sorry, this plugin is no longer updated and is not working. jQuery by [hovercard keyword=”John Resig” id=”hc1″ img=”http://ejohn.org/files/short.sm.jpg” ]John Resig is an application developer at Khan Academy. He was a JavaScript tool developer for the Mozilla Corporation and also the creator and lead developer of the jQuery JavaScript library. [/hovercard] is a cross-browser JS library designed to simplify the client-side scripting of HTML. It was released in January of 2006 at BarCamp NYC. Used by over 46% of the 10,000 most visited websites, it’s the most popular JavaScript library in use today. Hover over “John Resig” and a card pops up with his information. This could be used in many different ways – for product information, employee contact information, or citations are just a few examples. Interested in implementing hovercards on your site? I’ve created a shortcode that makes it simple for WordPress users. Contact me for more information.

Seamless Backgrounds for Your Website

There are times when you find a theme or template with a basic layout you like, but the colors are all wrong. Maybe a background texture would make a difference. Here is a list of my favorite sites for background textures: Textures View more lists from Diane Ensey

Slider Sidebar

If you want to add a contact form, signup code or just some extra information to your page, but don’t have the room, a Slider Sidebar, where the content is hidden until clicked upon, is a perfect solution.

WordPress Shortcodes

Shortcodes in WordPress are an easy way to insert information without needing to know programming. It consists of the name of the shortcode within a pair of brackets like this: [[shortcode]]. When WordPress loads a page with the shortcode for someone to read it knows to access an application that then returns the information that should appear in that space on the page. What kind of information? Advertising – Add Google, Amazon or other ads. With some services you can include a search variable or keyword to customize the advertising to your particular post. Pertinent Information – Writing about stocks? Use a shortcode that will display the current price and day’s movement. [stock code=GM] Not the price on the day you wrote the article, but the price on the day someone READS it. Special formatting – Have image you want formatted a certain way? [special]Want special formatting for text?[/special] A shortcode solves this problem without needing to know how to code HTML. Embed Charts – Is your site heavy on data? A shortcode could easily embed a chart to add visual interest. Display Related Posts – Add a list of links to posts you’ve previous written on the subject. Add […]

Search Public Facebook Statuses

As an update to yesterday’s inspiration, I changed the script so that you can enter your own work or phrase to search for. Try it here. Update: FB no longer supports this kind of search.

Collecting Social Information

This blog post sparked my interest in seeing just how simple it would be to gather public timeline information from Facebook. In less than an hour (most of the time spent formatting the output). I came up with a solution. Click here to see it live. Update: Facebook has removed SocialGraph searching, so this no longer works.

Collecting Information Automatically

A client needed a unique application that would collect data from a website at specific times and display the accumulated data in a graph. The website from which he was pulling his information is a paid service, so I can’t demo it for you, I did put together a similar application using the daily temperature from the NOAA website. Once a day a script runs which collects the current temperature for Yakima and Seattle and adds it to an XML file. That information can be used in numerous ways, including creating on-the-fly graphs: Sorry! I’ve done some updating and it broke this inspiration! It is on my list to fix… This image updates automatically every day and can be saved to your own computer by right-clicking on it.

PhotoSlider Update

PhotoSlider, a script that rotates images on your website, is updated with three new themes: Elemental, Shady and Numeric. View the demo here.

Member’s Only Sites

If you have a membership of any kind, want to offer custom content just to certain users, or provide access to information to your employees, a member’s only site is for you. Each customer’s need is different, but here are some examples of sites that I have created. Unfortunately, due to the private nature of the sites I cannot give access to the site. If you’d like to learn more contact me to schedule an appointment and I can walk you through some interfaces. Most recently I’ve worked on: Washington Farmer’s Market Association: This application collects information from the membership which is then plotted to a Google map. The member information is accessed by administrators in various formats, including a spreadsheet-like, sortable grid, member detail pages and various reports which are output to Excel. There is also a login area for members to see their membership information. JAC Recruitment: This company collects employment information and a resume/CSV from applicants from a front-end form. The information for each recruit is saved to a database and accessible by members of the company both online and by download to Excel.

Miscellaneous Cool Things for Websites

Here you will find interesting pieces of code and markup that add functionality to your site. Menu: Examples of JQuery and pure CSS menu navigation Layouts: Different layout styles available with new HTML/CSS patterns Custom Form Handler: Our form handler checks for spam, sends a confirmation email to the visitor and an email with the form data to you. All emails can be formatted and customized and after submission the form can redirect to any page on your site you wish. Edit in Place: Do you want an announcement section on your home page? Maybe a tips box? Don’t go to the expense of having a web designer change your page; this script will allow you to easily make changes to a specified area on your site whenever you want. Very, very simple to use. Grids: These help you display information the way it is most useful. Sort, search, even allow editing and deletion right from the grid if you want it password protected. Calendars: My Calendar – Similar to a Google Calendar. Ideal for keeping a schedule for an office Full Calendar – Easily customized calendar – very basic front-end style that can be changed to fit into your […]

Here you will find interesting pieces of code and markup that add functionality to your site.

Menu: Examples of JQuery and pure CSS menu navigation
Layouts: Different layout styles available with new HTML/CSS patterns
Custom Form Handler: Our form handler checks for spam, sends a confirmation email to the visitor and an email with the form data to you. All emails can be formatted and customized and after submission the form can redirect to any page on your site you wish.
Edit in Place: Do you want an announcement section on your home page? Maybe a tips box? Don’t go to the expense of having a web designer change your page; this script will allow you to easily make changes to a specified area on your site whenever you want. Very, very simple to use.
Grids: These help you display information the way it is most useful. Sort, search, even allow editing and deletion right from the grid if you want it password protected.
Calendars:
- My Calendar – Similar to a Google Calendar. Ideal for keeping a schedule for an office
- Full Calendar – Easily customized calendar – very basic front-end style that can be changed to fit into your site.
Datepickers: Never make your users type in a date again! Simply click on an icon, a popup calendar appears, click on a date and the date box is automatically populated.
Photos and Images:
- PhotoSlider – use images and text – each can be linked to a different URL. Several different effects and can be any size. Good for a lot of different uses – headers, banners, specials.
- Flickr Gallery – uses Flickr photostream to create a gallery of images. Can be limited to specific Flickr sets – see how I use it on my blog to show a set called “blog”. When I add a photo to that set, it appears on the page.
Weather: Anyone can put a weather.com widget on their site. This little application will take information directly from the NOAA weather service or any other weather reporting station (provided it publishes its data on the internet in a standard format). It can even combine information from several different sources.
Charts: Five different styles of charts for dynamic or static data sources.
Tooltips: Make nice-looking tips pop up when you hover over a link.
Lightbox: An elegant way to show text, forms, logins, photographs, maps, anything that needs to be emphasized.

Flipping Form

A fun way to submit a form. Fill out this form and click on the “Request Reservation” button to see what happens (no information is submitted to the server). (Animated best viewed in Chrome, degrades gracefully for IE).

Landing Pages and Digital Business Cards

Personal landing pages are a kind of business card for the internet – a single place where your bio and social media links can be accessed. I’ve been playing around with different layouts for my own personal pages – one is a classic landing page, the other an animated digital business card (be sure to click on “latest”). Landing Page Digital Business Card

JQuery Masonry

JQuery is a javascript framework that I use quite a lot to add functionality to websites. It simplifies validating forms, creating buttons that change or images that scroll. JQuery Masonry builds on the basic framework and allows designers to break out of the sidebar-content-sidebar mold. Masonry treats blocks of text or images (or both!) like bricks that can fit together in many different ways. Check out these sites that use Masonry (note they were not built by me): Dazed Digital Rather Splendid The Inspiration Stream Puma Running Media Page

Zen Cart

If you have a product to sell it is almost required that you have a website to sell it from. ZenCart is an open source full-featured shopping cart application that interfaces with some of the best known merchant accounts. It offers: unlimited category depth multiple sales and discounts unlimited extra pages multiple ad banner controller multiple shipping options multiple payment options newsletter manager discount coupons gift certificates featured products quantity discounts Ple Designs – Custom leather products American Patriot Exchange – Goods made in the USA Mary’s Place Gift Shop – a Tea House with hand made food and soaps Rill’s Soups – Delicious soups

Form Handling

Contact forms, order forms, registration forms – easy to create, not so easy to protect or transmit the information. Beyond Paper takes your form and can write custom validation to ensure only correct, safe data is being input. Trouble with spammers? We can install a Captcha for you to guard against automated form submissions. Want your form sent to two different people? Or ten plus your merchant account for payment processing? We can do that as well. Yakima Union Gospel Mission – This is a complex form with elements that only are added when needed. It collects donation information and processes the payment through PayPal or the Mission’s merchant account provider. Yakima Union Gospel Mission Contact form – a basic contact form with checkboxes to collect additional information. Houston Lunar New Year – This group needed a signup form that would let people pick where they wanted to volunteer. It shows which positions are still available and how many are needed and is updated automatically as volunteers register. La Casa Hogar – An event registration form with options to pay via PayPal, by check, or have the organizers call for information. JAC Recruitment – A multi-part form that collects employment […]

Google Maps

Google has given us a fantastic tool in the form of Google Maps. These can be embedded in your website, and with a database can be populated with locations or even shapes. Take a look at these examples and make sure you click on some of the points to see what the popup info windows look like: WSFMA – shows all of the farmer’s markets belonging to the association. White Pass Byway – lists points of interest and lodging Chinook Scenic Byway – points of interest, campgrounds and other features. Notice the yellow line that highlights the byway and the unique icon used for different activities.

Joomla

Joomla is an open source content management system with a lot of features. While there is a bit of a learning curve involved, Joomla is well-designed for content heavy websites. (For less content heavy websites that just need to change often I suggest WordPress as a CMS). It is also an excellent choice for those wanting member’s only access to content – even allowing content at different levels of membership! There are many plugins and modules that add functionality to Joomla, including some built specifically for Realtors and real estate management, political organization and clubs of all kinds. The Father’s Ranch – This organization wanted different looks for different parts of their website. Click on the links under the masthead graphic to see the different colors. Poulsbo Farmer’s Market – Because Joomla is popular and open source, it is a good choice for non-profit organizations where the person handling the website may change from year to year.

WordPress

WordPress is both a blogging platform and a CMS (content management system) capable of powering sophisticated websites. As an open-source application, the WordPress software itself is available at no cost. Extendable via plugins and custom coding, WordPress is an excellent solution for a website where you want to be able to change the text and other content without paying a webmaster. If you do use a professional to manage your website, it makes doing so much easier, resulting less time and money spent! Some examples of websites and blogs run by WordPress: Samples of WordPress-based websites I’ve worked on: Camp Janet Studio of Good Living Red Bag Report Style Fit Solutions Eng3 Corp Central Coast Speciality Foods Samples of other websites using WordPress, illustrating the possibilities: http://allaboutdryeye.com/ http://www.newinfills.ca/ http://ayenforchocolate.com/ http://geekbeat.tv/ http://sharabenton.com/ http://www.forestbusinessnetwork.com/ http://www.doortechalaska.com/