Dev

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()

 /*flesher*/
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:

$('#navigation').localScroll({
   target:'#content'
});

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($) {
		$('#topic-btns').localScroll({
    target: '#topics-col', duration:1000
					});
});


The js files follow the path:
/WordPressNotes/wp-content/themes/pilotfishchild/js
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.

</pre>
<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>
<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>
</ul>
</div>
<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>
<ul>
	<li>-visual design</li>
	<li>-interaction design</li>
	<li>-information architecture</li>
	<li>-development</li>
	<li>-technology</li>
	<li>-content/media</li>
</ul>
<h2>What are our favorite websites</h2>
and why do we love them?
<h2>Conversion</h2>
A/b testing
********
<h2>Planning phase</h2>
<h2>Creative process</h2>
<ul>
	<li>-surviving the creative process</li>
	<li>-how to avoid creative burnout</li>
</ul>
<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>
...</div>
<pre>

5 Recent Posts Title & Excerpts determined by Category

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

The Problem: I want to show just my 5 recent design blog post excerpts on my design page. 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 (and the other query short code recently made to call a list of posts). What I want to have is an easy way to call just a few recent blog posts of a certain category, design in this case, to show up as a post title and excerpt with a link to the blog post.

The solution:
like the following 5 recent posts title & excerpt by category dev:
***************Short Code Example in Action***********************


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, … Continue Reading


5 Recent Posts Title & Excerpts determined by Category

– Hijack The Loop, Drop in Plugin, Call with Short Code The Problem: I want to show just my 5 recent design blog post excerpts on my design page. 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 (and the other query short code … Continue Reading


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 … Continue Reading


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

What we are going to do hijack ‘The Loop’ How create a wp_query object modify loop drop it into a plugin call it with a shortcode passing parameters ******* This is classic information of how to pull certain posts onto certain pages using the best practices. First, The Loop will be covered, which is the powerhouse of your WordPress site. … Continue Reading


Parallax Scrolling

Notice the long one page sites that move like 3 dimensions sliding by that magnetically draws you in? Parallax scroll, it’s around big time. Nike has one of the best known sites using it. It’s eye catching, really. Parallax scrolling is being used in a big way and for the right site it can have an effective impact. Mainly, parallax … Continue Reading


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

How it’s done

create plugin file: my_cat_query/shortcode_for_my_query_custom_loop_cat.php
placed into a folder 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 category_name=whatever the category slug name is
(change ‘whatever the category slug name is’ out)
similar to this [others category=Headlines]
Headlines is the category slug name.
Here’s what is dropped into plugin file:

<?php
/*Plugin Name: WordPress Meetup OC Demos category_name query
Description: Some demos for Meetup post by category formatted heavy
Version: 1.0
Author: mitcho tweaked by eshilling
Author URI: http://mitcho.com
*/

add_shortcode('others_cat', 'get_other_cat_posts');
function get_other_cat_posts($attributes)
{   $return = '';
$category_name = $attributes['category_name'];
$my_cat_query = new WP_Query(array('category_name'=>$category_name));
if ( $my_cat_query->have_posts() ) {
$return .= "<p>";
while ( $my_cat_query->have_posts()  && ($post_count < 5) ) {
$my_cat_query->the_post();
$post_count++;
$return .= "<p></p>";
$return .= get_the_post_thumbnail();
$return .= "</p><br />";
$return .= "<a class='post_cat_exc_title' href='";
	$return .= get_permalink();
	$return .= "'>";
        $return .= get_the_title();
		$return .= "</a>";
        $return .= "<br /><div style=\"margin:auto;\"><p>";
		$return .= get_the_excerpt();       }
		$return .= "</p></div>";     }
		return $return;

		}
		?>

Can change the number of post excerpts shown by changing: $post_count < 5 or to show all post excerpts from a certain category remove && ($post_count < 5) Image will show up too by adding a featured image to the post Can switch from using the category to determine how posts will be called, by changing out category_name with different parameter http://codex.wordpress.org/Class_Reference/WP_Query

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:

<?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() ) {
	$my_query->the_post();
	$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
http://codex.wordpress.org/Class_Reference/WP_Query

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

What we are going to do

hijack ‘The Loop’
How create a wp_query object
modify loop
drop it into a plugin
call it with a shortcode passing parameters

***********************
This is classic information of how to pull certain posts onto certain pages using the best practices. First, The Loop will be covered, which is the powerhouse of your WordPress site. Next, WP_Query will be introduced, which is the cleanest way to pull information from your WordPress database. Then the code/query function will be setup with a short code in a plugin. Lastly, the short code will be provided that can be easily used to pull the posts of the desired tag (for this example).

Mitcho presenting The Loop @WCBoston 2010

These are notes from Mitcho’s presentation:

loop basics

post are called from the database
code loops through the posts to find the match

//if there are posts
if (have posts()) :
//while there are posts
*while (have_posts()) :
//get the post
//do stuff with it, calls the Template_Tags
*the_post(); //<-sets up the post
*the_content();
*endwhile;
endif;
get sidebar();
get footer();

Every theme’s php files are built on this basic structure

The Loop is where you can use Template Tags
codex.wordpress.org/Template_Tags

Where do get posts come from???

Every Loop has a query —template file and query based on your URL
codex.wordpress.org/Template_Hierarchy
/archive/123 -> single post
/archives -> archive (10 past posts)
/tag/chicken -> all chicken articles

Customizing the Loop

query controls what info is presented.

Custom queries

possible applications
*Create custom feed/displays
ephramzerb.com/projects/feed-wrangler/ //^custom feeds based on a query
*Pull information on other posts
from within the theme’s loop

Roll your own query

ex: pull information on other posts from the theme’s Loop
Display other posts with a specific criteria, like a tag
Wrap it up in a shortcode
The idea Create a new WP_Query object
given a $tag
new WP_Query(array(‘tag’=>$tag))
call/name it $my_query
Create s Loop for $my_query
Do stuff in it ‘display the title’
Make your own loop-make sure the loop controller are using
$my_query, not the default ($wp_query)

if ($my_query->have_posts()) :
while ($my_query->have_posts()) :
$my_query->the_post();
the_content();
endwhile;
endif;

Andrew Nacin WP_Query

@ WC Portland 2011
*”The Loop”
Every query object has its own methods isauthor(), has conditional tags about what the query is actually trying to fetch

when loading a WP site, by the time we get to the theme, we have all the posts fetching all the post and then fetch them again; WP_Query all ready runs 4 more queries (fetch all the posts, figure out how many post total exists, all metadata, all metadata keys in one shot, all terms for all posts for all taxonomies queried in one shot) (query posts more queries) Better for performance.

/*can filter in the main query
paging will be handled*/

back to Mitcho-

The Code

The result (setting it up as a short code):

 add_shortcode('others', 'get_other_posts');
 function get_other_posts($attributes) {
   $return = '';
   $tag = $attributes['tag'];
   $my_query = new WP_Query(array('tag'=>$tag));
   if ( $my_query->have_posts() ) {
      $return .= "<ul>";
      while ( $my_query->have_posts() ) {
	$my_query->the_post();
	$return .= "<li>";
	$return .= get_the_title();
	$return .= "</li>";
	$return .= "<li>";
	$return .= get_the_content();
	$return .= "</li>";
       }
	$return .= "</ul>";
     }
     return $return;
    }

packaged in a plugin

short code to call posts tag ubiquity:
[others tag=ubiquity]

to pull posts tagged as Headlines:
[others tag=Headlines]

codex.wordpress.org/Template_Tags/query_posts

More about WP_Query

http://codex.wordpress.org/Class_Reference/WP_Query

Filter every query

customize what information is displayed globally
hide all my tweets
(if to style them with a feed)
Use request filter to specify that we don’t want results from the “tweet” category #10 (have to use cat id)
The result (gets added to the bottom of the plugin file:

add_filter('request', 'request_filter');
function request_filter($request) {
  $request['cat'] = '-10'; //tweets are category 10
  return $request;
}

note meta

see it for where it’s defined
core.trac.wordpress.org

don’t forget to activate the plugin, once installed.

references

http://codex.wordpress.org/The_Loop
http://codex.wordpress.org/Class_Reference/WP_Query
http://codex.wordpress.org/Class_Reference/WP_Query#Custom_Field_Parameters
http://codex.wordpress.org/Class_Reference/WP_Query#Parameters
****http://codex.wordpress.org/Function_Reference

http://wp.smashingmagazine.com/2013/01/14/using-wp_query-wordpress/

http://codex.wordpress.org/Post_Type_Templates#Displaying_Custom_Taxonomies
http://codex.wordpress.org/Shortcode_API
http://wordpress.org/support/topic/custom-query-for-category-and-tag
http://www.wprecipes.com/wordpress-function-get-category-id-using-category-name
http://wordpress.org/support/topic/query-posts-then-put-into-array

http://codex.wordpress.org/Posts
http://codex.wordpress.org/Post_Thumbnails

http://core.trac.wordpress.org/browser/tags/3.5.1/wp-includes/post-template.php#L0

http://wp.smashingmagazine.com/2012/11/08/complete-guide-custom-post-types/

site files tested on

local environment http://whiterabbit.loc/?page_id=83
http://peaceoftheocean.com/WordPressNotes/design/
shortcode placed on pages
plugins activated
plugins added

http://peaceoftheocean.com/WordPressNotes
category happenings

Parallax Scrolling

Notice the long one page sites that move like 3 dimensions sliding by that magnetically draws you in? Parallax scroll, it’s around big time. Nike has one of the best known sites using it. It’s eye catching, really.

Parallax scrolling is being used in a big way and for the right site it can have an effective impact. Mainly, parallax scroll will be used to give a subtle effect to the page, to draw the user into the site. Parallax scroll used right, draws a person into the site.

Parallax scroll can be just down right cool. Don’t believe it? Just check out joelb.me/scrollpath. Get the code at github.com/JoelBesada/scrollpath

Need to do some parallax scroll soon? Check these resources from Smashing Hub 7 jquery parallax scrolling effects.

music to code by

Dark Side of The Moon Pink Floyd
Legendary – Rick Ross
The Rise and Fall of Ziggy Stardust – David Bowie
Stading on a Beach – The Cure
Substance – New Order
Madonna – Madonna
The Irresistible Force – Flying High
The Future Sound of London – LifeForms
Miles Davis – Kind of Blue
John Coltrane – Giant Steps
get the source