OC WordCamp 2015

Join Jarrett Gucci in the Salt Creek Trail room at 3:40 PM for his talk Creating a Blogging Schedule Using The 20/30 Rule.

Jarrett developed a method called the 20/30 Rule to determine how many posts in a time period that a person should write for their blog to help take it to the next level.

The two things that many people say holds them back from blogging more is time and feeling unsure about what topics to cover. Jarrett’s presentation will address how to overcome to time obstacle to blogging.

Nam finibus nec lorem et consectetur. Suspendisse ullamcorper, neque vel blandit lobortis, magna enim ultrices ipsum, vitae iaculis risus eros ut neque. Pellentesque eu pellentesque tellus. In et urna dictum ipsum fermentum vestibulum. Aliquam tempor sapien nisi, vel condimentum lectus vestibulum quis. Aenean ante enim, feugiat ac elementum at, aliquet vitae nibh. Nulla ullamcorper scelerisque orci id sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed molestie nulla et est hendrerit ornare. Suspendisse dignissim metus a tellus vulputate euismod. Ut eu ullamcorper leo, in semper tortor. Pellentesque bibendum ante at sem cursus rutrum. Sed eget accumsan nunc, sed consequat ante. Aenean eleifend vulputate lobortis. Ut nec tortor placerat, consectetur felis in, accumsan ex. Cras orci ex, sagittis sit amet iaculis non, malesuada id purus.

Proin et tristique ipsum, tincidunt posuere dui. Nulla tincidunt ut lectus ac condimentum. Nullam lobortis vehicula ocwc2015vestibulum. Proin bibendum, massa et fermentum scelerisque, nisl lacus pellentesque nulla, vel ultrices tortor neque et quam. Vestibulum augue odio, imperdiet et eleifend ut, rutrum et arcu. Etiam tempus lectus et dapibus egestas. Donec vestibulum in sapien eget iaculis. Donec finibus egestas fermentum. In maximus nulla a enim aliquet placerat. Duis sed pulvinar dui.

first set 574
Find out more!

Quisque laoreet dictum enim, at venenatis risus facilisis tincidunt. Donec blandit lacus vitae neque iaculis, vel finibus felis placerat. Nullam maximus quis metus vitae faucibus. Fusce quis vestibulum nisi. Proin lobortis ligula vitae lorem cursus, sed auctor velit pretium. Aliquam erat volutpat. Ut nunc quam, commodo in lectus ac, luctus fringilla purus. Curabitur id lobortis sapien.

first set 513
first day of school


jQuery Local Scroll flesler’s

The problem: A long list of information on a page. Solving by adding same page anchors, causes page to jump to the top on the screen.

The solution: Using jQuery, the page can elegantly scroll to the position of the desired text without the rest of the page moving, just the targeted content area scrolls.

Here’s how using proper enqueueing, setting up the jQuery function with WordPress in mind, and where to place what where in WordPress:

See it in action on the topics page; second navigation links.

Add the enqueueing either to your page template file (in the header section) or functions file.

found a better way than hard coding the path to the jQuery file that will give the path to the child theme js folder (thanks to Brandon Dove), which uses get_stylesheet_directory_uri()

for parent theme directory use get_template_directory_uri()

function lll_enqueue()
wp_register_script( 'scrollTo.min', get_stylesheet_directory_uri() . '/js/scrollTo.min.js' );
wp_register_script( 'localScroll.min', get_stylesheet_directory_uri() . '/js/localScroll.min.js' );
wp_register_script( 'topic-scroll', get_stylesheet_directory_uri() . '/js/topic-scroll.js' );

wp_enqueue_script( 'scrollTo.min' );
wp_enqueue_script( 'localScroll.min' );
wp_enqueue_script( 'topic-scroll' );

add_action('wp_enqueue_scripts', 'lll_enqueue');

We are using flesler’s jQuery local scroll for the action effect.

go to https://github.com/flesler/jquery.localScroll and get jquery.localScroll.min.js
go to https://github.com/flesler/jquery.scrollTo and get jquery.scrollTo.min.js
save as localScroll.min.js and scrollTo.min.js

Those files do not need to be touched. The file that needs to be created, we will name topic-scroll.js

To create topic-scroll.js, you need the code on flesler’s localScroll page. This snippet right here:


We are creating a js file, specifically topic-scroll.js, and changing out the id’s for the page id’s that we are using: #topic-btns for the navigation area (replaces #navigation) and #topics-col for the content area targeted (replaces #content). We, also, are including settings value for the duration attribute, duration:1000.
Here’s what is on our topic-scroll.js file

 * Handles scrolling for new topic page

 /* using localScroll
  @example $('ul.links').localScroll();
  @example $('ul.links').localScroll({ filter:'.animated', duration:400, axis:'x' });
  @example $.localScroll({ target:'#pane', axis:'xy', queue:true, event:'mouseover' });

  // Many of these defaults, belong to jQuery.ScrollTo, check it's demo for an example of each  option.
	// @see http://demos.flesler.com/jquery/scrollTo/
	// The defaults are public and can be overriden.
	$localScroll.defaults = {
		duration:1000, // How long to animate.
		axis:'y', // Which of top and left should be modified.
		event:'click', // On which event to react.
		stop:true, // Avoid queuing animations
		target: window, // What to scroll (selector or element). The whole window by default.
		reset: true // Used by $.localScroll.hash. If true, elements' scroll is resetted before actual scrolling
		lock:false, // ignore events if already animating
		lazy:false, // if true, links can be added later, and will still work.
		filter:null, // filter some anchors out of the matched elements.
		hash: false // if true, the hash of the selected link, will appear on the address bar.

jQuery(document).ready(function($) {
    target: '#topics-col', duration:1000

The js files follow the path:
generically /wp-content/themes/yourtheme/js

Place .js files in the js folder.

On the page where the action is taking place include anchor id’s to the sections that you’d like the navigation to move to and attach the id to the nav button, a href=’#response’. Also, be sure to name your div id for your navigation, topic-btns, and the area div id that you’d like the movement in, topics-col. I didn’t include the css styling.

<div id="topic-btns">
<ul class="sub2">
	<li><a href="#response">Responsive Web Design |</a></li>
	<li><a href="#type"> Typography |</a></li>
	<li><a href="#ux"> User Experience Design |</a></li>
	<li><a href="#child"> Creating a child theme</a></li>
<ul class="sub2a">
	<li><a href="#content">Creating effective Content Strategy |</a></li>
	<li><a href="#html5"> HTML 5 projects |</a></li>
	<li><a href="#css3"> CSS3 |</a></li>
	<li><a href="#cc"> Chirs Coyier</a></li>
<div id="topics-col">
<div id="response">
<h2>Responsive Web Design</h2>
-mobile layouts</div>
<h2 id="type">Typography</h2>
<h2>UX Principles</h2>
<h2 id="ux">User Experience Design</h2>
	<li>-visual design</li>
	<li>-interaction design</li>
	<li>-information architecture</li>
<h2>What are our favorite websites</h2>
and why do we love them?
A/b testing
<h2>Planning phase</h2>
<h2>Creative process</h2>
	<li>-surviving the creative process</li>
	<li>-how to avoid creative burnout</li>
<h2 id="child">Creating a child theme</h2>
<h2 id="content">Creating effective content strategy for your website</h2>
<h2 id="html5">HTML 5 projects</h2>
<h2 id="css3">CSS3</h2>
<h2 id="cc">Chris Coyier</h2>

CSS3 with Suzette Franck

On April 1st, we had the pleasure of Suzette Franck presenting CSS3 for beginners. We were walked through a world of color, movement, and tricks like how to make rounded corners so easy breezy. Suzette fielded many questions and provided quite an interactive presentation. It is always a treat to have Suzette present. Nominate Suzette for speaking at WordCamp San Francisco 2013

Topics covered included animations, transitions, transformations…

More CSS3 goodies can be found at SuzetteFranck.com/css3

Typography – 3 Featured Fonts

Typography is coming back BIG in 2013. Literally. Be ready to see new BIG size type styles featured on pages throughout the web. Googlefonts has made it easier than ever to add a different font style than the standard 5. Although, I still love me my Verdana. So let’s go over some different typography available today, ready and waiting to be placed on a site right now.

The first contender on the Typography is Oswald.  It makes me nostalgic. Brings me back to what I imagine California was like in the ’50s before traffic and southern California was considered farmland with Tinseltown thrown in. I want to buy some popcorn and go to the movies to see Gone with the Wind or some other classic, Breakfast at Tiffany’s.


Oswald buddies:




Next up in our featured font extravaganza is the uplifting font Oxygen. Oxygen is perfect for parties, happy events and premiers. It spills excitement and fun. This is an exciting font!


Great Oxygen pairings:



The next font on our magical journey is…Marcellus SC
Marcellus SC is good for making a point. Want to get something important across to your audience, use Marcellus SC. Strong and to the point, just like writing should be.


Goes good with…





Stay tuned for our next installation on Typography.

List links of Posts determined by Category

– Hijack The Loop, Drop in Plugin, Call with Short Code

The Problem: I want to list just my last 5 happenings blog posts in a widget on my homepage. I, currently, have a blog page with all my posts ever and I have a widget that will list with links, my five recent posts. What I want to have is an easy way to call just a few recent blog posts of a certain category, happenings in this case, to show up as a list of links to the blog post.

The solution:

like the following post link list by category dev
***************Short Code Example in Action***********************

***********End of Short Code Example in Action********************

How it’s done

Create a plugin file named: my_cat_list_query/my_cat_list_query.php
The following code was placed into a folder, called my_cat_list_query, that is placed in the plugins folder /public_html/wp-content/plugins
*be sure to activate plugin in the Admin, once installed.
shortcode is called by placing brackets around ->
others_cat_list category_name=whatever the category slug name is
similar to this [others category=Headlines]
Here’s what was dropped into plugin file, my_cat_list_query/my_cat_list_query.php:

Plugin Name: WordPress Meetup OC Demos category_name list query
Description: Some demos for Meetup
Version: 1.0
Author: mitcho tweaked by eshilling
Author URI: http://mitcho.com

 add_shortcode('others_cat_list', 'get_other_cat_list_posts');
 function get_other_cat_list_posts($attributes) {
   $return = '';
   $category_name = $attributes['category_name'];
   $my_query = new WP_Query(array('category_name'=>$category_name));
   if ( $my_query->have_posts() ) {
      $return .= "<ul>";
      while ( $my_query->have_posts() ) {
	$return .= "<li><a href='";
	$return .= get_permalink();
	$return .= "'>";
	$return .= get_the_title();
	$return .= "</a>";
	$return .= "</li>";
/* Restore original Post Data 
 * NB: Because we are using new WP_Query we aren't stomping on the 
 * original $wp_query and it does not need to be reset.
	$return .= "</ul>";
     return $return;

Can switch from using the category to determine how posts will be called, by changing out category_name with different parameter