Web Design Weekly #164

Headlines Webiness Jeremy Keith backs up John Gruber’s recent thoughts on “native apps are part of the web” but adds the main point about why URLs are what give the web its reach. (adactio.com) Flow – A static type checker for JavaScript (flowtype.org) Boost your design skills Do you ever wish your websites & apps looked more “professional”? Take one of our online design courses with hands-on projects & 1-on-1 mentoring from expert designers — we guarantee you’ll see an improvement in your work. Sign up today! (trydesignlab.com) Sponsor Web Design…

CSS Stats

http://cssstats.com/ Adam Morse and Brent Jackson just pushed a nice new update out. If you are in need of gathering some quick insights into your CSS, this is your tool. Source: web design weekly

Comment count same for every post in homepage WP_Query

I have a WP_Query on my homepage template that works just fine for get_the_title() and MANY other functions for each post in the loop. However, any way of getting the comment count just grabs the real count for the first post and then repeats the same output for the rest of the posts. I’ve tried both echo get_comments_number($post->ID); and comments_number(); The kicker: if I use the same template NOT on the homepage, comment count works fine. Source: https://wordpress.stackexchange.com/feeds

Change Font-Size within Input Field Based on Length

Recently I had a great conversation with an outstanding User Experience designer about a few interactions on a project we were working on. One of the points we talked about was, what should happen when text within input fields are excessively long. The desired result we both agreed on was to change the font size on the fly. Thankfully this is extremely easy with a little bit of jQuery that listens to events on the input field. So if you happen to be in the same situation hopefully these snippets…

Update media file url in wordpress media library

Currently my videos are hosted within my wp installation. I want to move all videos to my new server. Currently, my media url are as follows http://mysite.com/wp-content/uploads/video01.mp4 I am moving all videos to my central media server which will have this new url http://media.mysite.com/videos/video01.mp4 My site will continue to be hosted where it is right now. I will only move media files. I was hoping Velvet Blues Update URLs will be up for the job but it does not find any url to update on my website. Probably because I…

Custom links for WordPress author profiles

The following snippet when placed within WordPress functions.php will allow authors to add custom links to their profile and display for each author bio. functions.php <?php // Add to your theme’s functions.php // // You can access this data anywhere in your // theme by using get_the_author_meta() function custom_author_links( $author_social_link ) { $authorsociallink[‘rss_url’] = ‘RSS URL’; $authorsociallink[‘google_profile’] = ‘Google Profile URL’; $authorsociallink[‘twitter_profile’] = ‘Twitter Profile URL’; $authorsociallink[‘facebook_profile’] = ‘Facebook Profile URL’; $authorsociallink[‘linkedin_profile’] = ‘Linkedin Profile URL’; return $authorsociallink; } addfilter( ‘usercontactmethods’, ‘customauthorlinks’, 10, 1); ?>; retrieving custom data : Full…

Feature img as a bg for single WordPress entries

The following snippet when placed within a WordPress post loop will display a feature image uploaded via your media uploader and place it as a background image within a div tag. Custom CSS will be required to display the image. <?php if ( has_post_thumbnail( $post->ID ) ) : ?> <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘single-post-thumbnail’ ); $image = $image[0]; ?> <div class=“feat-img—bg” style=“background-image: url(’<?php echo $image; ?>’)”></div> <?php endif; ?> More information about post thumbnails can be found on the WordPress Codex. Source: web design weekly

Lazy loading images for flexslider

Flexslider is one of the most used sliders, for good reason. This snippet helps lazy load your images. In order to create a perceived performance for users, we as authors shouldn’t allow the loading of every single image at once for sliders or carousels. In this snippet we only load the first and second image on init window load. This perceived performance is a bit faster when we advance slides (the current slide also loads the next slide as you traverse). Make sure you don’t lazy load the first image…

Delete tables from database when deleting plugin

I created a plugin and want to add a function to delete my tables from the database when a user deletes my plugin. I created a function that deletes tables from the DB when a user deactivates my plugin, but I don’t want that. Here is the code: // Delete table when deactivate function my_plugin_remove_database() { global $wpdb; $table_name = « NestoNovo »; $sql = « DROP TABLE IF EXISTS $table_name; »; $wpdb->query($sql); delete_option(« my_plugin_db_version »); } register_deactivation_hook( __FILE__, ‘my_plugin_remove_database’ ); As you can see, this function deletes tables when the plugin is deactivated, but I…