Storing Hacks, Tricks and Code for Future Use

Ed Nailor

Hey there. My name is Ed Nailor, and I am the Sr. Web Developer for Creative Services, located in Charlotte, NC. We are a design service for select clients in both print and web marketing. My focus is on the development side of the website aspect of our business.

This blog will be used as my online storage of hacks, tricks and code used in my own work. I am storing stuff here for quick reference on future projects. If you can see it, you can use it with proper credit. Unless I am giving credit to someone else, it is my work, so please reference it properly if you use it. Feel free to bookmark this site if you like.

If I can be of assistance, please let me know. Also, if you happen to work in web development in and around the Charlotte area, I would love to connect to share ideas and for possible collaboration. Contact me and say hi.

I am also available for freelance work, as time permits… of course.

---

Google Maps – Remove Info Box – Keep Marker

If you have ever needed to embed a Google Map, you have probably found the big pop up tab that hovers over the marker to be a problem. When using a smaller map, this thing just takes up all the room!

So a quick tip on how to remove the information box, but keep the marker… which if you click the information bubble / box pops up!

Within the embed code, find the SRC tag. At the end of the URL within this, simply make the following change:

If you see “iwloc=addr” or “iwloc=A“, replace it with “iwloc=near“

If these are not there, simply add “&iwloc=near” just before the “&output=embed“.

Sample code that works:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?ie=UTF8&amp;q=white+house&amp;fb=1&amp;gl=us&amp;hq=white+house&amp;hnear=white+house&amp;cid=0,0,12722852879538071423&amp;ll=38.89767,-77.03655&amp;spn=0.006295,0.006295&amp;t=m&amp;vpsrc=0&amp;iwloc=A&amp;iwloc=near&amp;output=embed"></iframe>

How to Secure WordPress against Admin Brute Force Password hacks

A client of our company recent came under attack of the WordPress Admin Brute Force Password hack. Granted, this website was created before my time with the company, otherwise this attack would have never happened. However, it did and I felt it was prudent to give some easy and quick advice on how to prevent this attack on your own WordPress (or any CMS for that matter) website.

Click on the following link for more information: preventing WordPress password hacks using the Admin Brute Force Password hack.

CatholicMailingLists.com

http://www.catholicmailinglists.com/

BarZWines.com

http://BarZWines.com

TwinCityCounseling.com

Tabs and Drop Cut Areas with Photoshop

I had wanted to add a nice design element to a new design, something I call a “drop cut” area. I know it has a different name, but have no idea what people call it! Here is a quick screenshot of what I am talking about, taken from NCAA. com:

So to do this, I did a little Google search and found this very cool and easy to use tutorial:

http://www.hongkiat.com/blog/design-a-web-20-tab-with-photoshop/

This is a tutorial for creating tabs, but I was able to create this “drop cut” effect as well.

Google Analytics in WordPress Theme – Without tracking users

So you want to add Google Analytics to your WordPress theme, huh? That’s a smart idea. However, did you know that it will track everyone, including you as the website owner?

Sure there is a way to add filters to Google Analytics, which will allow you to exclude IP addresses. But that can be cumbersome to set up and if you are using someone else’s computer or surfing from a remote location, you may still end up getting tracked in your own analytics report, skewing the numbers.

So try this approach…

With the code below, we do not display the Analytics code to users that are logged in to the WordPress site. So to avoid being tracked, make sure you are logged in before visiting your website and your website will never load the code for your visit! To ensure you are logged in, never visit your website at the home page.. always visit the wp-admin page first and log in, then go to the home page. This will ensure you are logged in and not tracked.

Here is the code… remember to replace the analytics account number with your own (the one here is generic!)

<?php if(is_user_logged_in())
 { echo('<!-- Analytics not used for logged in users -->');}
else { ?>
 <!-- Begin Google Analyics Code -->
 <script type="text/javascript">
 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www. <http://www./> ");
 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' <http://google-analytics.com/ga.js'>  <http://google-analytics.com/ga.js'>  type='text/javascript'%3E%3C/script%3E"));
 </script>
 <script type="text/javascript">
 try {
 var pageTracker = _gat._getTracker("UA-12345678-0");
 pageTracker._initData();
 pageTracker._trackPageview();
 } catch(err) {}
 </script>
 <!-- end Google Analytics Code -->
<?php ; } ?>

Copyright Code Options

When adding a copyright section to your website, you can easily add the copyright symbol © with your choice of either a HTML shortcode or HTML character code.

The shortcode is ©
The character code is &#169 (add a semicolon to the end for the code to work)

Either will work in most cases. However, there are still a few browsers that may not recognize the shortcode, and while these browsers may be slightly outdated, they still exist. So when adding the copyright symbol, it may be best to use the html character code.

Embedding Fonts for Nice Typography

Credit for this nugget goes to http://randsco.com/index.php/2009/07/04/p680.

Adding an embedded font allows you to take what you as the designer wants the site to look like and makes it a reality!

For a long time, website designers have been stuck with a handful of “web safe” fonts that were found on a majority of computers. Since a web browser only makes use of the local user’s stored fonts, it was important to ensure that you were using safe fonts, ones most likely to be found on almost any computer. To ignore this could simply break a design as what you thought was only 14pixels high in that fancy font you were using in design would translate to something around 18pixels high in a web safe font. That 4 pixel difference could break some touchy designs.

Today, most modern browsers support the @font-face css call, and css3.0 is working to make that a web standard. Of course, Microsoft makes things a little harder out of the box, so the @font-face call does require a slight modification to work “cross browser”, but in the end it is worth it.

Simply upload your fonts to your server, and then add the following syntax (changing names where appropriate) to your css:

@font-face {
  font-family: "FontName";
  /* IE - pulls the eot file for MS IE only*/
  src: url(/location/of/font/FontFileName.eot);
   /* non-IE - resets by trying to pull the font locally, then pulls from online if not available */
  src: local("FontName"), url(/location/of/font/FontFileName.ttf) format("truetype");
  }
 /* THEN use like you would any other font */
 .yourFontName { font-family:"FontName", verdana, helvetica, sans-serif;
 }

Use http://www.cuvou.com/wizards/ttf2eot.cgi for a free tff to eot converter and you are ready to go!

Problems Using an Image for Submit Button in IE

If you are working with a form and want to create a nice “Submit” button using the <input type=”image”> option, there could be a problem with Internet Explorer.

IE does not process the name value of an image when used as the submit button. So if you are using the name of the submit button to check for submission as in the example below, IE will not process that form properly.

Wrong Code

<?php $submitted = $_POST['submit']; if($submitted == "submit") echo ('This form submitted.'); ?>

<form action="URL.php" action="post">

<input type="text" name="any" />

<input type="image" name="submission" value="submit" />

</form>

The problem here is that IE does not recognize the name of the image and therefore does not pass along that value. So the php code checking for submission will fail. To get around this, we still use the image as the submit button, but we simply add a hidden input with the information we need to check. Note the difference in the code below:

Corrected Code

<?php $submitted = $_POST['submit'];  if($submitted == "submit") echo ('This form submitted.'); ?>

<form  action="URL.php" action="post">

<input type="text"  name="any" />

<input type="image"  value="submit" />

<input type="hidden" name="submission" value="submit" />

</form>

This will now work for IE, as well as all other browsers.