picandocodigo / List-Category-Posts

WordPress plugin which allows you to list posts from a category into a post/page using the [catlist] shortcode.
http://wordpress.org/extend/plugins/list-category-posts/
GNU General Public License v2.0
241 stars 112 forks source link

Put the link of the posts inside the select id tag #494

Closed mahsunseven closed 1 year ago

mahsunseven commented 1 year ago

I want to display the posts in each category as below


How can I do this?
[https://i.stack.imgur.com/1zEkF.jpg](url)
klemens-st commented 1 year ago

This can be achieved esily using a custom template.

mahsunseven commented 1 year ago

I created a php file in the templates folder and replaced the select and option codes with ul and li And I used this variable to display it : [catlist id=1 template=mydefault]

But it doesn't work for me The codes in the mydefault.php file:

<?php
/* List category posts template for displaying posts indexed by child categories.
 *
 * Based on https://gist.github.com/klemens-st/e46ae830e42fb7a200306cfaa87ba18a
 *
 * Most of the code is self-explanatory. The elements specific to this template
 * you might want to customize are:
 * - line 93: sorts the array of child categories (not the posts themselves) alphabetically
 * - line 95: the html of child categories' sub-headings
 *
 * In order for this template to work as expected you must use
 * a shortcode with only one category specified, this category must be
 * the parent category of the child categories you want to list. Example:
 *
 * [catlist name="My Parent Category" template=child-categories]
 *
 * Additionally, it will only work if the posts have only one category and it is
 * a child category of the parent specified in the shortcode. Feel free to expand
 * the code to make it more versatile.
 */

// Parent category id.
$parent_id = intval( $this->catlist->get_category_id() );

//This is the string which will gather all the information.
$lcp_display_output = '';
// Show category link:
$lcp_display_output .= $this->get_category_link('strong');
// Show the conditional title:
$lcp_display_output .= $this->get_conditional_title();
//Add 'starting' tag.
$lcp_display_output .= $this->open_outer_tag('div', 'lcp_catlist');
// An array with post strings indexed by Child category.
$index = [];

global $post;
while ( have_posts() ):
  the_post();

  $category = get_the_category()[0];

  // Check if protected post should be displayed
  if (!$this->check_show_protected($post)) continue;

  // Drop the post if it's not assigned a child category.
  if ( $category->parent !== $parent_id ) continue;

  //Start a List Item for each post:
  $single_string = $this->open_inner_tag($post, 'option');
  //Show the title and link to the post:
  $single_string .= $this->get_post_title($post, 'h3', 'lcp_post');
  //Show comments:
  $single_string .= $this->get_comments($post);
  //Show date:
  $single_string .= ' ' . $this->get_date($post);
  //Show date modified:
  $single_string .= ' ' . $this->get_modified_date($post);
  //Show author
  $single_string .= $this->get_author($post);
  //Custom fields:
  $single_string .= $this->get_custom_fields($post);
  //Post Thumbnail
  $single_string .= $this->get_thumbnail($post);
  /**
   * Post content - Example of how to use tag and class parameters:
   * This will produce:<p class="lcp_content">The content</p>
   */
  $single_string .= $this->get_content($post, 'div', 'lcp_content');
  /**
   * Post excerpt - Example of how to use tag and class parameters:
   * This will produce:<div class="lcp_excerpt">The content</div>
   */
  $single_string .= $this->get_excerpt($post, 'div', 'lcp_excerpt');
  // Get Posts "More" link:
  $single_string .= $this->get_posts_morelink($post);
  //Close li tag
  $single_string .= $this->close_inner_tag();
  // Index the post
  if ( key_exists( $category->name, $index ) ) {
    $index[ $category->name ][] = $single_string;
  } else {
    $index[ $category->name ] = [ $single_string ];
  }
endwhile;

// Show no posts text if there are no posts
$lcp_display_output .= $this->get_no_posts_text();

// Prepare indexed output
$indexed_output = '';

// Order by child category.
ksort( $index, SORT_NATURAL );
foreach ( $index as $cat_name => $posts ) {
  $indexed_output .= "<h2>$cat_name</h2>";
  $indexed_output .= '<select>';
  $indexed_output .= implode( $posts );
  $indexed_output .= '</select>';
}
// Display indexed posts
$lcp_display_output .= $indexed_output;

// Close the wrapper I opened at the beginning:
$lcp_display_output .= $this->close_outer_tag();

// If there's a "more link", show it:
$lcp_display_output .= $this->get_morelink();

// Get category posts count
$lcp_display_output .= $this->get_category_count();

//Pagination
$lcp_display_output .= $this->get_pagination();

$this->lcp_output = $lcp_display_output;
klemens-st commented 1 year ago

You used an example template that is meant to be used with posts that have a child category assigned.

You should start from the default template as the documentation suggests.

mahsunseven commented 1 year ago

Thanks for your help, part of the problem is solved :) Now it displays the title in the select field, but when I choose one of them, it does not enter the page of that post. The codes are as follows and there is no <a> tag in it

<select class="lcp_catlist" id="lcp_instance_0">
<option>Little Krishna</option>
<option>Clash Royale</option>
<option class="current">Clash of Clans</option>
</select>

I am new and not familiar with WordPress variables I can't work with php either I would be grateful if you could tell me how to do this. I changed the codes as follows:

<?php
/*
Plugin Name: List Category Posts - Template "Default"
Plugin URI: http://picandocodigo.net/programacion/wordpress/list-category-posts-wordpress-plugin-english/
Description: Template file for List Category Post Plugin for Wordpress which is used by plugin by argument template=value.php
Version: 0.9
Author: Radek Uldrych & Fernando Briano
Author URI: http://picandocodigo.net http://radoviny.net
*/

/*
Copyright 2009 Radek Uldrych (email : verex@centrum.cz)
Copyright 2009-2015 Fernando Briano (http://picandocodigo.net)
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or any
later version.
This program is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301
USA
*/

/**
* The format for templates changed since version 0.17.  Since this
* code is included inside CatListDisplayer, $this refers to the
* instance of CatListDisplayer that called this file.
*/

/* This is the string which will gather all the information.*/
$lcp_display_output = '';

// Show category link:
$lcp_display_output .= $this->get_category_link('strong');

// Show category description:
$lcp_display_output .= $this->get_category_description('p');

// Show the conditional title:
$lcp_display_output .= $this->get_conditional_title();

//Add 'starting' tag. Here, I'm using an unordered list (ul) as an example:
$lcp_display_output .= $this->open_outer_tag('select', 'lcp_catlist');

/* Posts Loop
 *
 * The code here will be executed for every post in the category.  As
 * you can see, the different options are being called from functions
 * on the $this variable which is a CatListDisplayer.
 *
 * CatListDisplayer has a function for each field we want to show.  So
 * you'll see get_excerpt, get_thumbnail, etc.  You can now pass an
 * html tag as a parameter. This tag will sorround the info you want
 * to display. You can also assign a specific CSS class to each field.
 *
 * IMPORTANT: Prior to v0.85 lines 65-67 were different. Make sure your
 * template is up to date.
*/
global $post;
while ( $this->lcp_query->have_posts() ):
  $this->lcp_query->the_post();

  // Check if protected post should be displayed
  if (!$this->check_show_protected($post)) continue;

  //Start a List Item for each post:
  $lcp_display_output .= $this->open_inner_tag($post, 'option');

  //Show the title and link to the post:
  $lcp_display_output .= $this->get_post_title($post);

  // Show categories
  $lcp_display_output .= $this->get_posts_cats($post);

  // Show tags
  $lcp_display_output .= $this->get_posts_tags($post);

  //Show comments:
  $lcp_display_output .= $this->get_comments($post);

  //Show date:
  $lcp_display_output .= $this->get_date($post);

  //Show date modified:
  $lcp_display_output .= $this->get_modified_date($post);

  //Show author
  $lcp_display_output .= $this->get_author($post);

  // Show post ID
  $lcp_display_output .= $this->get_display_id($post);

  //Custom fields:
  $lcp_display_output .= $this->get_custom_fields($post);

  //Post Thumbnail
  $lcp_display_output .= $this->get_thumbnail($post);

  /**
   * Post content - Example of how to use tag and class parameters:
   * This will produce:<div class="lcp_content">The content</div>
   */
  $lcp_display_output .= $this->get_content($post, 'div', 'lcp_content');

  /**
   * Post content - Example of how to use tag and class parameters:
   * This will produce:<div class="lcp_excerpt">The content</div>
   */
  $lcp_display_output .= $this->get_excerpt($post, 'div', 'lcp_excerpt');

  // Get Posts "More" link:
  $lcp_display_output .= $this->get_posts_morelink($post);

  //Close li tag
  $lcp_display_output .= $this->close_inner_tag();
endwhile;

// Show no posts text if there are no posts
$lcp_display_output .= $this->get_no_posts_text();

// Close the wrapper I opened at the beginning:
$lcp_display_output .= $this->close_outer_tag();

// If there's a "more link", show it:
$lcp_display_output .= $this->get_morelink();

// Get category posts count
$lcp_display_output .= $this->get_category_count();

//Pagination
$lcp_display_output .= $this->get_pagination();

$this->lcp_output = $lcp_display_output;

thank you

klemens-st commented 1 year ago

So you have your <select> dropdown working but now you want the browser to navigate to the post you select. This plugin cannot help with that because its only role is to generate a list of posts.

To complete your task you have to add some Javascript code that will get the URL from the plugin's output and navigate to that URL.