WordPress – Page 3 – closingtags </>
CSS jQuery WordPress

CSS Hamburger Menu

I like the hamburger menu. It makes sense. So this is the one that I use when building a menu for mobile devices.
Here’s the HTML:
<nav id=”mobile-navigation” class=”site-navigation mobile-navigation” role=”navigation”>
<a href=”#” class=”mobile-menu-link”>MENU<span></span></a>
And the SCSS:
.mobile-navigation {
display: none;

.mobile-menu-link {
display: block;
position: relative;
width: 90px;
height: 30px;
left: 0;
color: #2f6b68;
font-size: 20px;
text-align: right;
margin: 10px;
@include transition(all, 200ms, ease);

span {
content: ” “;
display: block;
position: absolute;
width: 24px;
height: 4px;
left: 50%;
top: 44%;
margin-left: -43px;
background: transparent;
@include transition(all, 200ms, ease);
&:before {
content: ” “;
display: block;
position: absolute;
width: 24px;
height: 4px;
background: #2f6b68;
left: 50%;
margin-left: -12px;
transform: rotate(45deg);
top: 0;
@include transition(all, 200ms, ease);
&:after {
content: ” “;
display: block;
position: absolute;
width: 24px;
height: 4px;
background: #2f6b68;
left: 50%;
margin-left: -12px;
transform: rotate(-45deg);
top: 0;
@include transition(all, 200ms, ease);
.menu-mobile-container {
height: auto;
background-color: #ffffff;
.nav-menu {
position: relative;
z-index: 50;
width: 100%;
.menu-item {
display: block;
margin: 0;
a {
display: block;
border-radius: 0;
.mobile-navigation.closed {
.mobile-menu-link {
span {
background: #2f6b68;
&:before {
top: -7px;
transform: rotate(0);
&:after {
top: 7px;
transform: rotate(0);
.menu-mobile-container {
height: 0;
overflow: hidden;
position: relative;
Here’s my transition mixin:
@mixin transition($property, $time, $type: ease) {
-webkit-transition: $property $time $type;
-moz-transition:$property $time $type;
-ms-transition:$property $time $type;
-o-transition:$property $time $type;
transition:$property $time $type;
And here’s some of the jQuery:
$(document).ready( function() {
$(‘.mobile-menu-link’).on(‘click’, function(event) {
$(this).parent(‘.mobile-navigation’).toggleClass(‘closed’, 200);
Now, this toggleClass function is giving a little bit of a delay, so if you can figure out a way of doing all of this without it, I’d be interested in knowing a fix.
I like the animation of the ‘X’ that is provided with this hamburger menu. It’s intuitive and self-explaining.

CSS HTML5 jQuery Mobile PHP WordPress

Developing with Vagrant

Recently, I’ve been trying to find ways to speed up my development time, and I came across a great video showcasing Vagrant. I could spend a lot of time writing a bunch of mumbo jumbo here for you to read, or you could just watch the video that explains it a thousand times better than I would ever be able to.

CSS HTML5 jQuery PHP WordPress


It’s been pretty slow on the web development front for me lately, but I have discovered something new and interesting. It’s called DemocracyOS. What is DemocracyOS? Oh, I’m so glad you asked. Well it’s an open-sourced platform that aims to bring democracy back into the hands of the people in a way that makes voting on almost anything, very simple.
Just recently, we had some elections here in the US (Nov. 4th, 2014) and supposedly, Republicans took back control of both the House and the Senate because so many young people didn’t turn out to vote. What DemocracyOS intends to do, is bring the voting to you. No more waiting in lines at the polls, trying to get away from work, attempting to figure out where you’re supposed to go to vote, or filling in the circles ever so perfectly on an outdated technology (paper).
It’s supposed to be as simple to install and use as WordPress, although I haven’t quite gotten that far yet. I’ll keep the blog updated with my findings though. Check it out at Github here or the main site here.
And if you want to chat about this stuff, hit me up on Twitter @awebdevguy.

CSS Themes WordPress

Custom WordPress Admin Login Logo

If you want to replace the WordPress logo on your admin login page with your own custom image, you can do it with just a couple simple lines in your functions.php file.
add_action(“login_head”, “my_login_head”);
function my_login_head() {
echo “<style>
body.login #login h1 a {
background: url(‘”.get_bloginfo(‘template_url’).”/images/logo_login.png’) no-repeat scroll center top transparent;
height: 181px;
width: 269px;
padding:0 25px;
Simply upload your file to the proper path and adjust the CSS accordingly.

CSS Themes WordPress

Shortcodes for Custom Column Sizes

WordPress is great, but sometimes, when you’re writing a blog post, the WSIWYG is just lacking certain features. Say you want to format your content and make things a little cleaner. Like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel urna ut elit faucibus semper. Morbi dignissim ex enim, et consectetur justo blandit vel. Etiam lobortis nulla vel tellus dictum dignissim. Fusce purus lectus, luctus vitae imperdiet ac, lobortis quis urna. Integer id venenatis quam. Cras ac neque sit amet urna consequat pellentesque.

Nunc vitae laoreet purus. Ut egestas, metus eget accumsan fringilla, erat justo congue tellus, pulvinar vehicula nunc enim nec augue. Praesent gravida blandit risus dapibus pharetra. Proin consequat et nisl quis tincidunt. Proin at massa odio. Cras malesuada porta ultricies. Fusce tristique blandit leo at tempus. Curabitur tincidunt ex quis lacus sodales ornare.

By the way, you can get copy/paste lorem ipsum from http://www.lipsum.com/feed/html
Well, if this is something you’d like to be able to do, you can make a couple quick edits in functions.php and style.css of your theme. The CSS code looks like this:
* Fluid Columns
* —————————————————————————-
.one_half{ width:48%; }
.one_third{ width:30.66%; }
.two_third{ width:65.33%; }
.one_fourth{ width:22%; }
.three_fourth{ width:74%; }
.one_fifth{ width:16.8%; }
.two_fifth{ width:37.6%; }
.three_fifth{ width:58.4%; }
.four_fifth{ width:79.2%; }
.one_sixth{ width:13.33%; }
.five_sixth{ width:82.67%; }
.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth{ position:relative; margin-right:2%; padding-right:2%; float:left; }
.last{ margin-right:0 !important; padding-right:0 !important; clear:right; }
.clearboth {clear:both;display:block;font-size:0;height:0;line-height:0;width:100%;}

And this is what you will put in the functions.php:
function columns_one_third( $atts, $content = null ) { return ‘<div class=”one_third”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘one_third’, ‘columns_one_third’);
function columns_one_third_last( $atts, $content = null ) { return ‘<div class=”one_third last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘one_third_last’, ‘columns_one_third_last’);
function columns_two_third( $atts, $content = null ) { return ‘<div class=”two_third”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘two_third’, ‘columns_two_third’);
function columns_two_third_last( $atts, $content = null ) { return ‘<div class=”two_third last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘two_third_last’, ‘columns_two_third_last’);
function columns_one_half( $atts, $content = null ) { return ‘<div class=”one_half”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘one_half’, ‘columns_one_half’);
function columns_one_half_last( $atts, $content = null ) { return ‘<div class=”one_half last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘one_half_last’, ‘columns_one_half_last’);
function columns_one_fourth( $atts, $content = null ) { return ‘<div class=”one_fourth”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘one_fourth’, ‘columns_one_fourth’);
function columns_one_fourth_last( $atts, $content = null ) { return ‘<div class=”one_fourth last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘one_fourth_last’, ‘columns_one_fourth_last’);
function columns_three_fourth( $atts, $content = null ) { return ‘<div class=”three_fourth”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘three_fourth’, ‘columns_three_fourth’);
function columns_three_fourth_last( $atts, $content = null ) { return ‘<div class=”three_fourth last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘three_fourth_last’, ‘columns_three_fourth_last’);
function columns_one_fifth( $atts, $content = null ) { return ‘<div class=”one_fifth”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘one_fifth’, ‘columns_one_fifth’);
function columns_one_fifth_last( $atts, $content = null ) { return ‘<div class=”one_fifth last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘one_fifth_last’, ‘columns_one_fifth_last’);
function columns_two_fifth( $atts, $content = null ) { return ‘<div class=”two_fifth”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘two_fifth’, ‘columns_two_fifth’);
function columns_two_fifth_last( $atts, $content = null ) { return ‘<div class=”two_fifth last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘two_fifth_last’, ‘columns_two_fifth_last’);
function columns_three_fifth( $atts, $content = null ) { return ‘<div class=”three_fifth”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘three_fifth’, ‘columns_three_fifth’);
function columns_three_fifth_last( $atts, $content = null ) { return ‘<div class=”three_fifth last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘three_fifth_last’, ‘columns_three_fifth_last’);
function columns_four_fifth( $atts, $content = null ) { return ‘<div class=”four_fifth”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘four_fifth’, ‘columns_four_fifth’);
function columns_four_fifth_last( $atts, $content = null ) { return ‘<div class=”four_fifth last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘four_fifth_last’, ‘columns_four_fifth_last’);
function columns_one_sixth( $atts, $content = null ) { return ‘<div class=”one_sixth”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘one_sixth’, ‘columns_one_sixth’);
function columns_one_sixth_last( $atts, $content = null ) { return ‘<div class=”one_sixth last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘one_sixth_last’, ‘columns_one_sixth_last’);
function columns_five_sixth( $atts, $content = null ) { return ‘<div class=”five_sixth”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘five_sixth’, ‘columns_five_sixth’);
function columns_five_sixth_last( $atts, $content = null ) { return ‘<div class=”five_sixth last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘five_sixth_last’, ‘columns_five_sixth_last’);

function columns_formatter($content) {
$new_content = ”;

/* Matches the contents and the open and closing tags */
$pattern_full = ‘{(\[raw\].*?\[/raw\])}is’;

/* Matches just the contents */
$pattern_contents = ‘{\[raw\](.*?)\[/raw\]}is’;

/* Divide content into pieces */
$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);

/* Loop over pieces */
foreach ($pieces as $piece) {
/* Look for presence of the shortcode */
if (preg_match($pattern_contents, $piece, $matches)) {

/* Append to content (no formatting) */
$new_content .= $matches[1];
} else {

/* Format and append to content */
$new_content .= wptexturize(wpautop($piece));

return $new_content;

// Remove the 2 main auto-formatters
remove_filter(‘the_content’, ‘wpautop’);
remove_filter(‘the_content’, ‘wptexturize’);

// Before displaying for viewing, apply this function
add_filter(‘the_content’, ‘columns_formatter’, 99);
add_filter(‘widget_text’, ‘columns_formatter’, 99);

Now to use this handy feature, you basically say:

Your content goes here…..

Your content goes here…..

If you wanted three columns, you’d replace ‘one_half’ with ‘one_third’, four columns, you’d replace ‘one_half’ with ‘one_fourth, and so on. Just make sure your last column has the ‘_last’ appended to both opening and closing tags.
This is a pretty great feature, but it does break down on mobile devices. So in the media queries of the theme, I find it best to simple break the columns, and set each section to full width. The .clearboth class in the CSS code has pretty much everything you need (but also some extra) so we’ll take a piece out of that and do this in our media queries.
@media screen and (max-width: 758px) {

.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth {
This way, when the device screen gets to a smaller size, your columns will break into full width divs.

Themes WordPress

Disabling Comments In WordPress

Sometimes, WordPress is used for websites that are not blogs. And sometimes, those websites don’t want to hear back from people on the internet, because; let’s face it, people on the internet can suck. So if you want to make sure those sucky people don’t comment on your site, don’t try and delete the wp_comments table from the WordPress database like this guy thought he could do. That’s just going to cause problems. Instead, try this code.
// Disable support for comments and trackbacks in post types
function df_disable_comments_post_types_support() {
$post_types = get_post_types();
foreach ($post_types as $post_type) {
if(post_type_supports($post_type, ‘comments’)) {
remove_post_type_support($post_type, ‘comments’);
remove_post_type_support($post_type, ‘trackbacks’);
add_action(‘admin_init’, ‘df_disable_comments_post_types_support’);

// Close comments on the front-end
function df_disable_comments_status() {
return false;
add_filter(‘comments_open’, ‘df_disable_comments_status’, 20, 2);
add_filter(‘pings_open’, ‘df_disable_comments_status’, 20, 2);

// Hide existing comments
function df_disable_comments_hide_existing_comments($comments) {
$comments = array();
return $comments;
add_filter(‘comments_array’, ‘df_disable_comments_hide_existing_comments’, 10, 2);

// Remove comments page in menu
function df_disable_comments_admin_menu() {
add_action(‘admin_menu’, ‘df_disable_comments_admin_menu’);

// Redirect any user trying to access comments page
function df_disable_comments_admin_menu_redirect() {
global $pagenow;
if ($pagenow === ‘edit-comments.php’) {
wp_redirect(admin_url()); exit;
add_action(‘admin_init’, ‘df_disable_comments_admin_menu_redirect’);

// Remove comments metabox from dashboard
function df_disable_comments_dashboard() {
remove_meta_box(‘dashboard_recent_comments’, ‘dashboard’, ‘normal’);
add_action(‘admin_init’, ‘df_disable_comments_dashboard’);

// Remove comments links from admin bar
function df_disable_comments_admin_bar() {
if (is_admin_bar_showing()) {
remove_action(‘admin_bar_menu’, ‘wp_admin_bar_comments_menu’, 60);
add_action(‘init’, ‘df_disable_comments_admin_bar’);
Just take the code snippets you want from this, and drop them into the theme’s functions.php file to disable comments site wide.

Plugins Themes WordPress

Custom Admin Toolbar in WordPress

I spend a lot of time on StackOverflow, as most people in any programming field do. Well, when I get time, I like to try and answer questions to give back to the community. Sometimes, I can be helpful. Not always, but sometimes.
Yesterday was one of those days. A question came up, about creating a custom interface with the WordPress admin bar. Seeing as how I’d never tried this, I thought I’d give it a shot and figure it out.

After being sidetracked by actual work, I finally got to work on the question and came up with a solution.
add_action(‘wp_before_admin_bar_render’, ‘change_admin_bar’,999);

function change_admin_bar() {
global $wp_admin_bar;

$args = array(
‘id’ => ‘edit’,
‘title’ => ‘Edit Backend’,
‘href’ => get_edit_post_link(),

This code, when placed in the functions.php file of your theme, will remove the ‘Edit Post’ button from the admin bar, and then replace it with a button labeled ‘Edit Backend.’ It’s a super simple piece of code and there’s tons more that can be done with this kind of thing. You can tweak your admin toolbar to your heart’s content.
If you’re looking to do more than this, you can always go to the Codex to get more info or here.
Oh! And this is the link to Stack Overflow thread.

I don’t get to be useful on that website too often as there are so many brilliant minds, it’s easy to get cluttered.

Plugins Themes WordPress

What is WordPress?

WordPress. You’ve heard about it but you’re not entirely sure what it is. You’ve seen it online while searching for an easy way to setup a website for your business. Well, this is what WordPress is: a Content Management System (CMS).
What is a CMS?
A Content Management System is a platform that is designed to make handling a website easier. They can vary in how they work, but the general idea is that it gives the website owner a simple and easy way to update the website without a lot of technical knowledge. The owner simply logs in to the admin interface of the CMS, clicks a few menu items, and makes the appropriate changes. Simple as that. So where does WordPress fit in?
WordPress is quite possibly the most popular CMS available. This means that it has a large, supportive community. It also has the added benefit of many easy to use features because of this community.
If there’s a feature your website needs, and you’re not sure how to program, it’s not a problem. Someone else has probably already thought of it and done it. With WordPress, you can simply install plugins created by developers. Plugins have been created for just about anything you can imagine. Features range from sharing blog posts to Facebook and Twitter all the way to keeping your site as secure as possible. Plugins are there to make your life simple and they can be installed and setup with a few simple clicks.
The Blog
The blog is actually where WordPress got it’s start. It was developed as a blogging platform in 2003 but it’s become so much more than that since then. Now, it’s a CMS, but the blogging features still remain. Publishing a new post to your blog is just as simple as a few clicks and it allows any company to keep their website up-to-date with the latest information. There is nothing more infuriating for as a potential customer than seeing a website that hasn’t been updated in years. By using the blog, you can keep your customers (and potential customers) informed about what’s been going on lately.
Themes are another huge part of WordPress. They allow you to change the entire look and feel of your website in a matter of minutes. Themes can be downloaded from a number of sites including themeforest.net, wordpress.org, and even from the theme’s creators’ sites. Some of the most popular themes are free while some other less widely used (but higher end) themes are pay-to-use. The advantage of paying for a theme is that fewer other website will be using that same theme, you’re likely to get many more customization options, and you’re supporting a developer’s work.
But what if you can’t find the style you’re looking for in a theme? Just because you can’t find the look of your site in a theme, doesn’t mean it can’t be done. Many people (including myself) develop websites exclusively on top of WordPress. This allows you to have complete control over what is put onto your website. By hiring a developer, or building your website with an underlying WordPress framework, you can take advantage of WordPress’s powerful back-end while controlling exactly how your site is designed and laid out.
You may have heard about security flaws within WordPress itself, most recently, the 160,000 websites that were exploited to attack other sites. Some people claim that WordPress is more vulnerable to attacks than other platforms but their reasoning doesn’t quite hold water. Because WordPress is the largest and most widely used CMS available today, it stands to reason that anyone wanting to attack some websites, would go after instead of the smaller, lesser known sites. Take Microsoft’s Windows OS for an example. Why do so many Windows computers get viruses and not Apples? The chances of an attack being more successful on that platform are much higher, because it is so much more abundant. But Mac computers aren’t invincible either. So this same logic applies to websites as well. What it all comes down to, is being smart about keeping your website safe. After all, your wallet, bank account information, social security number, etc are all only as safe as you make them. By keeping your WordPress site up-to-date, not installing suspicious plugins, and being smart about your passwords, you can keep your WordPress site just as safe as any other site.
So now you know just enough about WordPress to be dangerous. There are infinitely many more resources out there and this blog is still young. For some ideas on how to get a quick site setup, you can check out wordpress.com or wordpress.org

Plugins WordPress

Edit Hopper

The purpose of this plugin is to allow WordPress admin’s to more easily navigate through child and parent pages. This plugin will create a widget in the WordPress admin interface on a Page Edit screen. It will show any child or parent pages and allow you to navigate to those pages by simply clicking the link for that page. The .zip can be downloaded here. Similarly, you can take the following code and copy it into your theme’s functions.php file.
function edit_hopper_main(){
echo “<div class=’ultimate-container’>”;
echo “<div class=’hopper-title’><strong>Click a page to go to the edit page</strong></div></br>”;

$current = get_post($id);
$parvar = $current->post_parent;
if($parvar) {
echo “<div class=’hopper-parent-link’><a href='” . get_edit_post_link( $parvar) . “‘>”
. get_post($parvar)->post_title . “</a></div>”;

echo “<div class=’hopper-current-link’>”.get_post( $id)->post_title. “</div>”;
$args = array(
‘post_type’ => ‘page’,
‘child_of’ => (get_post($id)->ID));
$children = get_pages($args);
foreach ($children as $child) {
echo “<div class=’hopper-child-link’><a href='” . get_edit_post_link($child->ID) . “‘>”
. get_post($child->ID)->post_title . “</a></div>”;

echo “</div>”;

function edit_hopper_custom_box() {
$screens = array( ‘post’, ‘page’ );

foreach ( $screens as $screen ) {

__( ‘Edit Screen Page Hopper’, ‘edit_hopper_textdomain’ ),
add_action( ‘add_meta_boxes’, ‘edit_hopper_custom_box’ );