This blog is not actively updated. For the latest WordPress tips & tricks, please visit wpsmackdown.com.

UXDE dot Net Wordpress Themes

How to clear your browser cache and cookies

    
Category: Miscellaneous     1 Comment

In our previous blog post, “How to refresh browser, web page,” we talked about how to refresh you browser in order for users to see changes to a website.

“When we make changes to a clients’ website, they often don’t see the changes right away. This is because their browser (Internet Explorer, Firefox, Chrome, etc.) has cached web pages. When a browser caches a web page, it stores a local copy on the visitor’s computer. This speeds up the page load time so the visitor can view the information faster when they visit the page again.”

If you don’t immediately see changes made to the website, you may have to go the extra step of clearing your browser cache and cookies in addition to refreshing your web page.

Browser cache is a mechanism used in helping to speed up a website, while we browse. Browsers download page elements when we visit a site. Elements can include but are not limited to images, buttons, script files, etc. Those elements are stored in a cache folder. When we visit a site, the browser checks to see if those page elements are in it’s cache folder. If they are, then the browser does not have to download the same file element again. This speeds up web browsing.

A cookie is a small piece of software that a website may put on your computer. This allows websites to keep track of a user’s browsing session. If you’ve ever been to a website that made you log in, and then later returned to that website, you may notice that you did not have to log in again. This is because of the cookie.

 

The process of clearing your browser cache and cookies is different depending on which browser you are using. Find your browser below, and follow the instructions.

Clear Browser Cache and Cookies – Chrome (Mac)

At the top of your screen, go to “File” > “Preferences.”

Shortcut: command + ,

On the left sidebar, click “History.”

Click the “Clear browsing data…” button.

Make sure the checkboxes for “Delete cookies and other site and plug-in data” and “Empty the cache” are checked.

Click “Clear browsing data”

Screenshot of how to clear cache and cookies on Chrome on a Mac

Screenshot of how to clear cache and cookies in Chrome on a Mac

Screenshot of how to clear cache and cookies in Chrome on a Mac

Screenshot of History tab in Chrome on a Mac

Screenshot of how to clear cache and cookies in Chrome on a Mac

Screenshot of how to clear cache and cookies in Chrome on a Mac

Clear Browser Cache and Cookies - Firefox (Mac)

At the top of your screen, go to “Firefox” > “Preferences.”

Shortcut: command + ,

Click the “Privacy” tab.

Click the blue link that says “clear your recent history.”

Make sure the checkboxes for “Cookies” and “Cache” are checked.

Click “Clear Now”

Screenshot of how to clear cache and cookies in Firefox on a Mac

Screenshot of how to clear cache and cookies in Firefox on a Mac

Screenshot of privacy tab  in Firefox on a Mac

Screenshot of privacy tab in Firefox on a Mac

Screenshot of how to clear cache and cookies in Firefox on a Mac

Screenshot of how to clear cache and cookies in Firefox on a Mac

Clear Browser Cache and Cookies - Safari (Mac)

At the top of your screen, go to “Safari” > “Reset Safari…”.

Make sure the checkboxes for “Clear History” and “Remove all website data” are checked.

Click “Reset”

How to remove cache and cookies with Safari on a Mac

How to remove cache and cookies with Safari on a Mac

How to remove cache and cookies with Safari on a Mac

How to remove cache and cookies with Safari on a Mac

Clear Browser Cache and Cookies - Opera (Mac)

At the top of your screen, go to “Tools” > “Delete Private Data…”

Make sure the checkboxes for “Delete Session Cookies,” “Delete all cookies,” and “Delete entire cache” are checked.

Click “Delete”

How to remove cache and cookies with Opera on a Mac

How to remove cache and cookies with Opera on a Mac

How to remove cache and cookies with Opera on a Mac

How to remove cache and cookies with Opera on a Mac

Allow Direct Database Access on GoDaddy Shared Hosting Plans

    
Category: Security, Server     3 Comments

We have recently setup CodeGuard for one of our clients, and we’re in the process of setting up numerous sites on the CodeGuard platform. Getting the files adding for backup was as easy as providing FTP credentials. Backing up the database, however, proved to be a bit more difficult.

If you’re having trouble setting up database backups for CodeGuard on a GoDaddy shared hosting plan, it’s likely due to the following configuration option.

NOTE: This is not only true for CodeGuard backups. This is true for any third-party service that you want to access your database. It could be a backup solution, security analysis, integration with another website, etc.

However, we do not recommend using GoDaddy for hosting. If you’re looking for a great WordPress managed hosting provider, who will take care of all the backups for you, check out WP Engine.

Allow Direct Database Access on GoDaddy Shared Hosting

When creating a new database on a GoDaddy shared hosting plan (instructions here), there is an option to “Allow Direct Database Access.” It’s buried under an “Additional Options” toggle, and it’s set to NO by default.

If you do not allow direct database access, CodeGuard will not be able to backup your database.

And after talking to GoDaddy customer support, they confirmed that you cannot change this option once you’ve setup your database. It has to be configured when you first create the database.

A Solution To Fix This Problem

The following solution uses GoDaddy’s internal tools for backing up & restoring databases. You could alternatively access the old database via phpMyAdmin, export the database, create a new one, allow direct database access, and then import the .sql file you exported. If you’re comfortable with phpMyAdmin, that’s a perfectly viable solution.

Login to your GoDaddy Hosting Control Panel.

Scroll to the bottom & look for “Databases.” Click the “MySQL” icon.

Next to the database you need to allow direct access for, click the “Actions” button, and choose “Back Up.”

Allow Direct Database Access GoDaddy Shared Hosting

Click “Actions” & choose “Back Up”

Once your database backup is complete, click the “Add” button to add a new database. Give your new database a new name, but this time, make sure you select YES for “Allow Direct Access.”

Allow Direct Database Access - GoDaddy - Setup New Database

Create new database

Once the new database is setup, click the “Actions” button next to it, and choose “Restore.” You should have an option to restore the database that you just backed up. Select it.

After The Database Is Created

If you’re using a CMS, you’ll want to make sure you update your database credentials with the new database name, username & password. With GoDaddy, typically, the database name & username are the same thing.

If you’re using WordPress, open your wp-config.php file, and edit the database settings. You want to make sure your new database has been setup properly, and the restore is complete, before you do this.

Caveats

Even GoDaddy themselves state that allowing direct database access is less secure. In no way am I suggesting you allow this option. I’m simply providing a solution to what I think might be a common problem. Enabling this option is entirely at your discretion.

By no means am I promoting GoDaddy’s hosting, either. GoDaddy’s shared hosting is not the best solution out there. It’s comparatively slow, and less secure, than other, more robust options.

If you’re looking for a great WordPress managed hosting provider, who will take care of all the backups for you, check out WP Engine.

Customizing mailto: Links

    
Category: HTML/CSS     5 Comments

If you’ve ever wondered how to customize a mailto: link, getting it to include your own subject line, list of recipients, cc or bcc someone, and pre-populate a message in the email body… look no further.

First, let’s look at a standard mailto: link.

<a href="mailto:onecooldude@gmail.com">onecooldude@gmail.com</a>

Example

Nothing special there. When you click that link, it opens up the user’s default mail program, and will populate onecooldude@gmail.com in the TO field.

mailto: link with subject line

<a href="mailto:onecooldude@gmail.com?subject=Hey+Dude.+You're+Cool.">onecooldude@gmail.com</a>

Example

This would send an email to onecooldude@gmail.com with the subject line of “Hey Dude. You’re Cool.”

mailto: link CC & BCC fields

NOTE: As soon as you add a 2nd parameter (“subject” was our first parameter, now we’re adding “cc” and “bcc”), you need to separate all your parameters with an ampersand (&). You begin your parameters, after the mailto:onecooldude@gmail.com, with a question mark (?), but use ampersands (&) to separate parameters after that.

Adding CC & BCC fields is as simple as adding a subject. For multiple emails, separate each email with a comma.

<a href="mailto:onecooldude@gmail.com?subject=Hey+Dude.+You're+Cool.&cc=anotherdude@gmail.com&bcc=invisibledude@gmail.com">onecooldude@gmail.com</a>

Example

Adding multiple emails for these fields would look like this:

<a href="mailto:onecooldude@gmail.com?subject=Hey+Dude.+You're+Cool.&cc=anotherdude@gmail.com,thirddude@gmail.com,fourthdude@gmail.com&bcc=invisibledude@gmail.com,ghost@gmail.com">onecooldude@gmail.com</a>

Example

mailto: link body content

Now for the really cool part: Adding a message in the email body. Again, it’s just as easy as before, but be careful of your character encodings. We are using the body parameter. Here’s an example of a mailto: link with subject, body, cc & bcc fields.

<a href="mailto:onecooldude@gmail.com?subject=Hey+Dude.+You're+Cool.&cc=anotherdude@gmail.com&bcc=invisibledude@gmail.com&body=Your+awesome+message+goes+here.%0D%0A%0D%0AThis+is+on+a+new+line.+Go+to+http%3A%2F%2Fwww.google.com%2F.">onecooldude@gmail.com</a>

Example

Blank TO field. Let the user enter the email address.

If you want to let the user type in the TO, CC or BCC fields, you can leave the mailto: blank, like this:

<a href="mailto:?subject=whatever&body=whatever">Email Someone</a>

Example

Character Encoding

Make sure you encode all special characters. Common character encodings are below, or you can use Eric Meyer’s URL encoder tool. If you would rather learn what all the character encodings are, you can use this resource.

Common character encodings

  • space = %20 or + (either one works)
  • line break / carriage return = %0D%0A
  • question mark = %3F
  • / (forward slash) = %2F
  • : (colon) = %3A

You do not need to encode commas (,) or periods (.).

Facebook Debug Tool for Open Graph Meta Tags

    
Category: Social Media     Add your comment »

I just came across a tool from Facebook that helps you debug your Open Graph data.

The Facebook Debugger tool provides valuable insight into exactly how Facebook sees your webpage.

  • Fix warnings about improper usage of Open Graph <meta> tags
  • View all thumbnail images Facebook sees for that page
  • View all Open Graph tags, including: og:url, og:type, og:title, og:description and more
  • See exactly what Facebook’s scraper sees for your URL

When sharing a link on Facebook… if you’re having trouble with the thumbnail images being displayed, the page title or description, give this debug tool a shot. It might lead you to correct the issue.

Facebook Debug Tool for Open Graph Data

Results on Facebook’s debug tool for this blog.

You might want to check out how to add multiple thumbnail images when sharing a Facebook post.

Add Multiple Images to Facebook Share Link

    
Category: Social Media     2 Comments

You might be wondering how Facebook choses which thumbnail images to show when someone shares a link on Facebook. It might seem random, but there is a way for you to control which images Facebook uses.

Facebook’s Open Graph allows you to add <meta> tags to the <head> section of your site. One of these <meta> tags is the og:image tag. It will look something like this:

<meta property='og:image' content='http://www.domain.com/path/to/image.jpg' />

It is possible to add multiple og:image tags to a page. For each og:image tag you add, Facebook will add that image to the list of available thumbnails to use each time the page is shared.

Facebook Share Multiple Images (og:image tags)

29 og:image tags gives us multiple thumbnails to choose from in the Facebook share post box.

og:image Tag on WordPress Sites

If you’re using WordPress, there’s a great SEO plugin that will add 1 og:image tag per page to your WordPress posts & pages. It’s a great place to start, but it won’t fix your problem of multiple images for a Facebook share.

You can open up your header.php file, and write a custom function that pulls all the images attached to that post/page, and inserts them all into their own og:image <meta> tag.

However, sometimes Facebook can scrape your site & find many of your images on its own. It just depends on how much control you want.

Why WordPress?

    
Category: WordPress     Add your comment »

Before I dive into all the great things about WordPress, why you should build your site with it (or switch if you’re on one of the other platforms)… let’s start with a few stats:

Now that that’s out of the way…

Passionate, Educated, Forward-Thinking Leadership

Matt Mullenweg is the founding developer of WordPress. Check out his page to learn more, but the guy’s won every online/tech/influencer award in the book. And above all else—his passion for WordPress is undeniable.

The WordPress core developers work from all over the world. This is more than just an incredible collaboration. It means that you’re using a truly global product. International developers ensure that all perspectives & opinions are represented. And when you have the entire world to pick from, you end up with the best-of-the-best.

Here’s a mind-blowing stat: 137 employees managing 131 million unique visitors a month. If that’s not impressive enough, read up on how they work. And now try to tell me you don’t want to work with these guys.

WordPress Employee Stats

Now that’s efficiency at it’s finest.

Content First

WordPress started out as a blogging platform. Many people who don’t believe WordPress is a true CMS will use this as an argument in their favor. But if you think about where the web is headed, I think the fact that WordPress started as a blogging platform is a huge reason why it’s the best CMS out there.

When you start a blog, what’s arguably the most important component? Content. Above all else, if your content sucks, no one cares about design or functionality.

Today, when you build a website, where do you start? With content. Content should drive all the design & functionality decisions you make. Content drives the different layouts you have for each page; for each device.

WordPress was built around the idea that content is most important. It might not be able to do all the things that other CMSs can do out-of-the-box, but most sites don’t need that. But the plugins, functions & awesome devs out there can make it do just about anything, if need be.

Oh, and what does CMS stand for? Content Management System. That’s interesting…

Awesome, Helpful Community

The amount of free support you can receive for WordPress is staggering. Highly skilled developers tackle intricate problems inthe forums. Bloggers post advanced tutorials on everything from new user registration to SEO to working with video. People have centered their entire business around WordPress. Without it, some developers wouldn’t have a job. Some companies wouldn’t even exist.

There are WordCamps popping up all over the country. And they’ve been around for years.

You won’t find a more active & helpful community than the WordPress community.

Bloggers & WP Experts

There is no shortage of WordPress tutorials, blogs & code snippets. And more are popping up every day. Many of these are edited by WordPress experts. And it’s truly amazing the valuable info they offer up for free (well, they make a few bucks on ads, but still).

Free Plugins

One of the strongest aspects of the WordPress community is the plugin developers. I’m constantly amazed, and very grateful, for all the free plugins that these developers spend hours building, testing & updating. Other CMSs have free plugins & add-ons, but not nearly the amount that WordPress has. And many times, with other CMSs, you have to pay for the good ones. Many of WordPress’ most powerful & useful plugins are completely free.

There are tons of great ones out there, but here’s a short list to get you started: WordPress SEO, Google Analytics for WordPress, MCE Table Buttons, Jetpack, Advanced Custom Fields, WordPress HTTPS, Google XML Sitemaps.

Professional, Responsive Themes

WordPress has more professional, well-constructed, responsive themes than any CMS out there. Not all WordPress themes are great, but there are tons of beautiful ones if you know where to look. This very site runs off a free responsive theme from uxde.net (thanks guys).

You’ve got:

Core Trac Development

WordPress has a very active community of developers who contribute to the core. You can find it at core.trac.wordpress.org. Developers and users alike submit tickets to the trac system. WordPress core developers then respond, sift through, consolidate & prioritize these tickets.

The community often submits code that fixes bugs and/or enhances functionality. It’s a true team effort. And the transparency of it all is quite admirable, if you ask me.

Support Forums

You might argue that a forum like ExpressionEngine is better because it’s moderated by people who work for ExpressionEngine—while WordPress’ forum is 99% run by people like you & me.

To put it bluntly, it doesn’t matter who gives you the right answer, as long as you get your answer. Now, you do have to be careful who you take advice from in the forums. It’s not all great advice. Some of it is downright awful. But with more & more people learning WordPress every day, the good will outweigh the bad.

I’ve had great success on the WordPress support forums. And if you don’t find your answer there, it’s probably on WordPress stackexchange.

Simple Installation & Upgrades

The famous 5-minute installation actually takes less than 5 minutes. And the upgrades happen with one click of a button.

You should be careful when upgrading, especially if you don’t know much about how your theme was built, or what type of server/database your site is hosted on. But if you are knowledgable about those things, and only run with quality code & professionally-built plugins, 99% of the time, you’re just one click away from the latest version.

Mobile Apps

WordPress has created, and actively updates, WordPress mobile apps for iOS, Android, BlackBerry & Windows Phone. Since I don’t use many other CMSs, I’ll let you tell me in the comments if there is any other CMS out there that supports all those platforms, with the same quality apps as WordPress.

Uses PHP, not Proprietary Tags

Some CMSs—sorry ExpressionEngine, but I’m going to pick on you for a minute—use their own proprietary tags with curly braces {}, vertical lines and asterisks |* *|, etc. WordPress uses standard PHP tags. Sure, it has a bunch of WordPress-specific functions, but anyone can create, modify and/or remove those. It’s all right there in the code… hosted on your server, just a few clicks away.

I believe using standard PHP tags lowers the barrier of entry. I was able to learn WordPress faster than any other CMS I’ve experimented with because it uses a language that is ubiquitous in the web community.

WordPress vs. Drupal vs. Joomla

I’m not going into a detailed comparison of CMSs. For one, I haven’t used much of Joomla & Drupal, so I’m not going to pretend to be an expert. And several others have written great articles on the pros & cons of each.

Comparison Articles

Conclusion

I plan to add more to this list when I get more time to pull together convincing reasons. I know there are more out there, and I’ll never get tired of lobbying for the greatest CMS in the world.

WordPress: Display all images attached to a post/page

    
Category: WordPress     31 Comments

NOTE: Nov 20, 2013 – This post has been updated to include more examples from the comment thread. View the updated post here »

You’ve probably struggled with the default output of the WordPress gallery shortcode. It’s OK. We all have. By default, WordPress wraps the entire gallery in a div, and then further wraps the images in dl & dt tags.

There are a few, excellent WordPress image gallery plugins that address gallery shortcode styling (File Gallery Plugin), as well as the invalid XHTML code (Cleaner Gallery Plugin). These plugins work great for many things, but they also add a lot more functionality.

If all you want to display is a simple list of all the image attachments that are attached to a particular page/post, and you just want the img tags, there’s a much easier way to do it.

Display WordPress attachments (images) with img tags only

Place the following code inside the loop on a single page or post template.

<?php
	$images =& get_children( array (
		'post_parent' => $post->ID,
		'post_type' => 'attachment',
		'post_mime_type' => 'image'
	));

	if ( empty($images) ) {
		// no attachments here
	} else {
		foreach ( $images as $attachment_id => $attachment ) {
			echo wp_get_attachment_image( $attachment_id, 'thumbnail' );
		}
	}
?>

get_children explained

You can adjust the variables in the get_children array.

If you want to get images from a specific page/post, you’d set post_parent to the ID of that page/post. Using $post->ID returns the images from whatever page/post you are on.

If you just used 'post_type' => 'attachment', then PDFs, audio files, and any other type of attachment would also be listed. Using 'post_mime_type' => 'image' will only return image attachments. You could similarly get video attachments by using 'post_mime_type' => 'video'.

There are a few other parameters you could pass to the get_children array, to further customize the display of attachments. View all the get_children options in the WordPress codex »

Image Size

The size of the image is easily controlled in the last line of code:

echo wp_get_attachment_image( $attachment_id, 'thumbnail' );

Just change thumbnail to medium, large, or any custom image size you have created in your functions.php file. (how to create custom image sizes)

Display Images As Links to Fullsize Image

As mentioned by Jason in the comments, you might want to display all images attached to your WordPress page/post as a list of links, with the link opening up the fullsize image. In the echo statement above, just replace wp_get_attachment_image with wp_get_attachment_link. (WordPress codex for wp_get_attachment_link)

Working with Transparent Images – .PNG vs .GIF

    
Category: Design     Add your comment »

This post discusses the use of transparent images on the web. The 3 most common image file types — .png, .gif, .jpg — have their pros and cons. But some are definitely more effective for achieving transparency with cross-browser support.

Thanks to Jeffrey Zeldman for teaching me some of the following techniques in his book, Designing with Web Standards. You should buy it. It’s fantastic.

Never use .jpg

For most of us, it’s obvious, but for the sake of being thorough, .jpgs do not support transparency. They will fill your transparent area with a white background.

JPG images are best used with photographs that contain millions of colors. JPGs also get compressed each time they are saved. And with each compression usually comes a loss in quality. For most lines, shapes & gradients containing a limited number of colors (essentially, everything except photographs), JPGs get saved at a larger file size than both .pngs & .gifs.

To check the file size of your image before saving it, Photoshop has a helpful tool.

  • Go to “File” > “Save for web & devices”
  • Click the tab in the top-left corner that says “4-up”
  • Now you can select each of the 4 boxes individually, and change your file type on the right
  • In the bottom-left corner of each box, the file type & file size is displayed
  • Compare file sizes & evaluate the visual end result. Then choose the appropriate file type.
Photoshop Save for Web 4up View

Photoshop “Save for web” using 4-up

 

.png is best for transparent images

PNGs are the way to go. In all modern browsers (Firefox, Safari, Chrome, Opera, IE7 & IE8), .pngs share excellent support. The transparency of the image is retained, and the desired look is achieved. PNGs also come with a smaller file size.

IE6 does not support transparent .pngs

If a user views your transparent .png using IE6, they will see a blueish/gray fill where the transparency is supposed to be. There are a few ways around this.

Microsoft’s proprietary css filter, AlphaImageLoader

Basically, you apply a css rule to the element that you want the transparent .png background image to show up for.

#content div { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="imagename.png", sizingMethod="image"); }

Official link from Microsoft about AlphaImageLoader »

The problems with using this method:

  • It is invalid css
  • It bulks up your code
  • You have to apply it to each element you want IE6 to support .png transparency for
  • Since we set background: none;, other background properties like background-position and background-repeat no longer work

JavaScript library, DD_belatedPNG

This JavaScript library converts the .png images into VML objects, displays them correctly in IE6, and allows for all background css properties to be used. It’s setup is a little more involved than the AlphaImageLoader, but much more efficient. To learn how to implement this method, please reference the DD_belatedPNG site.

Using .gifs with a matte color

Another alternative is to use the .gif file format to serve up your transparent images in IE6. (This can be accomplished thanks to conditional comments.) However, the Photoshop default for saving a .gif with transparency will create an image with a jagged edge.

In most cases, we can improve the look of transparent .gifs in IE6 by saving them with a matte color. The following image contains a screenshot of a transparent image saved in different file formats, with different matte colors. I used both a white background and a multi-color background to provide two real world examples.

.PNG vs .GIF w/ matte color

Showing all the different ways to save out .PNGs & .GIFs on colored background vs. white background

When you use a matte color that is exactly the same, or very close to, the color of the background behind the image, the image looks crisp, and the jagged edges are gone.

How to save a .gif with matte color in Photoshop

  • Go to “File” > “Save for web & devices…”
    Photoshop Save for Web as .GIF image
  • Choose “GIF” from the dropdown menu
  • Click the “Matte:” dropdown, and select a color
    Photoshop Save for Web with matte color
  • Then click “Save”