We love WordPress but without a doubt there are some bits and pieces of it that just cause us to throw up our hands in vain and want pound our keyboards into oblivion when tweak after tweak, revision after revision fails to change the one little thing we’ve been trying to do FOREVER. Below we’ve included three of things we’ve found most annoying when learning WordPress and so our client can avoid some of the bumps and bruises when trying to modify their website to make it look a little better.
Removing the Info Box on Google Map Embeds
Google Maps is great and doesn’t steer you down one way roads the wrong way (unlike that dangerous/semi-suicidal Apple Maps!). The issue arises that when you insert or embed a Google Map on your WordPress site either via HTML or sometimes plugin, the little info box over the pin that you’re trying to point your visitors to doesn’t go away. Sometimes you may want to keep it if it displays appropriate and useful information, but for appearance’s sake it’s often better to hide the box and let users click on the pin to see the address details. So what’s going on and how do we change this?
Around February 2011 Google has removed the iwloc part of the URL in most Map embed cases. To remove the pin, you can now add &iwloc=near to the end of the iframe src attribute. So what this means is instead of text box appearing over the map, you get a nice clean image that a visitor can play with and click the pin for more info as opposed to distorting the imagery and detracting from the flow of the page.
Adding a Google Web Font
Font is one of those picky elements designer could discuss literally forever. The thing is, editing and tweaking the font from what’s built into WordPress isn’t always the easiest. Modern themes have a decent array of Google Fonts to choose from, some are updated regularly, but if you don’t have that option, how do you add your style to the site without resorting to the outdated and now semantically incorrect HTML method? (we sometimes still do this…)
What you want to do is hop over to the editor function from Appearance > Editor. From here look for the header area, often header.php where you can embed a code that looks something like this:
<link href=”’http://fonts.googleapis.com/css?family=Open+Sans’” rel=”’stylesheet’” type=”’text/css’” />
What this piece does is enter the Open Sans font as an API (application programming interface) call from Google. It’s a good idea to add a backup font like Arial following the Google font in case something goes wonky.
font-family: ‘Open Sans’, Arial;
Adding this in your style sheet (style.css usually) will prevent problems moving forward and ensure that your site always is displaying some legible to viewers.
So now that you have these two tidbits of knowledge it’s time to start adding a little extra customization to your WordPress site. Tweak and edit to make it fit the image in your head!