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

Child Theme as Important as Coffee

Child Themes make it so you can change your parent theme to your heart’s content without concern of any update coming along and wiping the floor to your design. Hours of work gone in a click with the only way to get it back is to dig into your backups. Save the hassle by including a child theme. Theme updates are no problem and updates are mandatory in today’s security attacks; updates are at times patches just so you’re theme won’t be hacked. So if you haven’t already, child up. You’ll be glad that you did.

Creating a child theme

Our very own talented Sarah Wefald presented on child themes here at OCWP Design. Check out her presentation! Get to know more about Sarah’s mad skillz.

Twenty Thirteen demo

http://twentythirteendemo.wordpress.com/
Post formats bring color and the opportunity for design. Time to start thinking about gradients of gray and CSS3 background designs.
The post formatting extends from side to side, the entire post and site. On a mobile device, this can pack quite a punch. With a larger view, the post formats add drama and life to breaking up the typical blog archive norm.

P.S. Break away from orange, try yellow perhaps!

1 2