Designing for Wordpress

Practical tips and snippets for visual designers and developers

September 13th, 2014

  • Dennis Gaebel
  • Design Technologist™
  • Open Source Maker
  • WordPress User
  • Buffalo, NY Resident
  • Born in Rochester, NY
  • Guitar Player
  • Fly Fisherman

Speaker Facts

•  Previously a front-end developer @Mode.

    Currently freelancing under Gray Ghost Visuals

    and writing for Web Design Weekly.

SNippets

wordpress

SNippet #1


<?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 style="background-image: url('<?php echo $image; ?>')"></div>
<?php endif; ?>

Feature image as a background for single entry posts

SNIPPET #1 Extended

Feature Thumb Linked to Large Thumb

<?php
  // Place inside you post loop 
  if ( has_post_thumbnail() ) {
    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
    echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute( 'echo=0' ) . '" >';
    echo get_the_post_thumbnail( $post->ID, 'thumbnail' );
    echo '</a>';
  }
?>

<?php echo get_the_post_thumbnail('2387'); ?>

…or grab feature img by post id

SNippet #2

<!-- Place in post loop. -->
<!-- Module markup is imported from 'inc' directory. -->
<?php get_template_part( 'inc/profile' ); ?>

<!-- Profile Module Markup -->
<?php if ( get_the_author_meta('ID') ) : ?>
<div class="profile">
  <div class="profile__avatar">
    <?php echo get_avatar( get_the_author_meta('ID'), 180 ); ?>
  </div>

  <div class="profile__meta">
    <h3 class="profile-name"><?php the_author(); ?></h3>

    <?php if ( get_the_author_meta('description') ) : ?>
    <div class="profile-desc">
      <?php the_author_meta('description'); ?>
    </div>
    <?php endif; ?>

  </div>
</div>
<?php endif; ?>

Displaying Author Meta for Posts

Codex: Author Meta

Profile Screen (author meta)

SNIPPET #2 Extended!

Custom Author Links


<?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 ) {

  $author_social_link['rss_url'] = 'RSS URL';
  $author_social_link['google_profile'] = 'Google Profile URL';
  $author_social_link['twitter_profile'] = 'Twitter Profile URL';
  $author_social_link['facebook_profile'] = 'Facebook Profile URL';
  $author_social_link['linkedin_profile'] = 'Linkedin Profile URL';

  return $author_social_link;
}

add_filter( 'user_contactmethods', 'custom_author_links', 10, 1);
?>

Codeshare: Full Code Snippet

Profile Screen (Custom author meta Links)

SNippet #3

<?php
  function my_login_css() {
    echo '<link rel="stylesheet" href="' .
          get_template_directory_uri() .
          '/css/wp-login.css">';
  }

  add_action('login_head', 'my_login_css');
?>

Custom Admin Login

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

wP PLugin Directory

Admin Stylur logout screen

SNippet #4

<?php
  // 'functions.php' call
  register_nav_menus( array(
    'primary'     => 'Primary Menu',
    'footer_menu' => 'My Custom Footer Menu'
  ));
?>

<?php
  // Custom Nav Placement
  // @since 1.0.7
  //
  // Place this snippet anywhere in your theme to
  // display a custom navigation menu.
  // If you'd like, this function can be called from 'functions.php'
  // and the call can be placed anywhere in your templates.

  function wpflex_custom_nav() {
    if ( has_nav_menu( 'footer_menu' ) ) :
      wp_nav_menu(array(
        'container'       => '',
        'container_class' => '',
        'theme_location'  => '$location',
        'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>'
      ));
    endif;
  }

  // Display Your Custom Nav
  wpflex_custom_nav();
?>

Custom Secondary Navigation

SNIPPET #5

Custom admin Footer


<?php
/**
 * function my_admin_footer
 * Rewrite the text in the bottom-left footer area
 *
 * @since 1.0
 */
function my_admin_footer() {
  echo 'Built by <a href="#">My Company Name</a> with <a href="http://wordpress.org">WordPress</a>.
      • <a href="' . admin_url('freedoms.php') . '">Freedoms</a>
      • <a href="' . admin_url('credits.php') . '">Credits</a>';
}
add_filter('admin_footer_text', 'my_admin_footer');
?>

Snippet via WP Custom Admin on GitHub

SNIPPET #6

Custom avatar


<?php
// Custom avatar for Settings > Discussion.
// Place inside your 'functions.php' file.
function custom_avatar($avatar_defaults) {
  $myavatar = get_bloginfo('template_directory') . '/img/custom-avatar.png';
  $avatar_defaults[$myavatar] = "Adorable Creature";
  return $avatar_defaults;
}

add_filter( 'avatar_defaults', 'custom_avatar' );
?>

 

plugin

WordPress

directory

WE Shall Put It On The FRidge!

Asset

1. Banner
2. Icon
3. Screenshots

Name & location

1. assets/banner-[<772x250,1544x500>][.<png,jpg>]
2. assets/icon[-<128x128,256x256>][.<svg,png>]
3. assets/screenshot-[<1,2,3...>][.<png,jpg>]

PLugin Icons! SVG SUpported!

icon.svg
icon-128x128.png

plugin search via admin dashboard

plugin search via wordpress.org

Grab The PSD Template

Plugin Directory Banner & Icon Templates 

Includes :

Previous WordCamps

So Long

   ©redit

Thanks and such

Designing for WordPress

By Gray Ghost Visuals

Designing for WordPress

Practical tips and snippets for visual designers and developers.

  • 1,075

More from Gray Ghost Visuals