John

You are not Done

May 26, 2015 by John

or even Finished

When my kids were younger they spent a lot of time with their Grandma. She was a retired school teacher and helped us avoid day care costs by staying home with the kids while my wife and I worked. As she did with her second grade class, she was a stickler for proper grammar. As they began to speak more and learn to talk, she would give them activities to occupy their time, in the vain of pre-school. As I worked from home, I would hear them yell “Grandma, I’m done!”. Typically, the reply would come, “Food is done, you’re finished.”

So what are You?

Is your site done or finished? Whether you agree with my Mother in Law or not, when it comes to websites, you should never be “done” or “finished”. If your site is utilizing WordPress and you don’t have a regular maintenance schedule, you could be leaving your site vulnerable to hackers. Even if you don’t update pages or information, you should be checking the Admin section of your site for plugin and core updates. The WordPress core has been on a quarterly update schedule for adding features and bug fixes for about a year. As they correct some of the minor bugs and security holes, they may feel an intermittent release is necessary. If you’re not checking your site or have a host that does this for you, you could miss the notice and be leaving your site vulnerable to attacks.

You’re plugins too

As I said, it’s not just WordPress core you need to worry about, plugin developers add features and find issues on a regular basis. Some plugins update as much as once a week, for example, Yoast’s WordPress SEO. This is an essential tool for your website, giving your site SEO a shot in the arm. They change this plugin as Google’s algorithm changes or they find ways to improve your site SEO for other search engines. That’s just one of the plugins I know makes regular updates and one that I install on most websites I create. There are plenty of other plugins that need updating, some on a schedule and others as there’s a need.

Get on a Schedule

I can’t tell you how many sites I’ve inherited from other developers or owners where there were no updates. Whether you maintain your site yourself or you have someone do it for you, make sure it’s on a regular schedule. If it’s once a week or once a month, don’t leave your site’s health to chance. While it’s only one piece of securing your site, it’s one of the easiest. If you work with me, I’ll be sure to give you all the options for maintenance and help with keeping your site up to date.

Ready to work together on improving your marketing funnel? Contact me today!

Embedding Youtube Videos in WordPress

May 1, 2015 by John

The Preferred Method for Embedding Youtube Videos

I’ve had a few clients who asked about embedding youtube videos in WordPress. WordPress makes it very easy to embed a plethora of media types right from the editor, Youtube being one of them. The full list of media embeds built into WordPress can be found here). My clients were having a few issues where only the link was showing in the post/page and not the embedded video. I thought I’d outline the preferred Youtube/Wordpress method for embedding. Thanks to my friend and client, John Bair of Bair Knuckle Strength, for letting me use his site for the examples.

Get the Youtube Link

For Youtube videos you shouldn’t just copy the link from your browser’s address bar. While it “may” work, there are cases with the crazy characters in the url that you end up just pasting in a link. On your Youtube video page, you should utilize the share button (pictured below).

When you click on that button you’ll be presented with a shortened/sharable link. This is the link you should supply to WordPress.

Embedding in WordPress

After you copy that link, head over to your Wordpress page/post and you’ll hit the Add Media button in the upper left. Then click Insert from URL and paste in the link you copied from Youtube.

When it’s successful, you’ll get a preview of the embedded video (shown above). If there’s an error, you’ll know right away. When successful, you can click the Insert into Page button on the bottom right .

Now go out there, record your Youtube videos, and start embedding in WordPress.

Responsive Design – A Discussion

January 17, 2015 by John

Last year, I participated in a Google Hangout with my friends from the Chester County Marketing Group, Jeff Tincher and Carla Wilson talking about responsive design. This is a great small group meetup about digital marketing and social media that meets once a month. They also have the hangouts, like this video, every other week online. Go check them out.

For some reason, I forgot to share the video here at the time. It’s about 30 minutes. Go grab some popcorn, sit back and enjoy the discussion.

Feel free to Contact Me with any questions regarding your website and making it responsive.

Testing with BrowserSync

January 14, 2015 by John

Local Testing Issues

Recently, today as a matter of fact, I saw my friend Sal Ferrarello tweeting about testing on the same network during development. I know Sal through the local WP Meetup and we’ve had some great discussions at these events. We both use Varying Vagrant Vagrants for our local machines and the discussion came up regarding testing. The main gist of the conversation was about how I test on other machines (e.g. iPad, iPhone, etc.).

While I didn’t have a solution, other then I test from my development server once I deploy a client site, Sal was looking for a solution before that. He came up with a VVV setup post and a solution that was working for him, at the time. I had followed this posts directions, with some success, but after a computer crash and rebuild, I had setup my updated machine without following his directions.

New Testing Solution

As I stated before, I saw Sal’s tweet about how to test locally and followed the discussion. A few of the tweets mentioned BrowserSync, which I had not heard of before. After a quick search, I found a quite a few posts about setting it up and came across Sridhar Katakam’s blog post and how he used it. Sridhar is a terrific developer who has helped me with the guides on his website on more then one occasion. He uses a different local host but utilizing some of his processes and the BrowserSync documentation, I was able to get it running in less then 15 minutes.

How I did It

At first, I installed BrowserSync globally, but realized I needed it to run as part of my Grunt process using their plugin. From my project directory, I loaded it using npm like this:

https://gist.github.com/fbe5c718b8cdb84978bd

Then I needed to edit my projects GruntFile.js. I put the following at the end of my Grunt config setup:

https://gist.github.com/d1b3e6768f2638036a85#file-my-browsersync-gruntfile-settings

What does the above do? First, it watches for file changes. In this case, when my final CSS file is written it reloads all synced browsers. Then the options are set for how it runs. I already have a server setup for each project, so I set a proxy to the vhosts setting for the current project. Then I turned of ghost mode; if you leave it on all synced device browsers will perform the same action as the device being used. I set a port, but I didn’t really have too and most importantly, I set watchTask to true, because I have Grunt watching my CSS and JS changes. The last 2 lines load the task and then, so it doesn’t compete with your Watch tasks, you put browserSync first in the registerTask function call.

The Results and A Minor Issue

Here’s what my terminal gave me after I ran grunt in my terminal window.

I have my localhost, an external URL with an IP from my network and a tunnel URL. You can see it’s also proxying the local host I had already defined.

What’s the tunnel URL you ask? I didn’t talk about the ‘tunnel: “testing” option I used in my gruntfile above. After first setup, I was able to use my Windows laptop and iPad to connect to the public IP address. The curious thing was my iPhone would not connect. After some searching, there were a few discussions regarding WIFI issues on secure vs insecure networks. One of the solutions was to create a tunnel and after I added that option, BOOM, my iPhone was working.

Hopefully, someone else can find this helpful if their running a VVV and Grunt development environment on their machines. I know I will be able to test changes sooner in different browsers and devices, without worrying about starting an FTP session anymore.

I look forward to seeing how this improves my workflow.

CSS Hover and Current Menu Items for Custom Menu Links

January 7, 2015 by John

When I was redesigning my site, I developed an issue with the current menu item on my Portfolio page. It’s an archive page, essentially, and the menu was setup as a custom link that would utilize my archive template. When you do that, the custom link in the menu doesn’t receive the class of “current-menu-item” or “active”. This was driving me crazy and after too many different Google searches, I stumbled upon a solution. While I don’t remember the source, and I apologize to whomever, it was not easy to find using some pretty basic searches, in my opinion. For the future and perhaps for others frustrated with this predicament, I give you the following solution.

It’s a WordPress filter and we’re looking for the specific menu item class name and changing menu-item-#, in the menu class array, to have the 2 additional current-menu-item classes so our hovers and active classes in CSS actually work.

I was using a Genesis theme, but if you’re having this issue with another theme and it’s using a class such as “active”, you’ll need to modify the code accordingly. You could do this for each custom menu link as needed.

In any case, Happy Coding!

New Year, New Site Design

December 31, 2014 by John

Something New

It’s a new year and a new site design for 2015. Even though my site had a decent design, I didn’t think it really reflected myself or the sites I was creating for my clients. My original design came straight from my favorite framework, Genesis by Studiopress. I have access to any of their themes, and on my last design I went with their popular Minimum Pro theme. I found a decent picture to put in the big “space”, but I wasn’t completely thrilled with it.

Most of the pre-built themes from Genesis are pretty complete. While it’s certainly simple to just grab and go in that regard, I feIt when I chose one of those for clients I wasn’t really giving them a truly custom theme, even with their necessary modifications. Don’t get me wrong, their developer pack is a great investment. You can certainly borrow some great ideas from these themes.

My Tools Changed

As my 2014 played out, however, I started to move towards tools like SASS, Grunt, and Varying Vagrant Vagrants. These tools don’t necessarily play well with above mentioned pre-built themes. So, I decided I needed to utilize the Genesis Sample theme with SASS modifications. I found one via GitHub by Matt Banks and decided to fork it. I’ve made my modifications, adding and changing things for my clients needs and switching to the Bourbon.io library to create Genesis with Bourbon theme.

So, when I was thinking about my site’s design, I thought it made sense to utilize the theme I start all my client projects.

What Changed?

So what did I add and change?

One of the first things I decided was to get rid of the big image in the middle. I never utilized that image the way I originally intended, so I decide to make the content more up front.
A sticky menu. I’m a big fan menus that are available. With all the scrolling on some blog posts, it’s nice to have a way to quickly go to another page, without having to scroll back up from page or post.
Updated Portfolio view. I was able to keep the portfolio code from my old theme, but wrote some new CSS for the display. Now, hovering over a portfolio image gives you a preview but shows more on smaller screens.
A bunch of items that you won’t notice, like compressed CSS and lazy loading Javascript to speed up site load, unless you’re a developer.

It’s Never Finished

A site is never “finished”. Luckily, we don’t put those silly “under construction” animated gifs on sites anymore. So, while I pushed out this new design, I know everything is not complete. When you’re working on your own site, it’s never as easy as doing work for someone else. I still want to add my testimonials, along with making some more graphic changes. For now, I’m happy with how things turned out though and I look forward to hearing what others think of the changes.

Happy New Year!