That said however, simply building that page from an aesthetic point of view doesn’t solve the underlying problem – someone landed on a bad link on your site. Somewhere out on the interwebs, there’s a link pointing to a non-existent page on your site.

Today we’re going to show you how to make a useful 404 page. Useful to both the user landing on that page, and to you – the site owner.

Here’s our final product:

Nothing exceptionally fancy – just a few loops to take people to other places in your site. The real magic however, happens in the background. When this page is triggered, an email is sent to the owner of the site with the details of the visit. It highlights the referring URL (ie what site is pointing to this bad link) as well as a legible dump of the $_SERVER value that’ll give you some extra information about the user that visited this page.

Let’s get to it. Firstly, lets skim over the 3 loops that we use:

The first loop gets our last 5 posts from the blog. The second loop fetches 5 of our categories. The last block shows our menu navigation as set in our WP Admin.

Let’s make it pretty:

And that’s pretty much that. What the user sees when he lands on this page is now sorted. You of course might want to tap your funny bone for something humorous to add in here – the sky’s the limit really. But from a functional point of view, the user has some options when he lands on a bad link.

Now let’s get to the email that gets sent.

Firstly, we set the referring URL into a variable along with a fallback in case there is no referring URL present.

Next, we set another variable that’s filled with a readable version of the $_SERVER dump

We want to be able to send this email with some HTML elements, so lets turn on HTML formatting. Note: We’re using the wp_mail() function to do the sending of this mail, so we use a WordPress filter to turn this on.

Now we want to start editing the settings of our actual email. We start with the to and from information…

… and the headers …

… and then the subject …

Right! The second last step is set what the email actually says

You can of course tailor this however you want it, but basically this gives us all the information we captured about the triggering of this 404 page.

Lastly, we do the obvious: send it.

Note: All this code is placed directly into your 404.php template.

Done! Not too difficult hey?

Let us know if you’ve implemented this and how you improved it to provide a heplful 404 page.

First up: The complimentary combination.

This is a kind of opposites attract idea. They can, when used carefully bring out good qualities in each other. Don’t use these if their purpose is primarily to display text.

Triadic scheme:

Using three colours which are evenly spaced in a triangle. Again, this is one to use with caution as the combination tends to be very vibrant and intense, even when you use these at low saturation. As with most colour combinations – especially when using 3 colours or more, it’s usually best to use one as a primary colour and the others as secondary or accents.

Split Complimentary:

Slightly easier to pull off than the triadic scheme, still selecting three colours – this is what happens when selecting the two colours that are on either side of the compliment, as opposed to the single compliment. It’s easier to pull off because the two colours that are adjacent to the compliment are more similar than those in the triadic, meaning there is less visual conflict with those two colours. It’s still a vibrant combination though, and often best used when the colours closer to each other taking precedence, and the more contrasting colour – the accent.

So there you go, some slightly more advanced colour combinations. In order to pull these off successfully, you have to give a great deal of thought into your selection, as well as the weight you give each colour. Have fun and good luck!

The world of WordPress is always buzzing and vibing with new and exciting news. Here’s a selection of the hottest topics that the frogs around this pond have been reading, in the week that passed.

• Embed Angry Birds into your Facebook Timeline, blogs.
  You can play Angry Birds on Facebook, but up until now, what the game on Facbeook lacked was the ability for your friends to compete with you on a very basic level. Rovio Mobile announced in a blog post that if you are particularly proud of a score…
• WordPress 3.3.2 is out.
  WordPress 3.3.2 is an update that all WordPress managers should install. It fixes a multitude of security vulnerabilities both in the main software and in external libraries for the blogging tool…
• WPEngine: New Feature. Download a ZIP of Every Restore Point.
  Remember a couple of months back when we released the Checkpoint and Restore and started backing up your sites once a day? Remember how we made it easy for anyone to make a full backup of their site, files and database? Ok, good! So, based on customer requests around Checkpoint and Restore, we’ve added another feature to the tool!
• 1,000+ WordPress sites compromised through automatic update feature.
  More than 1,000 WordPress blogs have been modified to redirect visitors to sites serving malware, affiliate and pay-per-click redirectors, and low quality PPC search result aggregators, through the WordPress’ automatic update feature.
• Find Friends Who Use WordPress.
  Are you curious to see how your friends are using WordPress? Give the new and improved Friend Finder a try to connect with your Twitter, Facebook, and Google contacts who have WordPress sites!

If you’d like (and we really WOULD like you to), leave a comment, or hit us up on Twitter! And, of course, if you have a hot link or story to share with the team and the eFrog community, drop me an email at george@efrogthemes.com!

Till next time, be safe. Backup!
*froggy-foot-wave*

Enter: Google Webmaster Tools

Google Webmaster Tools is a free service run by Google that provides you with data, tools and diagnostics to assist you in creating a Google-friendly website.

Here is a quick video introduction:

Let’s look at getting your website setup on Google Webmaster Tools:

First things first, you’re going to need a Google account so let’s explore that. Creating a Google account is best done by signing up for a Google Email account, this account will then give you access to all the Google tools, which includes Google Analytics. To get stared, please click here, and then click on the big red button at the top right of the screen that says, “CREATE AN ACCOUNT”. Fill out the form that appears on the right with all your information and Google will guide you through the process, which shouldn’t take more than a couple of minutes, depending on how quickly you type of course.

At this point you’ll have a new email address, something like yourname@gmail.com

Click through to http://www.google.com/webmasters/ and look for the blue “Sign in to Webmaster Tools” button and click it. In some cases you’ll be asked to sign in, if you are, use the email address and password you created in the Getting Started section above.

Once you’re logged in, you’ll be looking at the Dashboard, this is where you control all your websites.

On the Dashboard, look for the red “ADD A SITE” button towards the top right and give it a click. A popup will appear asking you to enter your website URL – Enter in your website URL, such as www.efrogthemes.com and click Continue.

The next step is to verify your website, this can be done in 4 ways:

1. Uploading an HTML file
2. Adding some meta data to your website
3. Linking your Google Analytics account
4. Adding a DNS record

All four ways will achieve the same result, but by far the easiest way is option 1 and Google recommends this process of verification too.

Once you’ve verified your account you’ll have access to all the tools, data and information that Webmaster Tools has on offer.

Google Webmaster Tools will provide you with access to these incredibly useful features, amongst others:

• Sitemap submission and information
• Google Bot crawler access
• Configuring Sitelinks
• Geographic targeting
• Crawl Rate and Error reporting
• Backlinks to your website
• Search queries
• Subscriber statistics
• Google +1 metrics
• Malware inspection
• HTML suggestions

Google Webmaster Tools is there to assist you with ensuring that your website is following best practices, following recommendations from Google is your number one way to ensuring that your website is search engine friendly and discoverable on the Internet.

Enjoy!

PS. Don’t forget to read our guide to setting up Google Analytics.

This is what we’re going to create (as seen at the end of the checkout process on eFrogThemes.com)

It’s actually a very simple process. Let’s get started:

Firstly, you’re going to want to create a Twitter application. You can do this here: https://dev.twitter.com/. Once you’ve created your app, you’ll be presented with a screen that details some key information about your application.

What you need to note down for the purposes of your Tweet Box, is just the ‘Consumer Key’.

Secondly we’re going to add the required code to 2 places in your site. Firstly, in the header you’ll want to include the Twitter Javascript library.

Enter your unique Consumer Key into the above snippet and add that before the close of your head tag.

Thirdly and lastly, wherever you want the actual Tweet Box to display, you’ll add the following:

And that’s that. Right out the box your Tweet Box will work perfectly.

Optionally, you might want to edit the styling of your Tweet Box – perhaps changing the color of the textarea, or adjusting the font and size of the heading. To do this, we’re going to add a style tag to the label. The final product would look as follows:

As the Javascript creates that Tweet Box then, the styling you’ve provided will be applied.

Hope you have fun inserting this Tweet Box into your own site. Let us know how you manage!

Time for another fun-filled episode of… The Whacky World of WordPress, with George, your favorite frog! Tada!

OK, ok, just kidding. Kind of …

So. There’s a new kid in town, and everyone’s talking about her. She’s called “Responsive Design”. And of course, all the boys are saying they know her, and what she’s all about. And, like boys ARE, y’know, they’re all opinionated, and “I know her better than you!” and stuff.

But really, who is she? What’s her angle? What’s her story? Where does she come from? Should we get to know her? Well, it’ll take a while, but it’ll be fun, so pull up a chair, and Let’s take a dive into the history of web-design a little. Maybe there are clues there…

Back in the day, websites were pretty static, both in content and layout. THIS big and THESE words. Done. They were like this, because we were just learning what was possible, and honestly? The markup language (HTML) wasn’t very “jazz-hands”, at all. It allowed you to put stuff up there on the web, but that was about all.
Sidebar: This caused a really ugly time, where, in an effort to get some movement going, folks started adding flashing things, and scrolling things. That could never end well, and didn’t.

Pretty soon, we started to get restless (and quite freaked out with the flashy/scrolly things, if we’re honest…), and wanted more from our websites. And around that time, we started seeing dynamic websites, where instead of just serving up the requested static pages with their boring staid words and pictures, the web-server would run a program, which would create the page to be served, on the fly. That meant that a web-page could give you the time, or weather…Stuff that changed, depending on when you asked for it, see?

It. Was. Awesome. And the web changed completely because of it.

ASP, JSP, PHP and other programming languages were born and flourished, and we started to get used to websites that interacted with us and gave us data back, but they were all still pretty much static, in their design layout.

Around this time, the code was getting pretty messy, and a couple of smart folks decided to separate the styling stuff, out from the content stuff. In a fit of grandiose, they called the technology Cascading Style Sheets. Web developers around the world took one look at that mouthful, and promptly shortened it to CSS. CSS took all the font, size, colour and such-like coding, and moved it into a separate *.css file, which the HTML page linked to. At the same time, and as a huge bonus, CSS removed the need to repeat all that stuff, for each element on the page. You simply styled the tag, and everywhere you used that tag, the styling applied. Genius.

It. Was. Also. Awesome. And once again, the web changed completely because of it.

Now, at THIS time, a very bad thing (much worse than the flashy/scrolly thing) began to creep into web design. Folks wanted that bit THERE and that bit THERE on the page, and the basic markup language just wasn’t up to it. But there was a hack. See, HTML has a table tag. You could use a table. And if you were imaginative enough, and unprincipled enough, you could even nest tables within tables, and merge cells, and on and on… And pretty soon, even Steven Hawking himself could not read your code. It was a mess.

Quick as a flash, some more smart folks saw this, and pretty much like Gandalph vs. the Balrog, they intoned “You SHALL not pass.” and they added positioning alchemy to CSS. Sorted. A virtual Tsunami of young web designers embraced this new idea, and pretty soon, it was trés uncool to use tables. Of course, you also now need a degree in middle-earth sorcery to understand why that do-hickey floats, pads and visibles where it does, but still, it’s all good. We don’t use tables anymore.

Phew. We. Dodged. That. Bullet. And once again, the web changed completely because of it.

For a while all was quiet. The only sound was that of industrious designers and devs, crafting gorgeous sites…But, the wheel turns, and just as we were getting comfortable with our design-centered, gorgeous, dynamic, semantic web, something earth-shattering happened. Again.

Mobile.
Millions of teeny-tiny little computers, disguised as cellphones.
PITIFUL bandwidth. TINY screens. HUGE effect.

Such a huge effect, in fact, that they spawned a whole .MOBI domain movement, complete with zealots folks, who actually thought we should change the way we create websites, to suit mobile devices. Little teeny-tiny websites (that just look silly when you visit them with a desktop browser). Um, no. Let’s not.

And here’s where Responsive Design arrived (to save the day). And what she said was: “Let’s create websites, that intelligently respond to the device which is visiting them, and morph themselves into a smart design, no matter what the size of the screen. That’s… responsive!”

Again, quick as a flash, the smart folks who “make” CSS added Media Queries (which ask the visiting browser how wide it is), to the list of features, and presto! Take a look, for example, at Simon Collison’s website:

Now, resize your browser window, from wide to narrow, and note how the layout responds to the width. That’s Responsive Design, and we think it’s one of the smartest ideas to ever come along! We like this new girl. We’re going to get to know her. We think you should, too

Till next time tadpoles!

First things first though. The colour wheel:

...pretty...don't be afraid...

I know the word “analogous” and “monochromatic” seem like a bit of a pretentious mouthful, but really they are probably the easiest and safest ways to match colours and create a harmonious palette – whether its for your new WordPress theme customization, website design, or when you are picking clothes to wear in the morning.

Analogous colours
This is simply means picking three colours that are alongside one another in a 12 part colour wheel. So if we use the colour wheel example below, these would be analogous colours:

The image above uses hues of a similar brightness. While this is strictly accurate, you might get a more dynamic palette by altering the darkness/lightness of one or two of the colours.

It’s important to note, that analogous colours work best when one of the colours are dominant. Slitting the palette into thirds won’t work well. It would be better to have one colour dominant, another secondary, and another as an accent. Although this depends on the design – play around.

Example:

Monochromatic colours
Perhaps even simpler than the analogous method, these are uses a single colour as a base, and any other colours that are introduced are just various shades of that same colour.

Example:

To practice and play around with these colour ideas, here are some online tools that might serve as some inspiration:
Colorspire Wheel
Color Scheme Designer

Google Analytics Dashboard is a WordPress plugin that places your Google Analytics right in your Dashboard, saving you time from having to log into your Google Analytics account constantly. Another great feature for those who are interested in showing off their statistics or landing new advertisers, is the ability to allow logged in users to see your statistics.

As with most of the plugins we blog about, installation is really easy:

1. Upload the plugin to /wp-content/plugins/
2. Activate the plugin as per usual
3. Click to the new Google Analytics Dashboard page
4. Log into your Analytics account
5. Select the profile you wish to see.

It’s as easy as that!

The plugin also shows you statistics for each blog post you write, now that’s useful!

Statistics for every blog post

If you’re interested, click here and the plugin will start downloading automatically.

PS. Have you seen our latest eFrog Plugin? Take a look at WP Live Stream!

Yes!!
That’s it…
We’ll have an Easter-themed WordPress theme, and we’ll give it away for FREE! On Easter.
And so we have. Grown and styled by loving froggy-hands (no furries!) , we give you…

The eFrog Easter WordPress theme. Free. Happy Easter

See how pretty!

Did we mention? IT’S FREE! Click the big button. Get yours.

Happy Easter, tadpoles…

Menu Items

There’s a lot of admin menu items that, once your site is setup and complete, you don’t need access to anymore. So here’s a simple function to strip out unwanted WordPress admin menu items.

That changes this:

to this:

The remove_menu_page() function does the obvious, and accepts 1 parameter – the PHP file name of the page you want to exclude from the menu. The remove_submenu_page() function however, accepts and requires 2 parameters – the parent menu item and the sub menu item that you want to exclude.

Custom Admin Columns

Many blogs utilize featured images in their layout. However in the admin, there’s no built-in method of viewing the featured image for each post. However grabbing onto a WordPress hook, we can inject a new column into the default WordPress post view:

The above code gives you this:

In the first function new_admin_columns(), we create the new column entitled “Feat Img”. The second function new_admin_columns_content() lets us specify what is displayed in that new content. In this case, we set the $thumbnail variable to be the featured image for the post, and then we display this thumbnail if one has been specified.

Customize your admin login logo

If you’re customizing a WordPress site for your client, it’d be a nice touch to add their logo to the login page. In other words, to change this:

to this:

Here’s how you do it:

Custom Footer Texts

Finally, WordPress was kind enough to give us a hook to customize the default text visible in the bottom left of the admin. By default, the text will read: “Thank you for creating with WordPress”. It’s quick and easy to change this however:

Do you use any of these tweaks? Do you have any you can share with us?