The cobbler’s children go unshod…

When you’re in technology, you often find yourself and your pet projects facing the cobbler’s children syndrome as you pour yourself into everyone else’s needs but you let your own suffer. I’m certainly guilty of it myself, and the site here has suffered for it. Well, I’m trying to change that.

Over the past couple years, Technical Meshugana has gone through some various theme and UI changes, and I’ll be the first to admit when they weren’t for the better. The old Montezuma theme was always the one I was most partial to, but when the code base changed to the point that disabling JavaScript rendered the page unreadable from a browser, I moved on to another freebie theme and just never spent the time necessary to really polish up the site. I’ve also gotten the occasional odd complaint that I stopped making it easy for people to link to the site through social media after I nixed the inbuilt social media buttons in response to the Facebook XSS issue in February ’13. Well, I finally did something about it all, and technically I backpedaled a little bit on that last part.

If you hadn’t noticed, the site has been given a nice little face-lift courtesy of Generate Press and the Mantle sub-theme. It’s been incredibly flexible and useful for finally bringing the site up to snuff without my spending a whole mess of time doing so. The framework is both flexible and affordable, and the $20 worth of add-ons was well spent, and saved me a great deal of time. That’s right, I spent money instead of putting in the elbow grease myself. It has some quirks, such as placing multiple embedded font calls for the same font packages to Google, but it manages well enough. Why reinvent the wheel?

All things said, I think it was worth it, even if I’m still being dependent upon Google Fonts and Cloudflare. In addition to the new theme, you’ll note that a few minor things have been fixed, including:

  • Better rendering and layout in text-only browsers and mobile devices
  • The RSS feed in TinyRSS and other miscellaneous RSS readers works again
  • Matching theme on the Wireless Calculator again
  • Various updated/repaired links in the menu and throughout the site
  • Cleaner HTML5 and CSS3 coding
  • Cleaner overall user interface with enhanced navigation for those using JavaScript
  • More graceful degradation in older browsers
  • The return of social media link widgets
  • Printer friendly theme settings and page layouts
  • It no longer makes your genial host mutter, “My website is an eyesore!” when he looks at it
  • Other fiddly bits

Given what I’ve said about social media buttons in the past, you’re probably wondering where I got mine. Well, I basically banged out the code myself. If you can’t trust plug-ins not to stuff third-party datamining bits in and you don’t want to use the native kit with Jetpack due to the whole XSS issue, you’ve gotta roll your own. For those curious, here’s the code (and it requires Font Awesome for icons):

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php echo rawurlencode(the_title_attribute('echo=0')); ?>" onclick="javascript:window.open(this.href,
  '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" title="Share on Facebook"><i class="fa fa-facebook-square" style="font-size:25px; color:#3A5795;"></i></a>&nbsp;
<a href="http://twitter.com/home/?status=<?php echo rawurlencode(the_title_attribute('echo=0')); ?>-<?php echo wp_get_shortlink(); ?>" onclick="javascript:window.open(this.href,
  '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" title="Tweet this!"><i class="fa fa-twitter-square" style="font-size:25px; color:#55ACEE;"></i></a>&nbsp;
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,
  '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" title="Share on Google+"><i class="fa fa-google-plus-square" style="font-size:25px; color:#DD4B39;"></i></a>&nbsp;
<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&amp;media=<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo $url; ?>" onclick="javascript:window.open(this.href,
  '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" title="Share on Pinterest" target="_blank"><i class="fa fa-pinterest-square" style="font-size:25px; color:#CA1F27;"></i></a>&nbsp;
<a href="http://www.reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo rawurlencode(the_title_attribute('echo=0')); ?>" onclick="javascript:window.open(this.href,
  '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" title="Vote on Reddit"><i class="fa fa-reddit-square" style="font-size:25px; color:#369;"></i></a>&nbsp;
<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&amp;title=<?php echo rawurlencode(the_title_attribute('echo=0')); ?>" onclick="javascript:window.open(this.href,
  '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" title="Bookmark on del.icio.us"><i class="fa fa-delicious" style="font-size:25px; color:#0B79E5;"></i></a>&nbsp;
<a href="http://www.linkedin.com/shareArticle?mini=true&amp;title=<?php echo rawurlencode(the_title_attribute('echo=0')); ?>&amp;url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,
  '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" title="Share on LinkedIn"><i class="fa fa-linkedin-square" style="font-size:25px; color:#0077B5;"></i></a>&nbsp;
<a href="mailto:?subject=<?php echo rawurlencode(bloginfo('name')); ?>:%20<?php echo rawurlencode(the_title_attribute('echo=0')); ?>&amp;body=<?php the_permalink();?>" title="Email the link"><i class="fa fa-envelope-square" style="font-size:25px; color:#555;"></i></a>&nbsp;
<a href="javascript:window.print()" title="Print the page"><i class="fa fa-print" style="font-size:25px; color:#555;"></i></a>

It’s not the friendliest code to post and share and it’s a little sloppy, but it passes validation and is the heart of the code that gets the job done – at least for WordPress. It’s based loosely off of the code available here, plus a little bit of miscellaneous fluff kicking around in my head from over the years and a lot of lazy coding (shame on me). Anyway, it should give you rudimentary Facebook, Twitter, Google+, Pinterest, Reddit, Delicious, LinkedIn, Email and Print buttons all without relying on third party plug-ins that’ll further datamine your users or introduce any potential redirect and cross-site script issues. Share and Enjoy!

In addition to all this, I am in the process of updating the guide for 2015, along with a few other mildly pleasant surprises for you folks out there. Needless to say, the kids are finally getting new shoes. Until next time!

2 thoughts on “The cobbler’s children go unshod…

    • I’m glad you’ve enjoyed seeing the new theme evolve and take shape over the past couple weeks. It’s been a sort of gradual transformation instead of just ZOT – NEW THEME! and I wound up doing so deliberately. Normally this is the sort of thing you tuck away and roll out, but sometimes it can be fun to see the process, so I decided to introduce changes live. Call it lazy, call it bad form, but I enjoyed doing so. Fortunately, I didn’t break much in the transition. :)

Leave a Comment