/*------LinkedIn Pixel Code------/

    Site Search:
    Generic selectors
    Exact matches only
    Search in title
    Search in content
    Search in posts
    Search in pages
    Filter by Categories
    Designer's Roundtable
    Featured Clients
    Google AdWords
    Graphic Design
    Image Ads
    Job openings
    Mobile Marketing
    Reputation Management
    Responsive Web Design
    Security Engineering Services
    Social Media
    WordPress About
    WordPress Themes

  • bob@smsrd.com
  • 800-272-0887


  • 0


Tags : 

How to move a WordPress site from one host to another keeping same domain name

Recently, I had to undertake the very intimidating task of moving all of our WordPress websites from our old hosting company to the new one. The first time I attempted this a few months ago I lost a site in the massive abyss also known as the internet. I had searched all over the internet for a comprehensive list of the steps required to move a site successfully. After combining steps from a few different articles and troubleshooting on my own (with the assistance of my hosting company) I came up with a comprehensive checklist of my own. Here is the short and long version. I use the short version now that I’ve done this about 7 times, but for those that need more detail, I’ve got one for you too.

Short Version:

  1. Purchase hosting
  2. Backup copy of WordPress database and WordPress content
  3. Create new database, database user, database password, connect, and set user privileges/permissions
  4. Upload backup WordPress content and Import backup of WordPress database
  5. Change wp-config.php file to new database information previously created in Step 3 (Database Host is most likely “localhost” but check with your hosting company)
  6. In cPanel, change PHP Configuration to “PHP 5” – this is the version WordPress uses
  7. Redirect DNS to new name servers (check with new hosting company for what their name servers are)

Long Version:

  1. Purchase hosting for your site’s domain name
  2. Make Backup Copies of Site
    1. WordPress database
      1. If you have access to phpMyAdmin for your old host then export your database in SQL format
      2. If you don’t have access, ask whoever manages your website to send you a copy of the database as a .sql file
    2. WordPress content
      1. From the WordPress Admin Panel, click “Tools” -> “Export” -> “All content” -> then “Download Export File.”
      2. In the cPanel of your new host, create a new database, database user, and database password. Connect the database user to the database name and grant the database user all permissions/privileges. If your cPanel offers a MySQL wizard, I would recommend using this because it walks you through each of these steps so you won’t forget to do one. The first time I created the new database I didn’t use the wizard and I forgot to set the permissions. It caused a minor problem later on that was fixable but required some time to troubleshoot. So save yourself some time and use the wizard.
  3. Upload Backups (made in Step 2)
    1. WordPress Database: In phpMyAdmin, click the database you just created, then click “Import” on top option menu. Find and select your .sql file and click “Go.”
    2. WordPress content: In the file manager, upload backup .xml file to “public_html” directory. This will upload a zip file to this directory. Unzip the file and copy the contents of that file back to the “public_html” directory so the path is direct.
    3. Example
      YES: /public_html/wordpress_files_here
      NO: /public_html/wordpress.zip/wordpress_files_here

  4. Update the wp-config.php file with the new Database Name, Database User, and Database Password; Database Host will most likely remain “localhost.” Save.
  5. In cPanel, click “PHP Configuration” and select “PHP 5” from the drop down menu and click “Update.” (PHP 5 is the version WordPress uses)
  6. From your domain name registrar, redirect the domain name server (DNS) to point to your new hosts’ name servers. Contact your host to find out what these are.

  • 0

WordPress Shortcodes

Tags : 

Shortcodes are shortened versions of html code that work exclusively in WordPress. They make it quick and easy to add elements to your WordPress page. Shortcodes can be broken down into these categories: Theme, Plugin, Custom, and Built-in WordPress shortcodes.

Theme Shortcodes

Some theme developers create shortcodes for the users of their theme. The best way to learn if your theme has shortcodes and what they are is to visit your theme’s website. Some themes I’ve worked with have button shortcodes that display a button style that is unique to the theme. I’ve also seen shortcode for multi-column layouts where all the text in one column is within the shortcode tag.

Example: [one_third]In between these two tags is where the content of one column goes in a 3-column layout[/one_third].

Plugin Shortcodes

As with theme shortcodes, some plugin developers create shortcodes for that specific plugin and likewise it is best to visit the plugins website to know if they exist and what they are. I’ve seen a lot of form plugins that use shortcodes because lots of things can go wrong with forms if the code is off by a minor detail. But the shortcode reduces the form to a small snippet that can be copied and pasted to the page.

Example: [form id=214] That small bit of code inserts the form and all of the forms’ settings.

Custom Shortcodes

Shortcode that you program yourself. If there is a feature you are imagining for your site but it doesn’t exist – you can create it. That’s a bit advanced though. If there is an element you want to add to your page that requires complex code you can simplify it with a shortcode to reduce the opportunity for error. For example, if there is a stylized button that will be used often within the site you can write the code within the functions.php file so that wherever you want to add the button, you just have to write simple tags like:

Example: Tell Me More

Built-In WordPress Shortcodes

WordPress has some shortcodes that work with every WordPress site. I used the built-in gallery shortcode for this site. The gallery shortcode has default options that you can change by specifying within the brackets. The options allow you to specify which images display within the gallery (ids=””), how many columns (columns=””) the gallery will display, the size of the image (size=””), and how to order the images within the gallery. There are a few other options as well.

Example:[mygallery ids="22,31" columns="2" size="thumbnail" orderby="title" link="file"]

This would display the images with ids 22 and 31, in two columns, thumbnail sized, ordered by image title, and when an image is clicked, the user is led to the image file.

Here is a link to a list of all shortcodes that work with the basic WordPress installation: http://en.support.wordpress.com/shortcodes/

  • 0

Introduction to Responsive Web Design

Tags : 

One Site – Multiple Layouts

In the past (pre surge in smartphone and tablet use), web pages were designed to accommodate a specific, or fixed display resolution like 1024 x 768 or 1366 x 768. But the recent boom in tablet and smartphone use over the past few years has changed the way designers have to think about design. Tablets and smartphones all have varying screen resolutions and sizes so a site that was created for a resolution of 1024 x 768 with a 9-inch screen is going to look a lot different on a 4-inch smartphone. A lot of horizontal and vertical scrolling, zooming in and out is needed to maneuver through the site. The initial solution to this was having an additional mobile site. The problem with that is the chore and cost of maintaining two sites.

CSS Media Queries

While some people may not mind either of these web experiences there is a much more functional solution with responsive design. Responsive design first emerged in 2010 in an article by Ethan Marcotte (I recommend checking this out – see the link below). The main idea behind responsive design is the use of CSS media queries. CSS media queries within the stylesheet call to the device being used and display the site based on the device’s width using the layout designed for that particular width.

For example, I would create three different layouts, one for each media query. There is one layout for a device with a width greater than 1200 pixels, one for a device whose width is less than 600 pixels, and another for a width less than 400 pixels. Ethan Marcotte’s article has an image of a photographer taking a team picture that displays this concept really well: at the screens largest the team members are standing side by side in one row but as the screen scales down the players are standing in two rows, then three rows with the top row of players sitting on the second row’s shoulders, until there are five rows of players some standing on other team member’s shoulders. Each variation corresponds to a different media query in CSS.

Applications of Responsive Design

This concept can be applied to more elements of a page other than images. It can be used to shift the placement of the navigation menu from the right of the logo to below the logo, it can also change the orientation of the menu to display vertically instead of horizontally. Depending on a site’s content, there are many ways to use CSS media queries to rearrange a website’s layout based on the device. This allows a site’s style to remain coherent among different devices and it offers a similar web experience among devices.

For further reading on Responsive Design see:

  • 0

Customizing WordPress Themes

Tags : 

WordPress offers a massive library of themes but there are also a lot of websites out there that use these themes. So the likeliness of using the same theme as someone else is pretty high. There are a few ways to customize your theme to set your site apart from any site that might also be using the same theme.

Changing Colors in the Style Sheet

colorful stripesColors are very easy to change, so when shopping for a theme you don’t need to base your decision on the colors used in order to match your brand. The first thing to do is access your style sheet(s) which can most likely be found in the Admin panel under “Appearance” and then “Editor” though it might also be located under your theme’s options. If you are unfamiliar with CSS that is ok, changing the colors just involves substituting the hex codes of the color that is already there for the one you want.

Scroll through your style sheet and notice how it is divided up in sections like Header, Footer, Layout, and Fonts. Find the section that corresponds to the element whose color you want to change (for example if you want to change the background color of the header, look for the h1 tag). (* In CSS, “background-color” pertains to the background of an element while “color” pertains to the color of a font) When you’ve found the element you want to change, paste in the hex code of the color you want in-between the hash tag and semi-colon (those are important so make sure you leave them). A good tool I use for picking colors and getting hex codes is Adobe Kuler. You can also use it if you see just a hex code and are unsure of what color it is.

(* If you don’t have write permissions to make changes to the style sheet, contact your hosting company.)

Using Google Fonts

Google Fonts is a free and easy way to customize your website in WordPress – there’s even a plugin for it that allows you to choose which fonts you want for specific elements. However, if you would rather not use the plugin, you can also just add the fonts you want to use with the snippets of code that Google Fonts gives you on their site. After choosing the font(s) you want and adding them to your collection, click the “Use” button in the bottom right corner. Uncheck the styles that you don’t want. Then in step #3, copy and paste the code within the head section of your “header.php” template. Then copy and paste the CSS to the corresponding selector in your style sheet.

Changing the colors and fonts used on your theme is a quick way to customize your WordPress site. While there are many other options, like adding unique graphics, widgets, or other features, these are a good start.

  • 0

WordPress Design

Tags : 

WordPress makes lots of things very easy to manage but ultimately you still need to have good design skills to make a website work. Beyond the basics of a few standard pages a well designed website needs to support the SEO, PPC, and Landing Page strategies. So most pages can be separated into classes of either Generic, SEO, or PPC.

Generic Pages

Generic Pages are the base of your website and typically include home, about, contact, services, products, and blog. In most cases this content is similar to what you would expect on a company brochure. While all these pages are critical the tough one here is the home page. As a business you only get one home page and it can only be optimized for one keyword. This page is the highest hierarchical position so its keyword target is a major decision.

Optimized Pages

SEO pages vary based on the strategy in the account but consist of those pages where the primary goal is to optimize the page for a specific targeted keyword. In most cases there is a page for every targeted keyword and these pages are linked to the generic pages most typically off the services or products page. If the SEO strategy includes a focus on location there are often optimized pages for location specific keywords. For example a Plumber in LA might have a city page that is optimized for each critical city in their service region.

Landing Pages

Landing Pages are designed for one purpose and they are NOT keyword optimized. The goal of this class of pages is to take specific paid traffic and ask for action of value for the business. In most cases this means getting an email subscription, sales lead, sales order, or some other item that the business deems of value. One mistake people make with these pages is they ask for too much and they confuse the message. The person came to your site with a specific search and the landing page is a continuation of that conversation. Do not make the mistake of trying to shift the message from the search term.

It’s about the words

Optimization has some basic rules that confuses many business owners and here are a few to think about:

  1. The more your page is about one keyword the less it is about any other keyword.
  2. You cannot optimize a page for more than one keyword.
  3. Pages serve people and search engines and what they want is very different.
  4. It takes more skill to write a short page than a long page.
  5. Long copy works for some part of the audience.
  6. Short copy works for some part of the audience.
  7. Smart designers understand the balance between #5 & #6

Rule 1 causes challenges when the business creates a list of keywords and wants their site optimized for those words.  This is why rule 2 says one page one keyword. Rule 3 causes difficulties because a page purely optimized for a search engine would be an embarrassment to the business.  Rule 3 forces the design to find a balance between the optimization rules and the quality of the web experience they are creating. Our general guidance is to design for the experience and then adjust for the optimization in ways that do not degrade the experience.  Smaller, Faster, Better is the credo of any good web experience and writing really strong good copy is one of the great challenges of any website. If you run into a web designer that tells you that they will do the design and you just need to write the copy you should immediately protect your wallet and run to the nearest exit.

Ice Cream Truck Signs

It’s Obvious What This is About

Call us to see what's next for your marketing.