I am creating a WordPress theme using BEM methodology for public release. To implement BEM methodology, I am removing/modifying some default WordPress templates and classes. For example, to implement BEM methodology in post comment list, I have created custom walker class:
<?php
// Walker class used to create an HTML list of comments.
class BEM_Walker_Comment extends Walker_Comment {
// Starts the list before the elements are added.
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$GLOBALS['comment_depth'] = $depth + 1;
$output .= '<ol class="comment__children">' . "\n";
}
// Ends the list of items after the elements are added.
public function end_lvl( &$output, $depth = 0, $args = array() ) {
$GLOBALS['comment_depth'] = $depth + 1;
$output .= "</ol>\n";
}
// Starts the element output.
public function start_el( &$output, $comment, $depth = 0, $args = array(), $id = 0 ) {
$depth++;
$GLOBALS['comment_depth'] = $depth;
$GLOBALS['comment'] = $comment;
if ( ! empty( $args['callback'] ) ) {
ob_start();
call_user_func( $args['callback'], $comment, $args, $depth );
$output .= ob_get_clean();
return;
}
if ( ( 'pingback' === $comment->comment_type || 'trackback' === $comment->comment_type ) && $args['short_ping'] ) {
ob_start();
$this->ping( $comment, $depth, $args );
$output .= ob_get_clean();
} else {
ob_start();
$this->html5_comment( $comment, $depth, $args );
$output .= ob_get_clean();
}
}
// Ends the element output, if needed.
public function end_el( &$output, $comment, $depth = 0, $args = array() ) {
if ( ! empty( $args['end-callback'] ) ) {
ob_start();
call_user_func( $args['end-callback'], $comment, $args, $depth );
$output .= ob_get_clean();
return;
}
$output .= "</li>\n";
}
// Outputs a comment in the HTML5 format.
protected function html5_comment( $comment, $depth, $args ) {
?>
<li <?php $this->comment_class( $this->has_children ? 'comment__parent' : '', $comment ); ?>>
<article class="comment__body">
<footer class="comment__meta">
<div class="comment__author">
<?php
if ( 0 !== $args['avatar_size'] ) {
echo get_avatar( $comment, $args['avatar_size'] );
}
$url = get_comment_author_url( $comment );
$author = get_comment_author( $comment );
if ( empty( $url ) || 'http://' === $url ) {
$author_name = $author;
} else {
$author_name = '<a class="comment__author-url" href="' . esc_url( $url ) . '" rel="external nofollow">' . esc_html( $author ) . '</a>';
}
printf( '<b class="comment__author-name">%s</b>', $author_name );
?>
</div>
<div class="comment-metadata">
<a href="<?php echo esc_url( get_comment_link( $comment, $args ) ); ?>">
<time datetime="<?php comment_time( 'c' ); ?>">
<?php printf( __( '%1$s at %2$s', 'runway' ), get_comment_date( '', $comment ), get_comment_time() ); ?>
</time>
</a>
<?php edit_comment_link( __( 'Edit', 'runway' ), '<span class="comment__edit">', '</span>' ); ?>
</div>
<?php if ( '0' === $comment->comment_approved ) : ?>
<p class="comment-awaiting-moderation"><?php esc_html_e( 'Your comment is awaiting moderation.', 'runway' ); ?></p>
<?php endif; ?>
</footer>
<div class="comment__content">
<?php comment_text(); ?>
</div>
<?php
comment_reply_link( array_merge( $args, array(
'add_below' => 'div-comment',
'depth' => $depth,
'max_depth' => $args['max_depth'],
'before' => '<div class="comment__reply">',
'after' => '</div>',
) ) );
?>
</article>
<?php
}
// Generates semantic classes for each comment element.
protected function comment_class( $class = '', $comment = null, $post_id = null, $echo = true ) {
$classes = join( ' ', get_comment_class( $class, $comment, $post_id ) );
$classes = str_replace( ' byuser', ' comment--by-user', $classes );
$classes = str_replace( ' comment-author-',' comment--author-', $classes );
$classes = str_replace( ' bypostauthor', ' comment--by-post-author', $classes );
$classes = str_replace( ' odd', ' comment--odd', $classes );
$classes = str_replace( ' alt', ' comment--alt', $classes );
$classes = str_replace( ' even', ' comment--even', $classes );
$classes = str_replace( ' thread-odd', ' comment--thread-odd', $classes );
$classes = str_replace( ' thread-alt', ' comment--thread-alt', $classes );
$classes = str_replace( ' thread-even', ' comment--thread-even', $classes );
$classes = str_replace( ' depth-', ' comment--depth-', $classes );
// Separates classes with a single space, collates classes for comment DIV.
$class = 'class="' . $classes . '"';
if ( $echo ) {
echo $class;
} else {
return $class;
}
}
} // BEM_Walker_Comment class
?>
Similarly, I have also created walker class for Navigation menu, and modified comment form to implement BEM methodology.
But is it safe to remove/modify default WordPress classes and templates?
But is it safe to remove/modify default WordPress classes and templates?
Yes!
I use BEM for my WordPress templates and I remove all the original CSS classes from WordPress. The only things we need to keep are:
id="s" for the search field;
Several elements in the comments, including the id="com-{commentId}" on comment items, it is used by a JS helper from WordPress to move the "reply" field.
I have made a function in functions.php which lists items of current categories in the category page. This is the PHP code:
<?php
class trueTopPostsWidget extends WP_Widget {
/*
* создание виджета
*/
function __construct() {
parent::__construct(
'true_top_widget',
'SideBarCategories', // заголовок виджета
array( 'description' => 'Desc' ) // описание
);
}
/*
* фронтэнд виджета
*/
public function widget( $args, $instance ) {
echo $args['before_widget'];
global $wp_query;
$cat_obj = $wp_query->get_queried_object();
if($cat_obj) {
$category_name = $cat_obj->name;
$category_ID = $cat_obj->term_id;
}
function woocommerce_subcats_from_parentcat_by_ID($parent_cat_ID) {
$params = array(
'hierarchical' => 1,
'show_option_none' => '',
'hide_empty' => $temp,
'parent' => $parent_cat_ID,
'taxonomy' => 'product_cat'
);
$subcats = get_categories($params);
$c = count($subcats);
if ($c>0):?>
<div style="margin-top:20%;">
<h2>Категории товаров</h2>
</div>
<?php endif; echo '<ul class="wooc_sclist">';
foreach ($subcats as $sc) {
$link = get_term_link( $sc->slug, $sc->taxonomy );
echo '<li>'.$sc->name.'</li>';
}
echo '</ul>';
}
woocommerce_subcats_from_parentcat_by_ID($category_ID);
echo $c;
echo $args['after_widget'];
}
/*
* бэкэнд виджета
*/
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>">Заголовок</label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php
}
/*
* сохранение настроек виджета
*/
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
}
/*
* регистрация виджета
*/
function true_top_posts_widget_load() {
register_widget( 'trueTopPostsWidget' );
}
add_action( 'widgets_init', 'true_top_posts_widget_load' );
?>
But I have faced with a problem. I don't want to list categories in the single product page. Now I can see all categories in this page. And it isn't satisfied to my conditions. How can I fix it?
I have solved so:
<div class="unit-30">
<div class="blok">
<?php /* Widgetized sidebar */
$actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$look_for = "tovar";
$pos = strpos($actual_link,$look_for);
if ($pos==null)
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Сайтбар woocommerce') ) : ?>
<?php endif; ?>
</div>
</div>
I have some code which will feed through the ten most recent Wordpress blog posts through to my own non-Wordpress site. Is there any way to display the featured image assigned to a blog post? I have successfully echoed the blog title, date and body.
<?php
global $text, $maxchar, $end;
function substrwords($text, $maxchar, $end='...') {
if (strlen($text) > $maxchar || $text == '') {
$words = preg_split('/\s/', $text);
$output = '';
$i = 0;
while (1) {
$length = strlen($output)+strlen($words[$i]);
if ($length > $maxchar) {
break;
} else {
$output .= " " . $words[$i];
++$i;
}
}
$output .= $end;
} else {
$output = $text;
}
return $output;
}
$rss = new DOMDocument();
$rss->load('http://myblog.wordpress.com/rss/'); // <-- Change feed to your site
$feed = array();
foreach ($rss->getElementsByTagName('item') as $node) {
$item = array (
'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue,
);
array_push($feed, $item);
}
$limit = 10; // <-- Change the number of posts shown
for ($x=0; $x<$limit; $x++) {
$title = str_replace(' & ', ' & ', $feed[$x]['title']);
$link = $feed[$x]['link'];
$description = $feed[$x]['desc'];
$description = substrwords($description, 400);
$date = date('l F d, Y', strtotime($feed[$x]['date']));
echo '<div style="margin-bottom:25px;">';
echo '<h3><strong><a style="color: #139035;" href="'.$link.'" title="'.$title.'" target="_blank">'.$title.'</a></strong></h3>';
echo '<p><small><em>Posted on '.$date.'</em></small></p>';
echo '<p>'.$description.'</p>';
echo '<span> <strong><a target="_blank" style="color: #139035;" href="'.$link.'" title="'.$title.'">Read blog ></span></strong>';
echo '</div>';
}
?>
You can use following code to add featured image into your RSS
function img_in_rss($content) {
global $post;
if ( has_post_thumbnail( $post->ID ) ){
$content = get_the_post_thumbnail( $post->ID, 'medium') . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'img_in_rss');
add_filter('the_content_feed', 'img_in_rss');
I was wondering if you could help me display a taxonomies child links, for example, I have a custom post type of "courses" with a custom taxonomy of "study_type" and categories like "security", "professional" etc. Currently I am correctly displaying the category title and description. I need to know how to get a permalink for the courses that fall into the categories and display them underneath the category description. Thanks for any help or advice you have to offer. Here is me code:
<?php
//list terms in taxonomy
$types[0] = 'study_type';
foreach ($types as $type) {
$taxonomy = $type;
$terms = get_terms( $taxonomy, '' );
if ($terms) {
foreach($terms as $term) {
echo '<h2>'.$term->name.'</h2>';
echo '<p>' . $term->description . '</p>';
//This is where the links should be
}
}
}
?>
use get_term_children
<?php
//list terms in taxonomy
$types[0] = 'study_type';
foreach ($types as $type) {
$terms = get_terms( $type, '' );
if ($terms) {
foreach($terms as $term) {
echo '<h2>'.$term->name.'</h2>';
echo '<p>' . $term->description . '</p>';
//This is where the links should be
$termchildren = get_term_children( $term->term_id, $type );
if($termchildren){
echo '<ul>';
foreach ( $termchildren as $child ) {
$term = get_term_by( 'id', $child, $taxonomy_name );
echo '<li>' . $term->name . '</li>';
}
echo '</ul>';
}
}
}
} ?>
I'm back struggling with some more coding :(
I have written a custom PHP page to loop through a custom post type. Now what I want is to list the custom posts categories, and have each category link to the same page but pass the category to the query_posts() function.
My code is currently
<div id="left" style="float:left;width:200px">
<b>Categories</b><br><br>
<?php wp_list_categories( $args ); ?>
</div> <!-- end of left container -->
<div id="middle" style="float:left;width:700px">
<?php
$args = array(
'post_type'=> 'e-books',
'showposts' => '-1',
'eCats' => $cat,
'order' => 'ASC'
);
query_posts( $args );
where
$cat = $_GET['cat']
What I want is each link from the wp_list_categories() to be something like.
http://example.com/products.php?cat=fiction
Is this possible? I can't get my head around the Walker class :( I've got this far
class MyWalker extends Walker_Category {
function start_el(&$output, $category, $depth, $args) {
extract($args);
$cat_name = esc_attr( $category->name );
$cat_name = apply_filters( 'list_cats', $cat_name, $category );
$link = '<a href="products.php?cat="';
$link .= $cat_name;
$link .= '>';
$link .= $cat_name . '</a>';
if ( 'list' == $args['style'] ) {
$output .= "\t<li";
$class = 'cat-item cat-item-' . $category->term_id;
if ( !empty($current_category) ) {
$_current_category = get_term( $current_category, $category->taxonomy );
if ( $category->term_id == $current_category )
$class .= ' current-cat';
elseif ( $category->term_id == $_current_category->parent )
$class .= ' current-cat-parent';
}
$output .= ' class="' . $class . '"';
$output .= ">$link\n";
} else {
$output .= "\t$link<br />\n";
}
}
}
but the links aren't completing - they are showing as
?cat=
For listing category with the custom taxonomy :
You can you following code:
$catnames = get_terms( 'custom taxonomy name');
Then use foreach loop to disply the category.