Pushing forward

It always seems impossible until it’s done

~ Nelson Mandella

A common thing about web development is that you will encounter issues where you least expect to encounter them. You may do something that you expect will take hours, and it’s done in 15 minutes; the converse is also true.

So if you want to get good at this stuff…you must remember that sometimes when you’re in the thick of it, it’s gonna get hard. Real hard. Sometimes it’s fun and fascinating, other times it’s drudgery.

I’ve been doing this since 2008. Every day I’ve faced new challenges, some of them make me insecure and nervous…there are times when I feel like a fraud, like a failure…even though I know more about this than most folks, I am afraid that there will come a day when I don’t know, and I won’t be able to figure it out and will gloriously fail.

That day hasn’t come yet.

I have had many failures and struggles, but every time I emerged with some solution. Maybe not always the best (as some commenters have pointed out in my code), but it worked…and that’s what I needed. We become better programmers by writing more code, it’s a skill just like anything else and as the old saying goes “practice makes perfect”. I would like to put together a list of things that always tripped me up to pass on to others that might stumble on this blog for one reason or another, and I hope I can squirrel away the time to do it. But for now, know this:

What we’re doing here is hard. It’s scary, overwhelming, confusing at times, and requires a tremendous amount of grit. If you push forward, you will get better. If you spend hours facing down that problem and come away with a solution, you’ll feel … like this:

gandalf-the-white1

Emerging victorious is one of the best feelings. Facing the drudgery is not. Go forth and create something awesome.

Useful Shortcode: Pull Content from Any Page, Given The Slug.

So, you want to pull content from one page into another…maybe you have an “upcoming events” section that you want to be its own page, yet you also want to show on another page. This shortcode will help you do that.

Put it in your functions.php file.

// [page name="contact"]
 function page_content($atts) {
 extract(shortcode_atts(array(
 'name' => ''
 ), $atts));
 $return = '';
 $args=array(
 'name' => $name,
 'post_type' => 'page',
 'post_status' => 'publish',
 'numberposts' => 1
 );
 $thepages = get_posts($args);
 foreach ($thepages as $thepage) {
 $return .= apply_filters('the_content',$thepage->post_content);
 }
 return $return;
 }
 add_shortcode("page", "page_content");
 // end shortcode

Use it by inserting the following [page name="events"] — where “name” is the page slug.

LiveReload 2 – An app every developer working locally needs

What if I told you, for 10 bucks, you could edit your theme files, and see the changes reflect on your browser immediately without having to reload the browser — ANY browser, not just the ones in your text editing app (like Coda).

Well, there is…and it’s amazing. With LiveReload 2, you can simply edit your code, and the browser adjusts as you save. Oh no, not just CSS. I mean HTML, and PHP too. It’s pretty wild. [I'm looking at you WordPress developers].

Here’s a brief demo of it in action.

[WordPress] How to Redirect users if not logged in

Sometimes I have need to redirect users if they’re not admins, here’s how to do it…it’s very very easy with the wp_redirect() function.

In your themes header.php file, simply open it up and at the TOP of the file, insert the code:

<?php
if (!is_user_logged_in()) {
 wp_redirect( 'http://yoursite.com/');
 exit; 
} ?>

That’s it

Make sure there’s no extra spaces between your code before your !doctype. In fact, you might want to just butt the closing PHP bracket with the !doctype declaration, like so:

} ?><!DOCTYPE

This will redirect any site visitor who isn’t logged in. Just login to WordPress to circumvent this.

Note: Putting this in your header.php without specifying a landing page will cause a redirect loop which will cause your site to break. So don’t do that. In fact, here’s some code to avoid that.

<?php
if (!is_user_logged_in() && !is_front_page()) {
 wp_redirect( 'http://yoursite.com/');
 exit; 
} ?>

This will redirect anyone back to the front page…and that’s all.

WordPress Login and Edit Bookmarklet — Version 2

I use everything I post on this blog all the time. Sometimes my sole reason for posting something is so that I can remember it later.

About a year or so ago I made this bookmarklet that allows users to click a button in their toolbar when they’re on the front-end of their WordPress site, and it automatically appends the appropriate url string so that the user can login, and then be redirected back to the page they were on before.

So that was rad, but it could be better.

The problem was, that if you were on a site whose WordPress installation was in a subdirectory, it would default back to the root URL, which resulted in a 404. This has bugged me, because as I said earlier, I use this stuff more than anyone else.

Tonight I fixed that.

Version 2.0 of the bookmarklet detects the WordPress installation, and automatically redirects you to the appropriate URL. I’m super happy to have figured this thing out, and am now providing it to you…free of charge.

Introducing: The Login and Edit Bookmarklet {2.0}

Just drag the link above to your browser toolbar, and you’re ready to use it.

Note: The bookmarklet will not work if you’re not loading template pages from WordPress.

You can also get the bookmark from the bookmarklet page in the lab.

The expanded javascript code is located at this gist.

Resetting an iframe when you close a modal window [Bootstrap]

Note: This snippet is for the Twitter Bootstrap framework. The principles can still be applied to any modal window, only the way the function is tied together will change.

I use twitter bootstrap a lot, there are a ton of features that make it lots of fun to work with, this particular function applies to the Modal windows, seen here:

Bootstrap Modals

The situation:

You’ve added an inline modal, so that whenever a user clicks on a link or thumbnail, a video pops up. The only problem is that when they click “close” the modal window closes and the video keeps playing. And that’s annoying.

The solution:

The modal javascript allows for callback functions, the following function uses the hidden event to trigger a function so that whenever the modal window is closed, pull the iframe, then put it back…and that’s all. This resets the iframe every time someone closes and opens the modal.

Here’s the function:

jQuery(document).ready(function() {
 jQuery('#vidModal').on('hidden', function () { // change #vidModal to the ID of your modal
 var vidcontent = jQuery('.modal-body iframe').remove();
 setTimeout('2000', jQuery('.modal-body').prepend(vidcontent));
 });
});

The setTimeout here is optional, I added it because I wanted to make sure the iframe had time to be removed, then added back in. All of this happens behind the scenes. This function doesn’t fire until after the modal is closed, and hidden.

That’s all. As always, this is just as much for my purposes to be able to find this code snippet later as much as anything else…but it might be helpful for some folks.

Happy coding.

Nomenclature, template hierarchy, and functions

So, I write a lot about custom functions to add to functions.php in your WordPress theme file. I’ve recently been rethinking a lot of the way I’ve been developing websites, thinking that maybe instead of building all of the functionality into the theme, I should build all of the functionality into a plugin. While I’m ruminating on this, I wanted to share another thing I run into from time to time and put it out there as a warning for others.

When creating page templates, the page slug is supported, so if you have a page called ‘about’, you can create a page template called page-about.php that will render on whatever page has the slug ‘about’. This is useful because you don’t have to assign the page template, and occasionally you’ll have need for that. But as I’m learning more and more, the more power you take away from a user, the more frustrating that can become for them. So, instead of naming your file ‘page-about.php’, call it ‘template-about-page.php’ so it’s easy to identify, but will only be used if it’s needed.

As always, short…a little scattered and a little random.

WordPress Code Snippet — Control Content length of excerpts and content

Shorten the content or excerpt to whatever string size you like by first adding these function to your functions.php file:

function excerpt($limit) {
 $excerpt = explode(' ', get_the_excerpt(), $limit);
 if (count($excerpt)>=$limit) {
 array_pop($excerpt);
 $excerpt = implode(" ",$excerpt).'...';
 } else {
 $excerpt = implode(" ",$excerpt);
 } 
 $excerpt = preg_replace('`\[[^\]]*\]`','',$excerpt);
 return $excerpt;
}
function content($limit) {
 $content = explode(' ', get_the_content(), $limit);
 if (count($content)>=$limit) {
 array_pop($content);
 $content = implode(" ",$content).'...';
 } else {
 $content = implode(" ",$content);
 } 
 $content = preg_replace('/\[.+\]/','', $content);
 $content = apply_filters('the_content', $content); 
 $content = str_replace(']]>', ']]&gt;', $content);
 return $content;
}

Then use the function like so:

<?php echo excerpt('10'); ?>

or

<?php echo content('25'); ?>

Update: May 8, 2013:

I updated a version which strips tags (had an issue with this previously), here it is:

function content($limit, $tags = '<p><a>') {
 $content = get_the_content();
 // stripping preliminary content of tags.
 $content = strip_tags($content, $tags);
 $content = explode(' ', $content, $limit);
 if (count($content)>=$limit) {
 array_pop($content);
 $content = implode(" ",$content).'...';
 } else {
 $content = implode(" ",$content);
 }
 $content = preg_replace('/\[.+\]/','', $content);
 $content = apply_filters('the_content', $content);
 $content = str_replace(']]>', ']]&gt;', $content);
 // stripping THAT content of tags that may have been added
 $content = strip_tags($content, $tags);
 // and strip that of any inline styles
 $content = preg_replace('/(<[^>]+) style=".*?"/i', '$1', $content);
 return $content;
}

So now you can pass two parameters, one that has the amount you want to limit the excerpt by, and another that has the tags you want to allow, for example, <p><a> would allow paragraphs and links…but nothing else.

Redesigning…finally

It’s been a very long time since I redesigned this site. I’ve been running the Geek Out theme for a few years now. While this theme has been really unique and has served me well, I’m now going to build a new one…something more specific to my work, my projects, and who I am as a professional.

I have built a lot of websites on the WordPress platform. I know a lot about this system and how to use it to it’s potential. I know enough to know what I don’t know, and what I need to learn. There are also a lot of things I do in my development infrastructure I’d like to share about, and to organize that content in a better way.

All that to say, I’ve started designing and building a new theme. This one will feature my work, be responsive for different platforms, and be entirely HTML5.

So, keep an eye out. It really is coming soon.