PSD to WordPress Conversion Instructions

Section 1 – Designing a WordPress theme in Photoshop

Designing a theme for WordPress in Photoshop is straightforward. In our example today, we will create a simple two column fixed width theme. Before we start, we need to decide what the width of our theme will be. I chose a 980-pixel sixe because it will fit on most screens without the need to scroll form side to side, as most screens today are at least 1024 pixels wide.

To get started create a rectangle that is 1024px x 768px. This will serve as our background for the theme. You can color your backgrounds or even add an image. For our tutorial, we will color the background blue.

psd to wordpress theme PSD to Wordpress Conversion Instructions

Next, we will layout the theme container. Later this will be defined in the web pages we create, but now let’s add a white rectangle 980pxx768px. This represents the themes overall width and the container that will hold our theme.

psd to wordpress theme21 PSD to Wordpress Conversion Instructions

Now that we have the basic layout done let’s look at the different sections we will be creating. Our theme will have four basic sections:

  • Header
  • Content
  • Sidebar
  • Foote

psd to wordpress theme3 PSD to Wordpress Conversion Instructions

We will add each section to our theme layout starting with the header. For this tutorial, I have decided to create a header that is 175px tall and I will add 13px above the header also. To do this I will create a box that is 188px x 980px aligned with the top of the page.

psd to wordpress theme4 PSD to Wordpress Conversion Instructions

I now have the basic header shape in place. Remember I added 13px for a border at the top so I want to represent that in my design. If you have an image for your header, you can now format it to the right dimensions and paste it into the PSD like this.

psd to wordpress theme5 PSD to Wordpress Conversion Instructions

I have decided to put the menu right below the header and to make it approximately 30px in height. To do this, I will create a rectangle 30px x 980px under the header image.

psd to wordpress theme6 PSD to Wordpress Conversion Instructions

I have decided to put the menu right below the header and to make it approximately 30px in height. To do this, I will create a rectangle 30px x 980px under the header image.

That is it, we have a design we can now transfer to a theme. Before we start coding, let’s look at some of the basics of a WordPress theme. [Read more...]

The Day of SOPA / PIPA Protest Begins

Google and Wikipedia have  begun their protests of the proposed SOPA and PIPA legislation before Congress.

Wikipedia has taken their own site down and offered a landing page that enables users to lookup contact information for their elected officials.

wikipedia homepage sopa protest 480x345 The Day of SOPA / PIPA Protest Begins

Wikipedia's protest against SOPA as seen on January 18th, 2012.

Google also decided to make a statement.  Google did not choose to take down its service like Wikipedia, but instead made their opinions very clear with a stark Google Doodle and link for more information.

google homepage sopa protest 480x350 The Day of SOPA / PIPA Protest Begins

A view of Google's homepage on January 18th, 2012 during the SOPA / PIPA protest.

Act Now

Tell congress to not censor the web and to not cripple our innovation economy. – Google Take Action PDF

Believe me when I tell you that if this legislation passes, it will fundamentally change the way each and every person in the world experiences today’s open Internet.  SOPA / PIPA will release a mob of uncontrolled censor police across the web, fueled by major corporate greed.

I like Google’s SOPA information page headline:  Stop Piracy, Not Liberty.

In this legislation, entire websites can be instantly removed from the Internet-based on simple claims of copyright violation or piracy by a content owner.  The bill also requires pages/sites in violation to be removed from search engines and other aggregators.  The simple possession of a cached page in violation, like a search engine would have for Indexing purposes, would cause that search engine to become a target.

Therefore, search engines will be forced to quickly comply with the demand to remove pages and sites from their SERPS as a matter of self preservation.

The bill also addresses the income of websites.  Sites with content said to be in violation can have their advertisers prohibited from transacting with the violating site.  The legislation goes so far as to force PayPal to suspend payments.

Top top it off, the bills would also force ISP’s (such as Verizon, Comcast, Cablevision, etc) to block users from going to offending sites all together.

Government censorship? You’ve got to be kidding.

The power of the bill rests in the courts deciding the merits of an infringement case.  A SOPA / PIPA case would essentially allow the United States Government to decide what is a true piracy claim, and how to properly handle the remedy.

Essentially, government sponsored censorship.

The very fabric of the open and free Internet will crumble once it is left up to the government to validate the web’s content.  Can we afford to put this kind of power in the hands of the government?

The desire to kill Internet piracy is a nobel goal.  However, it cannot come at a higher price [liberty] than the corporate interests [money] it aims to protect.

 

Jetpack for WordPress

The new suite of plugins called Jetpack (by WordPress.com) offers an all-inclusive set of features for self-hosted blogs.

jetpack wordpress 240x154 Jetpack for WordpressOne of the things I am asked most by friends and strangers:

That plugins do I need for my WordPress blog?

I get this question most often from people who have recently moved their blogs over from WordPress.com to the self-hosted WordPress.org version.

The core of both platforms is nearly identical with the exception that the self-hosted version requires you to install all of your own plugins.  Most, but not all, of the features available in WordPress.com are available as one-off plugins in the open marketplace.

Unfortunately, you are responsible for updates and anything that goes wrong if they experience bugs.

I’ve used WordPress for about 7 years, and in all that time I have always wondered why certain plugins do not just come with the core WordPress.org download.  I know the reason is that WordPress.org is an open source program that does not want to play favorites with certain developers.  It makes some sense.

Finally, Automattic released a solution under the brand name, Jetpack.

Jetpack includes:

  • Subscriptions – Let users subscribe via email.
  • Image & RSS Links Widgets – Add them to your sidebars.
  • Gravatar Hovercards – Enhance your Gravatars by allowing users to hover over a Gravatar to see more information about that user.
  • WordPress.com Stats – The good old stats program you are used to from WordPress.com.
  • Twitter Widget – Tweet Tweet
  • Shortcodes – Add embeddable content, like video players, to your posts with easy shortcodes.
  • Shortlinks – Utilize the WP.me link shortener.
  • Sharedaddy – Add social media sharing buttons to your posts.
  • After the Deadline – Hands down the best spelling and grammar checker for WordPress.
  • Vaultpress – A premium (paid) service for backing up your entire blog.
  • Beautiful Math – Allows you to add geeky math equations in posts.
  • Enhance Distribution – Ping your content out to all the search engines and content aggregators.

There is a pretty significant benefit of automatic updates.  The group of plugins will automatically update as new features and bugs are fixed.  Jetpack also claims that new features will automatically be included as well.

I’m also glad to see that Automattic is starting to take advantage of their name…and making things Automatic.

The First Steps in Turning Your Hobby Blog into a Business

Inevitably, most hobby or amateur bloggers wake up one day and realize that they could turn their hobby blog into a business.  Yeah, you might not be able to quit your day job, but you might be able to earn yourself enough money to take a vacation or by yourself a new iPad.

Mr. Hobby blogger does some quick Google research and realizes all they have to do is throw some Adsense code on their blog template, and the checks will start rolling in!

Fail.

Do not pass go.  Do not collect new iPad.

What the heck happened?  Mr. Hobby blogger actually has a pretty sizable following for his site all about Legos.  Sure, it is a hyper specific niche, but there’s an audience for this stuff.  He has even received invitations to attend major toy conventions.

Mr. Hobby blogger has actually talked to marketing folks from the Lego Group Inc. about his site, yet they do not seem interested in sponsoring his website. What’s the problem here?

No one is taking you seriously because your site does not look like a serious business.

Yes, we’re talking about kids toys here so of course it does not have to look like the Dow Jones homepage.  But here is what’s making you look amateur:

  • Your website URL is:  http://legofreak.blogspot.com.
  • Your email address is:  [email protected]
  • Your “About” page talks about where you grew up and has a picture of your dog on it.
  • Your blog template is the same template used by 2.4 million other bloggers.
  • You are secretly obsessed with funny animated gif files.
  • You steal photos from other websites.  You loooove Google image search.
  • Privacy policy?  What’s a privacy policy?
  • You don’t have or use a web analytics program.

There are probably a few more issues, but these are the most common.

You’re content is probably some of the best Lego related content on the Internet.  Unfortunately, it is hard for legitimate advertisers to take your site seriously.

You get an A+ for content, and a D+ for execution.

Here is your homework assignment:

Run out and register a Lego related domain name.  Maybe don’t use the word Lego in the domain since it is a registered trademark, but pick something in the “building block” arena.

Once you’ve got that domain name locked down, set up a real email address.  [email protected] would be lovely.

Write out a better About page.  Talk about the site and the type of content you hope to deliver to your audience.  If you happen to know some data about your readers, here’s your chance to highlight it.  Think of this as a soft sell for why an advertiser might be interested in doing business with you.

Move your blog to a self hosted system such as WordPress.org.  There’s plenty of cheap (like $6 per month) hosting out there.  Sign yourself up, and get WordPress installed.  It is not hard and you can get it all done in under an hour.

Pick a better template that fits your blog’s theme.  If you are really committed to this, hire someone to build a custom template for you.  You should be able to get this done for a less than a couple hundred bucks for something basic, but classy.

Stop stealing photos.  Yes, it is easy to do a Google image search and rip pics from someone else.  Unfortunately, that’s kind of illegal.  However, hope is not lost!  Solicit photos from your readers.  I’m sure there are Lego fans out there that would love to share their creations with you.

If you find pictures on another site, ask the owner if you can use them.  Often times, they’d be happy to let you use a photo in exchange for a link back to their site from the post.

Google what a “Privacy Policy” is.  There are stock templates out there.  Get your hands on one and get it up on your site.  Many ad networks and direct advertisers require that you have a privacy policy on your site.  Plus, it make it look like you know what you are doing with this whole “business” thing.

If you haven’t already, sign up for Google Analytics.  Run, don’t walk.  Sign up right away and start measuring your traffic.  Your advertisers are going to want to know how much traffic your site gets.  This is how you will know.

Get out there and make us proud.

Still haven’t gone local yet?

About a year ago, I wrote a post about Attacking Local on your Blog.  Looking back over the last year, how true has it become?

A year ago, most people had never heard of mega online brands like Groupon.  And forget about Gilt, Living Social, Buy with Me, etc.  Now, they’re everywhere.

Even the “old school” media like CBS is cashing in (sort of).

The trend is only going to continue.  Now is the time to get on board if you haven’t already.  There’s still plenty of time and space for amazing local content sites to stake major audience claims.

As more and more consumers head to the web for even their most hyper local needs, the SEO value of localized content continues to grow exponentially.

What are you waiting for?

WordPress Backups: What’s your disaster plan?

What is your backup plan for your WordPress site? You do have one, right?

Anyone that has experienced a personal computer crashing or a web server disaster will tell you the same thing…they wish they had been better about backing up their files.

I don’t care how often you think you will end up backing your systems up, it is never enough if you are doing it manually. Take it from someone who has gone down that road before.

I used to tell myself that I would be regular about backing up both my Mac and my websites. Hoe hard could it be? All that has to be done is setting aside a fee minutes on a regular basis to save some files to secondary storage. Not hard at all. It always seems to work for the a first few days or weeks too. [Read more...]

Attack “Local” for your Blog

Being as “Local” as you can with your blogging will yield big dividends.  By local, I mean incorporating as much geo-specific content as possible.

First of all, you can see that the local game is hot right now.  Sites like Yelp are cashing in on these opportunities.  Even Google has continued to drive their local search focus.  Local is starting to spread across multiple products within Google, including:

  • Local Search
  • Google Maps
  • Google Directory
  • Adsense
  • Adwords
  • Google Voice
  • Goog411

All of these products rely on the thirst for local content and information.  Sites like Yelp are cashing in on the local directory and review market where users generate local content about everything from restaurants to dry cleaners.

How to cash in on “local” with your blog?

Try to incorporate a local element with every post you write.  It does not have to be local to you, but local to the post.

For example, right now I am posting about the importance of localizing content.  For this post, a great example of what I am talking about would be a blog called Hoboken411.  This site is all about the city of Hoboken, NJ, right outside New York City.  By mentioning how great this local site is and talking about their content in a local sense, I will increase my odds of someone finding this post when Hoboken is typed into the search query.

Ok, maybe not the best example.  Here’s a few more.

Running blog. When you review that new pair of Nike running shoes for your blog, you should consider talking about the stores, cities, addresses, and websites of the stores that are going to get the first shipments of these hot shoes.  (A great example)

Reality TV blog. When you’re giving the play by play review of last night’s episode of The Apprentice, you should try to find out the name and address of the diner that the episode was shot.  Or the corner that they setup their street cart.  Or really any major landmark/scene from the episode.  There will be a lot of people out there that want to find out the name of the place.  They may be able to figure out that it was New York, but they won’t know much more than that.  If your post answers the “where” question, you will rank well for that search term.

Baseball blog. Let’s say that you write a blog about the New York Mets.  Each time the team hits the road, you could incorporate a post about the most “Mets Friendly” bar in that town to watch the game.  You’d be surprised how many displaced fans are spread all over the country looking for places to watch their favorite out-of-state teams. Here’s a good example of what I mean.  Here is where you can see Yelp cashing in on this idea.

In most cases, you should be able to come up with a local angle for your post.

For anyone looking to start a new blog, starting as a local blog is the place to go.  Most small or even mid-sized towns/cities are in desperate need for good local content.  You could dominate the niche by turning out great content focused on that local audience.

It is much easier to start local and attempt to expand than it is to start with a national focus.  There are a lot more players in the national game right now.  Local is the place to be!

Video Blogging or Video for Your Blog?

Video.

Are you tired of hearing about it yet?  Well that is unfortunate because it is not going away in our lifetime.   As the cost of video production continues to head towards zero, more and more videos are being uploaded to the web.

Why is this important for you?

If you’re business (or blog) plans to compete in this space, you need to embrace video.

So, are you going to do some video blogging or are you going to put some video on your blog.  There is a huge difference.

Video for your Blog (Meh).

What I’ve done below is put some video on my blog.  It happens to be a very cool video called, The Machine is us\ing us.  It is a 5 minute clip that sums up the coolness of the Internet.

0 Video Blogging or Video for Your Blog?

Normally, you would want this video clip to have some significance for being in your post.  In this case, I just thought it was a cool clip.

However, video is great for demonstrating your point, talking about a current event, showing and explaining a complex point, conveying humor, etc.  There’s no shortage of great video clips for you to include in your posts.

Adding video to your site will increase user engagement, and make your content even more valuable (provided you are finding great clips). [Read more...]