Blog

  • Meetup 2013-02-13

    Theme 2013

    Twenty Thirteen: http://twentythirteendemo.wordpress.com/

    MP6: http://wordpress.org/extend/plugins/mp6/

    Plugins:

    • Article: http://transom.org/?p=30590
    • Plugin directory: http://wordpress.org/extend/plugins/co-authors-plus/
      • image
      • description
      • author
    • Reviews
    • Free: donate
    • Code standards
      • conflict/collision
      • Clean up: uninstall.php, tables?
      • function_exists
      • prefix: function, classes, constants, globals
      • headecon_function()
        tells you it’s yours (not wp_)
        5.3 namespace: http://de3.php.net/manual/en/language.namespaces.php

      • metadata options key name: http://dougal.gunters.org/blog/2009/12/10/wordpress-option-namespacing/
      • files: server vs client
      • plugin x 3:
        1. functions file: http://codex.wordpress.org/Functions_File_Explained
          Theme dependent.
        2. plugins folder:/wp-content/plugins/
          Theme-independent functionality; activation required.
        3. “must use” plugins: /wp-content/mu-plugins/my-custom-functions.php
          Theme-independent functionality, w/o requiring activation.
          http://justintadlock.com/archives/2011/02/02/creating-a-custom-functions-plugin-for-end-users
    • Changelog
  • Sliders

    “We have tested rotating offers many times and have found it to be a poor way of presenting home page content.”
    http://www.widerfunnel.com/conversion-rate-optimization/rotating-offers-the-scourge-of-home-page-design

    “Large carousel areas annoy users and also cause them to skip over that featured area. I’m pretty sure that’s the exact opposite of the intended effect.”
    http://bradfrostweb.com/blog/post/carousels/

    “Accordions and carousels should show a new panel only when users ask for it . Otherwise, it should stand still and let users read the information in peace, without having the rug yanked from under them… It’s just plain annoying for users to lose control of the user interface when things move around of their own accord.”
    http://www.nngroup.com/articles/auto-forwarding/

    “This promotion looks so much like an ad that users are bound to ignore it: banner blindness.”
    http://www.nngroup.com/articles/banner-blindness-old-and-new-findings/

    “By forcing the visitor to involuntarily sit through a series of commercials, you are forcing them to have a linear and out-of-control experience. This is the wrong metaphor for the web… The primary purpose of your home page should be to create a high-level map of the world for your visitors so they can understand the range of available products that you carry. The giant banner will take up all of the prime real estate on the home page and push this navigation off the visible top of the page – sabotaging the page’s primary purpose.”
    http://www.clickz.com/clickz/column/2164452/rotating-banners

    “Sliders, in my opinion, are only valuable for display purposes; they are not good for action taking. Think how you use the web. Do you load a web page, and watch a slider scroll all the way through every item, and wait to click on the thing you like best? I hope not. Most of us want to be able to quickly and easily get to where we want to go.”
    http://krogsgard.com/2013/sliders-suck/

    “Amazon, which tests its website to the ends of computing capabilities, has a homepage carousel. Which starts static. At the bottom. Only related to things I’ve already seen. And that’s probably where it belongs on a homepage… We all know, people have learned to scroll. They did a long time ago, but still the ‘everything needs to be above the fold’ concept lingers on… The digital fold concept evolved into ‘squash as much content as you can above a certain number of pixels’.”
    http://www.uofadmissionsmarketing.com/2013/02/using-carousels-in-higher-education.html

    “The study shows clear indications that a static conversion optimized top area is more interesting to the users and leads to more engagement!”
    http://angner.se/blog/will-front-page-carousells-improve-your-conversion-rate/

    “Content which is genuinely relevant for both your goals and that of your visitors gets pushed down the page – in many cases, especially laptops, this means it gets pushed off the screen.”
    http://beantin.se/post/30991868949/sliding-banner-content-slider-carousel-rotator

    “so…
    should i use a carousel?
    NO!!!
    seriously, you really shouldn’t.”
    http://shouldiuseacarousel.com/

    “Our themes don’t have sliders… Because sliders suck”
    https://yoast.com/opinion-on-sliders/

    more:

    http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/
    http://weedygarden.net/2013/01/carousel-stats/
    http://iampaddy.com/lifebelow600/
    http://thomasharrigan.com/2013/sliders-the-good-the-bad-and-the-technical/

  • Circles CSS

    http://davidwalsh.name/demo/css-circles.php

    .circle {
    border-radius: 50%;
    display: inline-block;
    margin-right: 20px;
    }
    
    #circle1 {
    width: 200px;
    height: 200px;
    background: green;
    }
    
    #circle2 {
    width: 125px;
    height: 125px;
    background: red;
    }
    
    #circle3 {
    width: 100px;
    height: 100px;
    background: blue;
    position: relative;
    }
    
    #circle4 {
    width: 50px;
    height: 50px;
    background: orange;
    position: absolute;
    top: 24%;
    left: 24%;
    display: block;
    border: 3px solid #fff;
    }
    
    @-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
    }
    
    @-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
    }
    
    @-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
    }
    
    #advanced {
    width: 200px;
    height: 200px;
    
    background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
    background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
    background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
    
    
    /* webkit chrome, safari, mobile */
      -webkit-animation-name: spin; 
      -webkit-animation-duration: 3s; /* 3 seconds */
      -webkit-animation-iteration-count: infinite; 
      -webkit-animation-timing-function: linear;
    
      /* mozilla ff */
      -moz-animation-name: spin; 
      -moz-animation-duration: 3s; /* 3 seconds */
      -moz-animation-iteration-count: infinite; 
      -moz-animation-timing-function: linear;
    
      /* microsoft ie */
      -ms-animation-name: spin; 
      -ms-animation-duration: 3s; /* 3 seconds */
      -ms-animation-iteration-count: infinite; 
      -ms-animation-timing-function: linear;
    }
    
    <h2>Basic Circles</h2>
    <div id="circle1" class="circle"></div>
    <div id="circle2" class="circle"></div>
    <div id="circle3" class="circle"><div id="circle4" class="circle"></div></div>
    
    <h2>Spinning Gradient Circle</h2>
    <div id="advanced" class="circle"></div>
    

    http://blog.avtex.com/2012/03/23/friday-fun-create-a-pulsing-circle-with-css-and-jquery/

    $(document).ready(function() {
        //inflate the circle on page load
        circle_inflate();
    });
    //inflates circle 10px, adjusts positioning to match, then calls deflate function
    function circle_inflate() {
        $("#circle").animate( {
            height: 420,
            width:420,
            left:90,
            top:90
        },700,function(){circle_deflate();});
    }
    //deflates circle and positioning back to original, then calls inflate function
    function circle_deflate() {
        $("#circle").animate( {
            height: 400,
            width:400,
            left:100,
            top:100
        },700,function(){circle_inflate();});
    }
    
  • Meetup

    http://make.wordpress.org/events/tag/meetups/


    Notes from podcast:
    http://wpcandy.com/broadcasts/roundtable/003-wordpress-meetup-discussion/#.URovy6XNw0t

    demo/test new WP vers

    10sec intro- 1-2things, why they came.
    Summary
    Day/Time
    Raise Hands
    On point.
    Show & Tell: what you’ve done/doing
    Happiness bar
    http://make.wordpress.org/events/2013/02/05/meetup-best-practices-happiness-bar/

    NASA, WaPo

    Lightning talks

    Bar afterward

    Suggest topic at Meetup.

    User, Dev AND Design

    Meetup Message Board
    FB Group- mod/private, get topcis
    Google Group
    Google Hangout


    Dev> how to talk human

    http://www.meetup.com/MontanaWordpress/

  • email

    http://litmus.com/blog/why-email-designs-break-rendering-guide-infographic/litmus-road-to-rendering-infographic

    http://css-tricks.com/using-css-in-html-emails-the-real-story/

    http://en.wikipedia.org/wiki/Email_service_provider

    http://mailchimp.com/resources/guides/email-marketing-field-guide/

    wayback
    http://www.xavierfrenette.com/articles/css-support-in-webmail/

    http://www.sitepoint.com/text-html-let-users-decide/

    http://kb.mailchimp.com/article/why-bother-with-plain-text-emails

    A Simple HTML Email Boilerplate for Your Email Marketing

    http://coding.smashingmagazine.com/2012/07/13/coding-qa-with-chris-coyier-code-smell-type-grid/

  • MT WordPress Meetup Feb 13 2013

    The first of many Bozeman MT WordPress meet ups is:
    Feb 13 2013, 7pm
    Comma-Q Architecture
    109 N Rouse Ave, #1, Bozeman MT

    We’ll have a wide-ranging roundtable discussion of All Things WordPress: security, storytelling, multimedia and marketing. We’re tailoring this initial gathering for regular WP users (first-time WP folk: you’ll have their day at a future meet). This meetup’s for you is WP powers:

    • Your own site.
    • Your org/company’s site.
    • Your clients’ sites.

    Bring your questions, experienced WP developers will be in da house.

    http://imgs.xkcd.com/comics/tags.png
    http://xkcd.com/1144/

    406-586-1408

    http://commaq.com/cq/wp-content/uploads/2011/02/Comma-Q_Logo_color_on_black.jpg
    144×144

  • Shortcodes

    /* Add code, like iframe, to post via custom field shortcode
    [field name=custom-field-name]
    put code in custom field w/ above name
    http://www.vividvisions.com/2009/02/11/wordpress-add-iframes-to-your-post/
    */
    function field_func($atts) {
       global $post;
       $name = $atts['name'];
       if (empty($name)) return;
    
       return get_post_meta($post->ID, $name, true);
    }
    
    add_shortcode('field', 'field_func');
    
  • Users

    /*******************************
    =USER Custom Fields
    ********************************/
    function tr_add_user_fields( $contactmethods ) {
    	// Add fields to User Profile admin:
    	$contactmethods['user_google'] = 'Google+ URL';
    	$contactmethods['user_facebook'] = 'Facebook URL';
    	$contactmethods['user_twitter'] = 'Twitter URL';
    	return $contactmethods;
    }
    add_filter( 'user_contactmethods', 'tr_add_user_fields', 10, 1);
    
  • Login Page

    /*******************************
    =LOGIN PAGE
    ********************************/
    // On login page, use Transom h1 link background (replacing WordPress logo):
    function tr_login_logo() { ?>
    	<style type="text/css">
            body.login div#login h1 a {
            	background-image: url(<?php echo get_bloginfo( 'template_directory' ) ?>/images/img-logo-transparent-320.png);
            	padding-bottom: 20px;
            }
        </style>
    <?php }
    add_action( 'login_enqueue_scripts', 'tr_login_logo' );
    
    // Transom URL for h1 link href:
    function tr_login_logo_url() {
    	return 'http://transom.org/';
    }
    add_filter( 'login_headerurl', 'tr_login_logo_url' );
    
    
    // Value for h1 link title:
    function tr_login_logo_title() {
    	return 'Transom: Home';
    }
    add_filter( 'login_headertitle', 'tr_login_logo_title' );
    
  • Character Count

    http://wpsnipp.com/index.php/excerpt/add-a-character-counter-to-excerpt-metabox/
    TR

    /* Add character count to Excerpt box */
    function tr_excerpt_char_count()
    { ?>
        <script type="text/javascript">
        jQuery(document).ready(function(){
    		jQuery('#postexcerpt p').append(' <em id="excerpt-char-cnt"></em>');
    	    jQuery('#excerpt').focus(function(){
    	        jQuery('#excerpt-char-cnt').html('Char count: <span>' + jQuery('#excerpt').val().length + '</span>');
    	    });
    	    jQuery('#excerpt').keyup(function(){
    	        jQuery('#excerpt-char-cnt span').html(jQuery('#excerpt').val().length);
    	    });
        });
        </script>
    <?php }
    add_action('admin_footer-post.php', 'tr_excerpt_char_count');
    add_action('admin_footer-post-new.php', 'tr_excerpt_char_count');
    

    http://wpsnipp.com/index.php/excerpt/add-a-character-counter-to-excerpt-metabox/

    function excerpt_count_js(){
          echo '<script>jQuery(document).ready(function(){
    jQuery("#postexcerpt .handlediv").after("<div style=\"position:absolute;top:0px;right:5px;color:#666;\"><small>Excerpt length: </small><input type=\"text\" value=\"0\" maxlength=\"3\" size=\"3\" id=\"excerpt_counter\" readonly=\"\" style=\"background:#fff;\"> <small>character(s).</small></div>");
         jQuery("#excerpt_counter").val(jQuery("#excerpt").val().length);
         jQuery("#excerpt").keyup( function() {
         jQuery("#excerpt_counter").val(jQuery("#excerpt").val().length);
       });
    });</script>';
    }
    add_action( 'admin_head-post.php', 'excerpt_count_js');
    add_action( 'admin_head-post-new.php', 'excerpt_count_js');