Menu items – featured images / thumbnails / image placeholder (if any)
Note: many display options are also available by simply using the relevant shortcode attributes or setting options in WPPizza -> Layout instead of using filters
CSS Targeting
-
element ID:
#wppizza-article-img-[post_id]
-
element class:
.wppizza-article-image
-
Use your browsers element inspector to identify all classes and id’s
if you simply want to edit some styles/layout (text-sizes, color, margins, paddings etc etc ) it is strongly recommended to use css instead of filters/actions. Please refer to Modify Styles/Layout
Structure
/* featured images */
<div>
<img src='path/to/image' />
</div>
/* placeholder image (uses css to display placeholder) */
<div>
<div>[empty]</div>
</div>
Filters available
apply filters by adding them to your child-theme’s functions.php (notes regarding functions.php).
-
filter name:
wppizza_filter_post_thumbnail_class
purpose: modify classes used
@param: $classes array (array of classes used in wrapper div)
@param: $post_data array (array of post_data)
@return: array
examples:
add_filter('wppizza_filter_post_thumbnail_class', 'prefix_filter_post_thumbnail_class', 10 ,2);
function prefix_filter_post_thumbnail_class($classes, $post_data){
/* adding your own class name */
$classes[] ='my-class';
return $classes;
}
-
filter name:
wppizza_filter_post_title_markup
purpose: modify output of element
@param: $markup array (array of markup elements)
@param: $style string (style used – default|responsive|grid)
@param: $has_thumbnail bool (true|false)
@param: $has_placeholder bool (true|false)
@return: array
examples:
add_filter('wppizza_filter_post_thumbnail_markup', 'prefix_filter_post_thumbnail_markup', 10 ,4);
function prefix_filter_post_thumbnail_markup($markup, $style, $has_thumbnail, $has_placeholder){
/*
notes:
use print_r($markup) to view markup array keys with their respective markup
use print_r($style) to view style used ( default|responsive|grid )
use print_r($has_thumbnail) to find out if post should display thumbnail
use print_r($has_placeholder) to find out if post should display placeholder
use global $wppizza_options; to access all options/settings/localization strings etc set in the plugin
*/
/* example: adding a paragraph AFTER all elements */
$markup['my_new_markup'] = '<p>more text after</p>';
/* example: adding a paragraph BEFORE all elements */
$new_markup = array();
$new_markup['my_new_markup'] = '<p>more text before</p>';
$new_markup += $markup; # add original markup after
return $new_markup ; # return new markup
/* example: adding a another paragraph BEFORE element using helper function*/
$splice_before['my_new_markup'] = '<p>more text before</p>';
$markup = wppizza_array_splice($markup, $splice_before, 'post_thumbnail_', true );
/* example: adding a another paragraph AFTER element using helper function*/
$splice_after['my_new_markup'] = '<p>more text after</p>';
$markup = wppizza_array_splice($markup, $splice_after, '_post_thumbnail');
/* example: using actions of another plugin that by default outputs html to add it after all elements */
ob_start(); # start buffering
do_action('other_plugin_output'); # run action of other plugin that outputs things
$buffer= ob_get_contents(); # capture buffer in variable
ob_end_clean(); # clean buffer
$markup['my_new_markup'] = $buffer; # add buffered output
return $markup;
}
Actions available
Editing files directly
ensure you have also read the Modify/Edit Templates
basepath: [plugin-path]/wppizza/templates/markup
filepath: [plugin-path]/wppizza/templates/markup/loop/posts.thumbnail.php
Modules used in file
Module used by other template file(s)