Browsed by
Category: Individual Post

Shady Affiliate Marketing

Shady Affiliate Marketing

As many of you know, this site normally only gets blog updates when someone asks a question and one of us needs a place to publish a relevant article. Today, however, we’re going to go over something that I came across and want to get out that nobody asked about. It’s easy for those of us who are building our own websites and have a clear understanding of how things work on the internet to forget that some people may not be on the lookout for suspicious activity.  Or maybe it’s just my Overactive Hyper-Vigilance from the Army that the shrinks keep talking about.  Either way, I want to explain this to some people.

To start off, what is affiliate marketing?

In and of itself, affiliate marketing is a good thing (in my opinion).  Someone selling a product or service will place an affiliate rate on their product or service and those affiliates (people marketing the product on behalf of the company/owner) will receive a commission based on sales.  Think door-to-door salesperson for the internet. Usually the goal of this person will be to gain the trust of an audience and then recommend products that they use to their followers and get paid for using and promoting their product.  This is all done at no additional cost to the consumer, so when it’s done right, it’s a win for everyone.

Affiliate marketing gone bad

So why am I writing this post about “Shady Affiliate Marketing?”  Well, there are times when people cross the line with affiliate marketing and are entirely too focussed on promoting the products instead of ensuring that they are doing what’s in the best interest of their followers.

One example of this might be that the person really isn’t qualified to give advice on a particular subject.  Let’s say, for example, you are a painter and you’ve got followers that love your art.  You then decide to take advantage of those followers by recommending a hair product.  That might be too obvious and nobody is going to take your advice.  Well, as an affiliate marketer, you may decide to dig through Google analytics and find out that people are looking for safe paints for children.  Then you find some product that says it’s kinda safe for children and offers a good affiliate rate.  You then promote this “child safe” product to your followers who believe you have done your due diligence as an expert on painting and they trust you.  They then purchase this product and their kid has to go to the emergency room only to find out that the product was drop shipped from some country where you have no legal recourse.

Not the situation you want to be in, right?

Another example might be when there is a conflict of interest.  Imagine you hire someone to come teach your children to paint.  You think you’re hiring a professional and you’re going to get professional advice on painting products.  Only the top products don’t offer affiliate programs and some lower-end products do.  How would you feel knowing that your “professional” is promoting those second rate products instead of the best because they’re getting a commission.  Not the end of the world if you’re getting free advice, but you’re paying for professional advice!

*I know nothing about painting and am using it as an example because I would have to do my own due diligence in this area.

How do you spot shady affiliate marketing?

One key giveaway that there may be some shady affiliate marketing going on is looking at the links.  If you’re using a good web browser like Google Chrome, you can simply hover over a link to see where it’s going to send you.  Let’s try an example.  Don’t worry, I’ll wait if you have to switch browsers.

Here is an affiliate link for Headway Themes.  Hover over that link and you should see an indicator on the bottom left of your browser that looks like this:

Shady affiliate marketing?

Easy peasy lemon squeezy, right?  You can see right in the link the letters “afftrack” which stands for affiliate tracking.

But what if I wanted to hide the fact that I am using affiliate links?

Let’s try the same test.  Hover over this link For The Best Theme Ever.

Both links will take you to the exact same place!  (not on this website)  Go ahead, give them a try.

See the difference?  In the first link I allowed it to be perfectly clear that this is an affiliate link and on the second I made it look like you were going to another page on my site.  Now there are valid uses for this.  The only one I can really think of is that some affiliate programs change your link every year and if you have that link in multiple places, it is easier to just tell the link to go somewhere else in a menu than to have to go back and manually update any place you’ve recommended that product on your site.  But more often than not, it’s used to hide the fact that a person is going to be making a commission off of a recommendation.

*Note: Some affiliate programs are even nice enough to leave the affiliate link in the URL for you like this:

Affiliate Reference

That “ref” here indicates the reference code for an affiliate.  Others, such as Amazon use “tag” or other terms to indicate affiliate links.  Some do not indicate affiliate programs at all.

So what about non-technical signs?

You may be fully aware that affiliate marketing is going on and be completely ok with that.  So how do you know that they’re not just pushing junk on you anyways.

This is a combination of the consumer doing their due diligence and appropriately reading what I like to refer to ass your bull&#*! meter.  Do your research on the product elsewhere.  If you’re familiar enough with the type of product or service, you should be able to get enough of an understanding to make an intelligent decisions.  If you’re not familiar enough or you can only find information coming from other marketers, ask questions.  Ask deep, challenging questions about the product or service.  If they’re promoting a product, they should be able to answer technical questions.  If they can’t, that should naturally trigger your bull$#*! meter.  If it does not, you are not the person who should not be purchasing anything from anywhere, real world or online.  Just give the checkbook to your significant other.

Conclusion

Don’t get suckered by the used car salesmen of the internet.  If you think you’re getting advice you can trust, confirm it!

The Pain of Hosting a Website from Colombia

The Pain of Hosting a Website from Colombia

For anyone who follows the show, you probably know that I currently live in Medellin, Colombia.  The city is beautiful, the climate perfect, and there’s plenty of high tech stuff going on to keep me from feeling like I’m in the Stone Age.  But working as a web-developer has some unique challenges.   In fact, if you ever visit any city in Colombia and wonder why there are either no websites for other-wise website worthy businesses or the websites are horrible, there’s a good reason for it…

Hosting!

You wouldn’t think this would be such a huge problem.  Go sign up for a hosting account and get started.  That’s how we do it in the U.S. right?

If my first website had been as difficult as it is to get a good website here, I wouldn’t be where I am today.

Hosting Websites in Colombia

Let’s clear the sheet a little here and make it clear that you don’t host websites in Colombia.  The most reputable hosting company is horrendous.  For example, I literally spent 3 days on hold waiting for their “live support” at one point.  Although I had selected the option for English support, when they finally responded it was in Spanish.  No worries, move on in Spanish…

The whole reason I had contacted them was because I wasn’t able to change a theme.  It turned out that I didn’t have enough RAM to make theme adjustments (seriously, if someone can explain this to me, I’m waiting).  So they gave me a “temporary” increase in dedicated RAM so that I could adjust the theme and get the site launched.  After ordering in food and sleeping with my computer speakers plugged in so that the support chime would wake me up, all I get is a couple of days to adjust a theme?

OK, fine.  I was sick of the issue anyways, so I jumped on it and got it done.  Of course, this was all after the client had gone through several days of trying to get the hosting account set up in the first place.

Oh, by the way, the only way to set up the account is to file to open account, get the routing number to the bank and make an ATM transfer, then send a support ticket with the confirmation number and a photo copy of the receipt.  I hope the ATM doesn’t run out of receipt paper.

I had thought that having a local host would make up for losses in performance of a better hosting company and in theory it should have.  However, despite their “promised bandwidth” and the fact that it was a relatively simple site, performance was slow.  It wasn’t unbearably slow, so we moved on.  It was running out of date PHP among other things, but the site was working and it was competitively fast for the competition, so the clients were happy and we moved on.

A week after launch, the site was shut down along with my client’s account.  The reason for this shut down?  Backup Buddy was too resource intensive!  

It was time to move on.

Fortunately I had a solid backup of the completed site and the client was only going to have to re-do a couple of listings.  I immediately put the site on my shared server and we went to work on getting hosting in the U.S.

Getting U.S. Hosting from Colombia

These clients happened to also be U.S. citizens.  So after the standard flagging and sending off identification that took about 12 hours for everything to be confirmed, my clients were back on their own account and the site was transferred over with no issues.  But they were lucky.

For non-U.S. citizens, here’s where it really gets painful.  For Colombians with the standard Colombian bank accounts, there’s no way to directly send payments to a hosting provider.  The first step to overcome this is to actually go to one of the few banks that work with Visa and get a pre-paid Visa card.  If you don’t bank with that bank, this also means a pile of forms to get everything put in your name and the money put into a pre-paid account.  Once you’ve got your pre-paid Visa card, you can purchase your hosting package.

Your account will immediately be frozen and you’ll receive a message telling you to contact the hosting company with various forms of identification and a photo copy of the credit card.

YOU MUST BE WITH YOUR CLIENT AT THIS POINT OR THINGS WILL GET WORSE!

If all goes smoothly, you can scan the id and credit card and things will generally work themselves out in about 12-24 hours.

What typically happens is that the client sees some message in English, assumes everything is hunky-dory and not forward the messages onto you as you’ve asked.  Then after about 48 hours of waiting, you come to the conclusion that it got screwed up.  There will be a long chain of support tickets verifying the identity of the client, payment method, type of site that they will have, etc.

After about another 24-48 hours of negotiating with the hosting company, things will get worked out.  Of course, this is all on you if your client doesn’t speak English.  Most of the time the hosting company is ok dealing with the developer, sometimes you have to pretend to be the client.  I personally hate pretending to be anyone or anything, so I usually start off admitting to being the developer and then have to start an entirely new support ticket pretending to be the client if that doesn’t work.

I’ve been through this process with HostGator, GoDaddy, and a couple of others that I can’t think of off the top of my head.  I do want to point out that I just went through it for myself with A2 hosting for the first time.  After the interview with Ben Cool (Episode 38), I really wanted to give them a shot.  While I was flagged, which I do consider to be a reasonable security measure, I was done with the process in about 10 minutes as opposed to the 6-12 hours I’m accustomed to when going through the process myself (not the client).  So, although this is my first time using A2 and I’m not yet ready to give them my full blessing, they get kudos for their great support in getting through this process.

The Solution?

I have an idea in mind as a solution, but I want to fully test the theory before I write about it.  I’ll definetely come back and update this post when I figure out if this is going to work or not.  For now, if you have any other ideas, I’m listening.

 

 

The SEO Essentials

The SEO Essentials

OK, first off…

I know this isn’t an SEO super tutorial.  This article is titled “Essentials” for one reason, and one reason alone.  These are the things that are going to bite you in the tail later if you don’t get them right the first time.  Sure, you can go back and change it all once you’ve realized you screwed it up.  A few hours finding and adjusting photos, a few hours digging through your analytics, a few hours redirecting those bad links…

Look, this is for the beginner.   This is not the all encompassing tutorial.  What this is, is a quick tutorial that describes the difference between me saying “I’d love to help you” and “Yeah, I don’t think I have that kind of time.”  It’s that simple!  There are certain things that take a lot of boring time to fix that could have been easily done right from the beginning.  At the end of this tutorial, the beginner should be able to set up his site and posts with the necessary basic elements of SEO.

Looking at our statistics, I’d say that most of our readers are beyond this point.  That makes this very hard for me.  I’m writing this article for beginners on a website that doesn’t attract beginners.  Hey, you!  You experienced people!  Share this with the people who are following you if you think they could benefit from it.  This is the nuts and bolts of SEO.  Everyone needs to know this.  Just share this if you know someone who’s just getting into their first website!

So here we go, SEO issue

Number One: Permalinks

Simply hover over settings and find permalinks.  WordPress is famous for it’s simple, yet effective, permalinks.  Really, don’t mess with gold here.  Just select “month and name.”  Now, if you’re a WordPress guru, you’ll easily be able to see that WE, the WP Round Table, have selected “post name.”  The simple logic behind this was to force us to come up with creative titles.  When we realized that we had lots of fantastic guests willing to come on the show, that became irrelevant.

— Special shoutout to my co-host Kyle Maurer, who knows everybody who’s anybody in the WordPress community!—

That’s right, I said it!  Wanna fight about it!  If you don’t know Kyle Maurer, you’re nobody!

Moving on…

There may be occasions where another option is right, but 99% of the time “month and name” is the right option.  Just go with it.  It’s that simple.  You may have a valid reason for wanting to use just posts name, or one of the other options, but if you don’t have a really great reason, just go with month and post name.

Those Damned Photos!

For starters, I’m a Mac user.  I’ve written a tutorial on optimizing photos using a Mac.  You can view that article here.  There’s still some good info for you poor PC users, but it’s specifically for Mac users.  Essentially, you want to get your photos as small as you can in data size, not necessarily screen size.  For anyone who tinkers in photography, it can be easy to want that 15 Mega Pixel photo on your site. Believe me, when it comes to photos, we need to be talking in KBs not MBs.  There are ways to display your nice, big photos without harming your website, but they will require either a 3rd party tool or a super server.  I’ll probably never get into the super servers, but if you’d like to know more about how to integrate 3rd party tools, leave a comment.

Also, on the topic of photos, let’s discuss the titles and alt tags.  I’m asked about these often and they are important.  If you are using only a few photos per post, say one to three, then each one should be optimized.  If you are using more than that, make only the best few optimized.  The reason I don’t recommend optimizing too many is that you never know which one the search engines will show as the result.  I’ve got posts from my early days where I optimized all of my photos and some horrible shots are showing up in Google above great shots.  Don’t do this to yourself.  Pick the best two or three and give them optimized titles and alt tags using different variations of your long tail keyword/keyword phrase.  It’s also worth noting that it is best to change the file name on your computer before uploading the photo to WordPress.

 Let’s Talk SEO Tools

There’s only one that you need to begin with.  Later down the line, there will be a laundry list of tools for tracking data, identifying keywords, yada yada…

For now, WordPress SEO by Yoast is all you need.  There are people who will tell you that they prefer this plugin or that one.  That’s all fine and if you choose to switch later, you can do that.  But for now, let’s stick to this.  Yoast’s plugin gives you detailed feedback on what you need to improve not only in regards to setting up your post, but also how you can address issues as a writer.  Here is a photo of what that looks like right now on this post.

Yoast SEO Plugin for beginners

The term SEO and all of it’s competitive variations are probably the most competitive terms in the search engine world.  I have no desire to compete with the likes of MOZ and the many other sites out there who deal specifically with SEO.  WP Round Table is about WordPress and we have no chance of competing with the giants on this one article, but this photo gives you an idea of what you should be looking for.  I encourage you to be very cautious when it comes to keyword density.  Make sure you’re writing for the people and not the search engines.  The listed 1-3% recommended keyword density is a bit outdated and can be misleading when it comes to long tail keywords.

For example, let’s look at someone targeting Virginia Beach, Virginia.  You should be immediately able to see the problem here.  If you’re writing an article about a town or city, you’re likely to only include the state at the beginning and maybe once or twice after that.  You may also want to include it in one or two of your photo’s titles and alt tags.  This will leave you with the dilemma that if you put the long tail keyword, in this case Virginia Beach, Virginia, you will show a severe shortage of keyword usage.  However, if you simply input the word Virginia, you may find yourself going way overboard.

Furthermore, in this article I have used both SEO and search engine optimization.  Google ain’t stupid.  They know that those are the same terms.  In the old days, you would have tried to compete for these terms separately, but not anymore.  So in this case, I would run both terms through Yoast’s plugin and make sure I’m not going overboard.  But ultimately, the 0.53% you see above is just fine here.

This tool is best used to train yourself to write and develop content that works well for your goals.  I rarely look at it anymore, but I went out of my way using it until I had picked up the right practices to end up with great scores without it.  I still often refer to the Flesch Reading score to make sure I have kept my content concise.

Titles, Tags, and Text, Oh My!

This one can become a bit tricky despite it’s simplicity.  So I’m going to keep it simple and give some basic solutions that should work well with everyone.  You should be giving titles, subtitles, and section titles to all of your content.  As with any paper you would write, you want to have manageable sections.   On the web, however, you really want to break these up more clearly with subtitles.  In it’s simplest terms, imagine a five paragraph essay.  You want an introductory paragraph, supporting paragraphs, and a conclusion.  These things typically change a little in the blogging world.

The introduction paragraph is generally the same, however you are unlikely to list out a thesis or any of your supporting arguments.  Instead, just catch the readers attention and give them an idea of what you’ll be discussing.  Your supporting paragraphs should just be the information you plan to address in your post.  Here we’ve discussed permalinks, photos, tools, and tags.  Depending on the type of writing you’re doing, you may not want transitional phrases.  This is because it can be harder for people to keep track of information being read on a screen and you want to keep the information broken up and properly labeled.  Finally, the conclusion is generally used more of a call to action in the blogging world.  You might restate your topics, but unless you’re posting academic type content online, there won’t be a thesis for you to reinforce.

Before we get into some of these tags, let me tell you how to get them.  There’s a button on top of your visual editor that looks similar to a keyboard.  It is now called the Toolbar Toggle but used to be called the “Kitchen Sink.”  It’s where you’ll find lots of great editing options including text type.

So let’s look as some SEO significant tags.

  • Title Tag: You’re using WordPress so don’t worry about it!
  • H1: Restate the title in a different way using the H1 tag whenever possible after a short intro.
  • H2: This tag should be used for the titles of supporting categories.
  • H3-6: These tags are far less used and less necessary.  The higher the number, the less important.
  • Strong: WordPress automatically uses <strong> when you make text bold.*
  • Emphasis: WordPress automatically gives <em> tags when you italicize your text.*
* There may be times when using <b> and <i> are more appropriate, but this is getting more advanced.

Now, Go Get Started!

Once your permalinks are set, they’re set.  No need to worry about them.  Just focus on getting those photos and tags used properly and you’re well on your way to not having to come back and change things in the future.  Use the SEO tools in Yoast’s SEO plugin to remind you of any simple corrections you can make.  Good luck and happy blogging.

 

 

Preparing Photos For The Web On A MAC

Preparing Photos For The Web On A MAC

If you’ve been following us since the early days of 3 months ago, or have gone through our archives, you may remember us covering a hot topic back in episode 13.  Where’s The Turbo Button was all about speeding up your website.  Tons of actionable advice came from this hangout and it could have been easy to get overwhelmed.  We covered everything from caching, CDNs, minifying, CSS sprites, and yes, optimizing photos.  Optimizing photos has been one that has been a deep, dark issue among many bloggers and WordPress users.  Who doesn’t want great, high quality photos on their sites?

Prior to that hangout, I got into a rather deep conversation with some of the commenters over at WPMU’s post on trying to score a 95 on Google PageSpeed Insights.  One such conversation left the blog completely and went to email conversations dealing with the blogger’s personal situation.  She had a photo blog where she did some incredible work, but her page was ranking horribly on all of the various speed tests.  Her photos were HUGE!

She was running on a similar server to mine, her theme was some what minimalistic. It was all about her photos.  The good thing was that she too was running on a Mac and I was in a position to help.  So today we’re going to get into how to optimize photos for your website using programs available for Mac.  Some of these programs will apply to PC as well, but this is especially for Mac users.

Optimizing Photos on a Mac

I’m certainly no professional photographer, but for an example I’m going to be using a photo I took.  It is of a crystal butterfly in Manizales, Colombia.  It was probably one of my most shared and liked photos and I wouldn’t want it showing up looking like doggy doo either.  This photo was taken in RAW mode (that’s crazy editable for those who don’t know) and exceeded 21 MBs in it’s original state.  RAW photos require photo specific software and cannot be displayed in browsers, so you will need to convert to something like .JPG or .PNG to display on your site.

Crystal Butterfly

This 311 KB photo is completely optimized to look it’s best on our website.

Step one: Adjusting size and PPI

If you’re new to digital photography, it may come as a surprise that computers use a lower PPI (pixels per inch) than does print.  Even with the incredible advancements of late, a computer monitor still measures PPI at less than half of what a standard home photo-ready printer does.  Professional printers use 300 PPI, while your web browser uses only 72.  That’s a lot of pixels.

There are tons of ways to edit this.  I’m going to cover two that I use.

Adjusting-photo-for-web-using-ApertureApple Aperture:

  • File
  • Export
  • Version
  • Set DPI (AKA PPI) to 72.
  • Set height and width as appropriate.
  • Set quality as appropriate.
  • Set as a preset by clicking the + button.

 

 

 

Adjusting photo for web using Photoshop

Adobe Photoshop:

  • Image
  • Image Size
  • Check Resample
  • Set to use pixels
  • Set resolution to 72
  • Change size as necessary

 

 

You can use other programs but very few others give you the same level of control.  iPhoto for example, will let you optimize your size, but not set the PPI.

Step Two: Lossless Compression

Here I am going to recommend one simple tool, ImageOptim.  ImageOptim performs a simultaneous lossless compression and, when appropriate, make the images progressive.  Lossless images maintain their quality but the process removes unnecessary data and color schemes that the photo does not need.  This can drastically reduce file sizes.  I normally get anywhere from a 5% to a 40% reductions in size.  In the competitive world of speeding up your website, even that 5% can help.  If you are not a perfectionist when it comes to your photos, feel free to bring the quality down in Aperture or Photoshop or use a “lossy” program that will compress images even further, but at a loss of quality.

Progressive images are ones that come in as an entire blurry image and then sharpen.  This technology seems to have gone by the wayside for some time and is making a comeback.  In the days of dial-up, this was a critical way of getting photos to the end user at a bearable speed.  As broadband Internet became the norm, progressive photos drifted away.  But since Google has include site speed as an SEO factor, people are back to trying to optimize that speed any way they can to beat out the competition and progressive images may just give you that competitive edge.

For the Extreme Photographer

There are two things you should know if you want your best images on the web.  First, if want your photos to be shared in a way that can be printed out at great quality, allow someone to download them instead of putting print quality images on the web itself.  If you’re selling your images, this is a no-brainer.  But even if you just want to share them, give a download option instead of forcing every page to load huge photos.

Second, WordPress has an automatic function built in to reduce image quality by 10%.  If you want your images to stay nice and crisp on your WordPress website, try adding this code into your own plugin:

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

Not big on coding?  It’s not my favorite either.  Go ahead and download this simple plugin that will keep your images looking their best on your WordPress website.

image quality.php

By the way, do you want the full size version of that butterfly?  You can get it here.

Add MailChimp Subscription Form

Add MailChimp Subscription Form

Before we get started, this only works for .org sites.  Information on including this in .com to come.

 

So I was invited to lunch at a friends house today.  The invitation came late last night and apparently everyone thought that everyone else had invited me, so I didn’t get the three day warning everyone else got.  At first I thought I was too busy trying to make my Angry Birds (Epic) more powerful and was going to skip out.  But then I got hungry.  So I went, which turned out to be a good thing.

When we were done having lunch, half the group left and the other half sat down and said “Let’s get started.”  I had no idea what we were getting started with.  The week prior we had setup a content strategy session which the host of today’s lunch had been unable to attend.  It turns out that this lunch was actually a redo of last weeks lunch power session and I was expected to lead the discussion on content strategies.  Something else they had all assumed someone else had filled me in on.

So here I was with no computer leading a content strategy session.  My friends are lucky I have a flexible schedule.

As you may have assumed by the topic of this post, our conversation drifted off topic a bit and we got onto using mailing lists.  OK, that’s a part of content strategies.  But that ultimately led to a couple of people in the group asking how to put a mailing list registration form on their websites.  So here we are.

Let’s get started.

 

How to add MailChimp registration form to WordPress

  • First, sign up for MailChimp and select “Lists” from the left hand column.
  • Click the “Create List” button from the upper right corner.
  • Select “Signup Forms” from the horizontal menu.
  • Then select the “Embedded Forms” option in the center.
  • Play with the available options until your heart’s content.
  • Copy the embed code which says “Copy/Paste into your site.”
  • Paste that code into a “text” widget within your widget area.
  • Save your settings and marvel in your sense of accomplishment!

 P.S.

If you found this useful and you don’t sign up for our newsletter, you’re just a bad bad person.

Adding Google AdSense code to post or page

Adding Google AdSense code to post or page

In this quick video I will demonstrate how simple it is to add your Google Adsense code into a WordPress post or page.  This tutorial is done using my personal travel blog.

 

Getting the Google Adsense Code

  • If you haven’t done so yet and want to use Google Adsense, the first step is to set up an account.  For this post I’m going to assume we’re all beyond that point.
  • The next thing you need to do is go to “My Ads.”

My ads in Google Adsense

 

 

 

Using Google Adsense Code in WordPress

  • Next you either create a new ad or open an existing ad.
  • Select “Save and get code.”
  • Select all of the code and copy it.
  • Paste the code into the HTML “text” tab on the top right of your post or page.

 

 

 

 

Placing your code into WordPress

This process couldn’t be simpler.  From here, all you have to do is select the “Text” or HTML editor tab at the top right corner of the post or page visual editor.  Find the location within the text where you want the post and paste the code there.

The video above covers this all step by step.

Call to Action

Embedding code is really simple once you’ve done it a time or two.  If you’ve never done it and don’t have AdSense, you can still practice.  Try embedding a YouTube video into some posts and pages.  The process is pretty much the same.  The only difference is that you will need to find the embed code for the video you are trying to share.  Go to the share section of any video on YouTube, feel free to share the one here if you’d like, and select the “Embed” option.  Copy and paste that code exactly as we’ve done here with the Google AdSense code.

Just a few notes on this

  1. You do not need to actually use the embed code to share videos from YouTube, Vimeo or some other websites.  You can simply place the URL in the post.  However, using the embed code is still easy and a good thing to understand.
  2. You can embed content from anywhere you see an embed code.  So go wild!
  3. You can also put embed codes in sidebars using the “text” widget.
Guide to WordPress Child Themes

Guide to WordPress Child Themes

Last week we discussed child themes in episode 14. We touched on all kinds of different aspects of this important concept and explained the what, when and why in great detail. Here is a structured outline of what we covered and generally everything you need to know to understand and take advantage of child themes.

What is a theme?

A theme in WordPress is the code that determines how a site looks. Think of the theme like you would your clothes. It determines the style of the site but not so much what it does or how it works.

Every WordPress site requires a theme to work. It can be extremely basic or extremely complex. WordPress comes with a default theme installed in most cases. The default theme used by WordPress typically changes each year, the current one being Twenty Fourteen.

Themes can be obtained all over the web. The WordPress.org theme repository contains thousands of free themes which can be downloaded and installed manually or right within the WordPress dashboard. More free and premium themes can be found across the Interwebs. I’d recommend checking out episode 5 where we talked WordPress themes if you would like to learn more about them and where they can be found.

What is a child theme?

A child theme is a WordPress theme which inherits code from another installed theme. To use a child theme, one must have at least two themes installed: a standard WordPress theme and a child theme. The child theme will be the active theme (only one theme can be active at a time) and in its code, it will reference the other theme, indicating to WordPress that it is the “parent” or “template” for the current theme.

How does a child theme differ from a parent theme?

A child theme will typically have a lot less in it than a parent theme. This is because the only files that exist in a child theme are the ones being used to override values, templates and information created by the parent theme.

A child theme is also different in that it cannot exist on its own. In order for a child theme to be recognized by WordPress and for it to be activated, a valid parent theme must be installed and properly referenced by the child.

How do they work?

To understand how child themes work, we must first discuss the different components to a theme:

  1. Stylesheets – contain CSS which determines how everything looks. Colors, fonts, sizing, alignment, etc. are all handled in the CSS.
    1. Example: style.css
  2. Templates – contain the markup which determines the structure. These define what information shows where and when.
    1. Example: footer.php
  3. Functions – any special functionality like settings, widgets, shortcodes, post types, etc. that a theme creates is stored in the functions file.
    1. Example: functions.php
  4. Assets – any files that don’t fit into the above categories. Typically images, javascript, fonts and other such items which are included as needed.
    1. background.png

Now that we understand the different types of files that exist in a theme, we can break down exactly how WordPress handles them when a child theme is active.

  1. Stylesheets
    1. Load in addition to parent theme
  2. Templates
    1. Overrides parent theme
  3. Functions
    1. Load in addition to parent theme
  4. Assets / resources
    1. Overridden with CSS or function

In plain English, whenever someone visits a website with a child theme active, WordPress says:

“Ok, first off I need to load all the functions from functions.php in both the parent and the child themes. For this I don’t care if we’re loading a front-end page or a back-end page. Just load them all and proceed unless we hit a conflict like multiple functions with the same name or something. If that happens, we’ll just die and leave blank white-screen-of-death.

When we’re done with the functions we need to grab whatever templates are needed for the current page being requested. To do that I’ll look first in the child theme and, if I find what I need, I’ll use that. Otherwise, I’ll just use the one in the parent theme.

Then I need to grab the stylesheet for the parent theme followed by the stylesheet for the child theme. Alright, last I’ll throw in these javascript files, images and other nonsense that was requested in the files I already loaded”.

Why use them?

Here are a few compelling reasons to use child themes:

  • Updates – Much like plugins and WordPress itself, themes sometimes need to be updated. Updates come from the original author of the theme and help make the theme more secure and generally work better. It is very important to always keep your themes up to date. The reason child themes are necessary is because any changes made to a theme’s code will be overwritten when an update occurs. This means if you change anything inside the code for a theme, it will be lost the next time you update the theme. Child themes create a separate directory for your changes to exist in where you can safely override the parent theme without actually editing it. This makes all of your code changes completely update safe.
  • Warranties – In some cases, theme providers may provide support for the theme you obtained from them. However, most of the time, they will be unable to support and assist you if you have modified the code directly. This is much like buying a computer or a washing machine where tampering with the device can void your warranty. Keeping your changes separate in a child theme makes it so the original developer can continue to support you.
  • Support – Similar to the last point, supporting a theme (or any software for that matter) is incredibly difficult if it has been modified. The original author, or really any developer, will have a hard time determining what is going on and why things are not working correctly if your changes are intermingled within their code. Separating your code from the original source by using a child theme is a great way to maintain clarity for everyone involved.
  • Re-using the original – A time may come where you want to re-use the original theme as it was. If you have modified it directly, this can be more challenging whereas if your changes are maintained separately in a child theme, this is very simple.
  • The blame game – If your changes have been applied within the original theme, broken features and functionality cannot be as easily solved and can often result in a “blame game” between yourself and the original author. If your changes are separate from the original code base, it is a simple task of activating the parent and then the child theme to determine where the problem lies.
  • Multisites – I have had lots of experience managing WordPress multisite networks and know how valuable child themes can be in that instance. It is not uncommon to desire a similar layout/design across a network of sites but need some small differences for single or groups of subsites. Using a parent/child method allows us to maintain a main theme for all sites to use while activating child themes selectively for subsites that require overrides.

When to use them?

So exactly when should we be considering the use of child themes? Here are a few instances where it makes sense:

  • You prefer to make your code changes in a code editing program/IDE like Sublime Text, Netbeans, PHP Storm, Notepad++, etc.
  • You need to modify PHP templates
  • You need to introduce new theme-specific functions
  • You need to incorporate new theme-specific assets
  • You are making lots of styling changes and prefer a traditional development workflow
  • You have reason to believe that the parent theme may:
    • receive an update
    • need to be re-used
    • need support from the original author
  • You want to version control your changes

When not to use them?

Now let’s consider some instances where using a child theme may not be necessary:

  • You have no need to change any code
  • You are only making small CSS changes
  • The original theme will never, ever be updated
  • The original theme will never, ever require support

Regarding the second bullet, in the case where the only code that is required to be added is some basic CSS, it may be wisest to utilize a custom CSS tool within the WordPress dashboard. There are many themes that include an option for this and plugins available as well. These work by saving your CSS to the database and outputting the code in the header of every front-end page.

How do you create them?

Creating a child theme in WordPress is not difficult. Let’s lay out the steps and make this simple:

  1. Ensure that a valid parent theme is installed.
  2. Create a new directory in wp-content/themes and name it something like child-twentytwelve-mysite. You can name the directory anything, just don’t include spaces. I recommend using a consistent naming convention across all of your projects though. The format “child-parent-site” is one I use on all of my projects so that I can clearly see at a glance that the theme is a child, what its parent is and what site it was made for.
  3. Create a file named style.css in this new directory.
  4. Open up the style.css file in any editing program (I like Sublime Text 2) and the following code to it (customize as needed):
    /*
    Theme Name: Your child theme's name
    Author: Your name
    Description: Child theme made by me for my site.
    Version: 1
    Template: parent-theme
    */
    
    @import url(&quot;../parent-theme/style.css&quot;);
  5. Save that file and upload your entire new theme to wp-content/themes on your server.
  6. Login to your site and activate the new theme.

It is worth noting that there exists a great plugin out there that can help make this just a little bit easier.

editing

Once a valid child theme has been created and activated, development can begin. Here is how you will implement your changes when working on a child theme:

  • For styling changes, add your new rules to style.css
  • To change the contents of your templates, locate the template you want to modify in the parent theme, copy that file, paste it into your child theme and then get to work on it. WordPress will automatically begin using this new file instead of the one in the parent theme.
  • To add functionality, create an empty functions.php file in your child theme and begin placing your PHP scripts there. If you are incorporating lots of functionality and this file becomes too lengthy, it is common practice to use the include() or require() functions to reference other files that contain more functionality, generally stored in a subdirectory in your theme called “functions” or something like that.

Other notes

Here are a few other items worth noting:

  • While child themes are the “right way” to apply changes and modifications to a theme, there is no support for grandchild themes. This is a common issue for those purchasing/downloading child themes for popular frameworks like Genesis. The proposed standard for applying override changes in that scenario would be to use a custom plugin.
  • Modifying functionality in a parent theme is not as simple as overriding a template or adding new CSS rules. This gets into some more advanced development topics and generally requires an understanding of PHP and WordPress hooks. Many theme developers make customizing their themes easier for future developers by including hooks (actions and filters) throughout their code. This allows developers to add to or modify the original code without actually editing it directly. A smart move for those getting started would be to narrow your choices of theme providers to those who employ good practices like adding hooks throughout their code.
  • When it comes to functionality, functions.php works essentially the same as a plugin in WordPress. Both the functions file and all active plugins are run on every request, front-end or back-end. While there are few technical differences between the two, there are lots of practical reasons why one may be chosen over the other when implementing new functionality. For example, if a feature needs to be added that has little or no bearing on the design of a site (like adding Google Analytics tracking code or making a “members only” area) then it is generally best to place the code in your own custom plugin. Whereas when functionality being added is completely dependent on the theme (like an option for changing the header’s background image), the code should more logically be placed in the child theme’s functions.php file. This is really for practical reasons rather than technical reasons and there are very interesting debates and discussions about this in the WP community.

Resources

Where to Learn WordPress Skills Online

Where to Learn WordPress Skills Online

In Hangout #11, we shared many of the tools and resources that we use to work productively, outside of WordPress itself. Since I am currently on a quest to further my knowledge of WordPress and its related markup and programming languages as quickly as possible, I outlined where to learn WordPress skills online. In this post, I’ll highlight the Codecademy, Treehouse, Code SchoolLynda.com and WPSessions learning resources. The pros, cons, and differences between them are as follows:

Codecademy

Codecademy is free! I have gone through many of their courses on HTML, CSS, JavaScript, jQuery, and PHP and learned a ton. Their lessons range from entry level to intermediate skill level. Users read through text explaining how to properly write a snippet of code with an example or two. They are then provided with an IDE/text editor tool in the browser in which they must write the correct code to solve the problem that is being posed in order to pass that level and advance to the next. This is a highly recommended resource, especially for beginners.

Treehouse

This one costs $25 per month for a basic membership. That’s still peanuts compared to the cost of college or university credit hours, though. A number of languages and frameworks are offered. Users watch videos and then test their knowledge with quizzes and Code Challenges to advance to the next level, which results in a rich learning experience that plays like a video game.

Code School

Code School costs $29 per month. As with Treehouse, users watch videos and must complete the coding challenges to advance to the next level, which again is very reminiscent of video game play. Many languages are offered. Code School is especially thorough in the area of learning JavaScript; they offer several lessons, including more advanced object oriented JS programming, several of jQuery lessons, and lessons for JS frameworks like Ember.js, Backbone.js, and Angular.js. Code School gets bonus points for having very fun and creative animated videos and songs that kick off each one of their lesson series, and a theme for each. 🙂

Lynda

Lynda.com costs $25 per month for a basic membership, and offers courses on design, development, photography, videography, 3D Animation, and other topics. They also have an entire section of WordPress-specific training series. Lynda allows you to watch videos of the trainers presenting their topic in your browser, and provides downloadable exercise files (the HTML, CSS, PHP, etc. files) so that you can follow along on your own, and tinker with the code provided to bend it to your will. I am personally excited to go through Morten Rand-Hendriksen’s new course on building themes from Scratch Using Automattic’s popular Underscores starter theme.

WPSessions

WPSessions was launched in June, 2013 out of developer Brian Richards’ desire to attend many WordCamp events to watch great presentations, but his inability to travel to all of them within a given year. WPSessions essentially brings experts’ presentations on various WordPress topics to you. The sessions are broadcast live, and viewers are able to ask questions of the trainer via a chat window for a two-way discussion on the topic. Each session has been offered a la carte for about $30-50, however WPSessions will soon be transitioning into a membership service, with a recurring monthly fee and the ability to watch all sessions that have ever been recorded, download the sessions, collaborate with the experts and other trainees on members only forums, and other perks. WPSessions is a highly recommended resource, since unlike all of the other learning resources mentioned, it is 100% WordPress-specific.

Which to Choose?

Which learning service you choose depends on your learning style and skill level. But why settle on only one? You can of course use a combination of several of them, if desired.

For furthering your skills on markup and programming languages themselves, I recommend Codecademy, Treehouse, Code School, or any combination of those three. These have a low barrier to entry for beginners, and really challenge users to not only passively watch someone else program something, but to actively demonstrate their competency by completing the coding challenges themselves. Their semblance to video game play, forcing you to master one level before advancing to the next ensures that you’re really committing concepts to memory, and are able to put them into practice.

For intermediate to advanced users, and those who learn best by watching an experienced trainer explain specific topics in detail, I recommend Lynda.com and WPSessions. If you’re more of unicorn, or dabble in other fields like photography or videography, having access to Lynda to learn all you can across a spectrum of disciplines may be a great resource. For WordPress-specific learning, though, WPSessions takes the cake. WPSessions puts WP experts at your disposal for a live presentation, including a Q&A segment, during which you can ask the trainer any questions you have – something that none of the other services outlined here can boast. Not to mention, WPSessions will very shortly become an even more valuable resource by giving users access to every sessions ever recorded, the ability to download sessions and take them with you on the go, a members only forum to foster communication between members, and other perks as it transitions to a membership service.

Remember that whichever service or services you choose, being a lifelong learner who is always willing to eschew the old ways of doing things in favor newer and better technologies and techniques will ensure you can achieve the skill level needed to accomplish the goals you’ve set for yourself. Best of luck!

Search Engine Optimization Basics

Search Engine Optimization Basics

In preparation of this week’s Google Hangout on Air, I’d like to start with the basics of Search Engine Optimization (SEO).  If you’re familiar with SEO, this article is not for you.  However, if you’re not vary familiar with SEO and are planning to watch our weekly hangout, there are some things you may need to know ahead of time.  Hopefully this post will have even the SEO novice able to follow along with the conversation.

Search Engine OptimizationWhat is Search Engine Optimization?

Search Engine Optimization is a term used to refer to affecting a sites ranking on Search Engines such as Google, Bing, Yahoo, and others.  Because these “search engines” are used by so many people to find information that the user may not have knowledge about, ranking highly on the Search Engine Results Page (SERP) can bring your site a lot more traffic.

Two Main Parts to SEO

The first thing that you need to understand about Search Engine Optimization is that there are two primary parts to SEO; on-site and off-site.

On Site SEO

On site SEO is made up of things that are actually on your site.  This can be a lengthy aspect in itself, but I’m going to try to cover the basics here.  Assuming you have a keyword, we’ll take “Search Engine Optimization” for this article, the first thing is to make sure the word or words are in the content.

As an aside, Search Engine Optimization is longer than one word and would be considered a “long tail keyword.”

You’ll notice that I not only have our keyword in the text, but it is strategically placed in other parts of the post as well.  It is in both an H1 and H6, which are the variations in text size for titles and such.  The small print above is an H6.  The keywords are also listed in the title, the URL, the meta description, and as title and alternate text for the photo.  This is all done to make sure that the search engines have no problem deciphering what your content is about.

Since you’re obviously using WordPress (or at least you should be), there are plenty of tools that will monitor this information for each post and really help you if you’re new to SEO.  The WordPress SEO plugin by Yoast is my favorite and I often use it to make sure I haven’t missed something silly.

 Off Site SEO

Off site search engine optimization is anything that helps your ranking that is not done on your site.  This almost entirely boils down to back links.  Back links are any link to your site from another.  The various search engines will “crawl” the internet and keep track of all the links pointing to your site from across the web.  Think of each link as a vote for your webpage.  Keep in mind, however, that not all votes are created equal in the SEO world.  In fact, some can even hurt you.

Before I dig any further into this, it’s important to note that search engine algorithms are always changing.  I will broadly discuss this but know that the specific values for each back link, or “vote”, are unknown and can change.

How valuable a given back link is depends on the importance and relevance of the page it’s coming from.  There are various ranking systems that determine the importance of a site, but for our purposes today we’re going to stick with Google Page Rank (PR).  This is a score that Google assigns to every page on the internet ranking from 0-10.  The higher the number, the more important the site is.  So if a website with a PR of 7 links back to this post, that’s great!  However, relevance is also important.  If that PR 7 website is about cooking, it would be far less valuable of a link than if it were a prominent site about web design.

Anchor text is also important to understand.  Anchor text is the text used in a link.  For example, linking to our homepage like this www.wproundtable.com is not anchor text.  Linking to our home page like this “the best website about WordPress EVER” is anchor text.  Both are links to our home page, but the one with the anchor text tells readers and search engines what our site is about.  It used to be that the more anchor texts you had, the better.  They’re still important in letting search engines know what your site is about.  The search engines now factor in how many of your links are likely to have anchor text naturally and you can be penalized if they see too many anchor text links.

Ready For Tonight?

Hopefully this post is covering the basic information you will need in order to follow the conversation this evening.  Search Engine Optimization is as much an art as it is a science, particularly since all search engines keep the exact details of their algorithms heavily guarded.  If you have any questions, feel free to join the discussion and ask them tonight as we host our live Hangout on Air.  Or ask them in the comments section below.

See you this evening.

5 Steps to Success with 99 Designs

5 Steps to Success with 99 Designs

As you may have noticed, WP Round Table finally has a real logo.  It’s been a rough road trying to get a decent logo for WPRT.

I first started off with my normal guy over at fiverr.com.  That’s where I generally go for low cost, simple logos.  I gave a description of what I was looking for and my guy said that it wasn’t in his realm.  He recommended I look for an illustrator.  So I reached out to a few illustrators over there.  They all told me that they were too busy to work on my project.

So I reached out to my networks and asked for recommendations.  One guy on Google+ recommended a friend of his.  He too was too busy.  Another friend recommended a family member.  She wanted to sell me a package with business cards, restaurant menus, and all sorts of additional material I had no use for.  When I wrote back saying I just needed a logo and was looking to pay about half what she was asking, she said that it just wasn’t professional enough for her to get involved.

All-in-all, one great big nightmare.

Enter 99 Designs

Of course I’d been hearing about 99 Designs for a while.  I had always liked working with people I knew I could talk to and preferable people I’d done business with in the past.  Needless to say, I was a little skeptical.  But after exhausting all of my other resources I was ready for anything.

So, I signed up and started my competition.  For those who don’t know, the way 99Designs.com works is you put your project in as a competition and people compete with their designs to win your prize money.  Of the $249 that my competition cost, $165 was going to be the prize money for the winning designer.  With that little cash on the line I didn’t expect to get great results.  To be fair, I did get some complete garbage, so lets start with that.

99 Designs contest entries

Step to 99 Designs success number 1: Describing your contest.

It may sounds obvious, but describing your contest is the first step to success.  Many people will submit a design without really reading your description.  Copy written information, like the WordPress logo, might seem like an obvious problem.  Despite specifically pointing this out, I still had several people submit entries with said logos.

Also, you may want to consider just how specific you want to be.  In my case, I was open to new ideas and suggestions.  I also wasn’t all that sure that what I had in my mind was going to work very well.  So I left my description rather vague to see what creative people could come up with.  There may be cases, however, where you know exactly what you’re looking for and you need to describe it thoroughly.

99 Design success tip #2:  Reach out to followers.

At 99Designs.com, artists can “follow” your contest.  This is pretty much their way of expressing interest without actually taking the time to contribute.  I imagine that if they contributed to every contest it would be very time consuming with very little payout in return.  So look over the profiles of the people who follow your contest and see if any meet your styles and goals.  Our contest winner was one that I reached out to after he followed us.

Success tip #3:  Give feedback.

This will be covered and highly encouraged during the 99 designs contest process.  But don’t overlook it.  If a design looks like it has any potential, tell the artist what you like or don’t like about it.  If you can’t get a design that is at least decent in the first day or two, it will really make step four a tuff one.

Success tip #4:  Guarantee a winner.

During the design process you will have the opportunity to guarantee your prize.  This is a tough choice if you don’t have at least a decent design, so giving that feedback in step three is critical.  Nobody wants to guarantee the prize if there’s absolutely nothing valuable there.  However, once you’ve guaranteed your prize people will be more interested in working on your design.  Our submissions nearly tripled on the last day once the award was guaranteed.  The earlier you can do this the better.

Success tip #5:  Choose your finalists carefully.

It may be easier just to pick your finalists based on just the best work.  But don’t automatically rule out those who’ve made great strives in addressing your issues.  Great design work is nice, but communication is key.  When someone submits something that looks like Marvin the Martian, then goes to Aristotle statues after receiving the guidance of “We’re looking for a bit more 5th century knights,” you know there’s a major communications breakdown.


General Review of 99Designs.com

Overall I was very impressed.  The first day and a half things were looking pretty bleak.  However, once that first good design came in that I was comfortable committing the award to, I got several great designs.  The winning designer ended up giving me his entire design package which actually included another one of my favorites and I couldn’t be happier with his work.  I did feel a little over sold by the statements during the registration process.  One in particular that said I could expect around 30 designers to compete in my competition.  I only have about 5 and another 15 watching.  Two of those designers, however, were fantastic and several of the others did some really beautiful work.  I’ll definitely be using 99 designs again.