I am displaying a list of filters using Isotope. The functionality works when the first part of the code works however, when the screen is resized the posts don't filter when it executes the last part... Any help is much appreciated!
<?php
$filterLinks = array();
$newarray = array();
$starter = array('name'=>'View All','slug'=>'*');
$filterLinks[] = $starter;
$taxterms = get_terms( $customTax );
if ( ! empty( $taxterms ) && ! is_wp_error( $taxterms ) ){
foreach ( $taxterms as $taxterm ) {
$datafilter = '.' . $taxterm->slug;
$newarray = array(
'name' => $taxterm->name,
'slug' => $datafilter,
);
$filterLinks[] = $newarray;
}
}
echo '<ul id="filters" class="desk-filters button-group">' ."\n";
foreach ($filterLinks as $links) {
echo '<li><button class="button" data-filter="' . $links['slug'] . '">' . $links['name'] . '</button></li>'."\n";
}
echo '</ul>';
// Drop down menu on mobile
echo '<div id="filters" class="resp-filters button-group">'."\n";
echo '<div class="resp-filter-btn">Select Filter</div>'."\n";
echo '<div class="resp-filter-content">'."\n";
foreach ($filterLinks as $links) {
echo '<a class="button" data-filter="' . $links['slug'] . '">' . $links['name'] . '</a>'."\n";
}
echo '</div>'."\n";
echo '</div>';
?>
Functionality Works:
echo '<ul id="filters" class="desk-filters button-group">' ."\n";
foreach ($filterLinks as $links) {
echo '<li><button class="button" data-filter="' . $links['slug'] . '">' . $links['name'] . '</button></li>'."\n";
}
echo '</ul>';
Functionality Doesn't Work:
// Drop down menu on mobile
echo '<div id="filters" class="resp-filters button-group">'."\n";
echo '<div class="resp-filter-btn">Select Filter</div>'."\n";
echo '<div class="resp-filter-content">'."\n";
foreach ($filterLinks as $links) {
echo '<a class="button" data-filter="' . $links['slug'] . '">' . $links['name'] . '</a>'."\n";
}
echo '</div>'."\n";
echo '</div>';
Is this because i'm executing it twice, just hiding one on desktop and showing the other on mobile?
Looking for some direction. Thanks in advance!
You're using id="filters" twice, which is improper use of the id attribute, since it should be unique. Not sure if that is of any concern?
Related
I´m trying to display a custom taxonomy image in the frontend on a single post.
Following situation:
Created a CPT for "Weine"
Added a taxonomy "winzer"
Added the following code to my functions.php to display the "winemaker" taxonomy with its description in the single post using a shortcode:
function wpb_catlist_desc() {
$string = '<div>';
$catlist = get_terms( 'winzer' );
if ( ! empty( $catlist ) ) {
foreach ( $catlist as $key => $item ) {
$string .= '<div>'. $item->name . '<br />';
$string .= '<em>'. $item->description . '</em></div>';
}
}
$string .= '</div>';
return $string;
}
add_shortcode('wpb_categories', 'wpb_catlist_desc');
Added an Image fieled to the "winzer" taxonomy using ACF. --> Here´s where I´m stuck now.
I need to add another line to the php snippet to also display the image using the shortcode.
Any hints how to get this done? :)
Cheers!!!!
function wpb_catlist_desc() {
$string = '<div>';
$catlist = get_terms( 'winzer' );
if ( ! empty( $catlist ) ) {
foreach ( $catlist as $key => $item ) {
$image = get_field('Your_image_field_ID');
if(!empty($image)) {
$imgurl = $image['url'];
}
$string .= '<div>';
$string .= '<img src="' . $imgurl . '" alt="' . $item->name . '"/><br />';
$string .= $item->name . '<br />';
$string .= '<em>'. $item->description . '</em></div>';
}
}
$string .= '</div>';
return $string;
}
add_shortcode('wpb_categories', 'wpb_catlist_desc');
Here's how I got it solved:
function wpb_catlist_desc() {
global $post;
$string = '<div>';
$catlist = wp_get_post_terms($post->ID, 'winzer');
if ( ! empty( $catlist ) ) {
foreach ($catlist as $item ) {
$image = get_field('winzer_bild', 'winzer_'.$item->term_id);
if(!empty($image)) {
$imgurl = $image['url'];
}
$string .= '<div>';
$string .= '<img class="winzer-bild-klein" src="' . $imgurl . '" alt="' . $item->name . '"style="width:100%;"/>';
$string .= '<h3 class="winzer-name-n">'. $item->name . '</h3>';
$string .= '<p>'. $item->description . '</p></div>';
}
}
$string .= '</div>';
return $string;
}
add_shortcode('wpb_categories', 'wpb_catlist_desc');
OK, I'm trying to integrate an API that lists adoptable pets into a wordpress website. I've done lots of googling and read through tutorials, and so far have managed to put together a super basic plugin that seems to do what I'm trying to accomplish. Currently I'm trying to pull in an image, but just the first image. Each animal may have 5 images associated with it, but I only want to pull in the first (default). Currently my code brings them all. Now I realize the problem is that I'm using "foreach()". But, this is new to me and my googling is not going well, and any other way I've tried to do it is just not getting me ANY pictures. Any advice is appreciated....and if I'm doing anything else wrong, feel free to let me know :) I also need to figure out how to paginate it, but I'm thinking that's a separate question! Thanks!
<?php
add_shortcode('pets', 'petsshortcode');
function petsshortcode() {
$request = wp_remote_get( 'https://petstablished.com/api/v2/public/pets?public_key=UlEK4EWvDAoOjXeQXSCQZAyBywWfqfOg&search[status]=available,foster&pagination[limit]=20&pagination[page]=1' );
if( is_wp_error( $request ) ) {
return false; // Bail early
}
$body = wp_remote_retrieve_body( $request );
$data = json_decode( $body );
if( ! empty( $data ) ) {
foreach( $data->collection as $collection ) {
echo '<div id="pet-block"><ul class="pet-profile"><li class="pet-name">'. $collection->name; echo '</li>';
echo '<li class="pet-meta">'.'<span class="sex">' . $collection->sex; echo '</span>' . '<span class="breed">' . $collection->breed; echo '</span><span class="age">' . $collection->age; echo '</span></li>';
echo '<li><p>' . $collection->description; echo '</li></p>';
foreach( $collection->images as $images ) {
echo '<div class="pet-photo"><img src="' . $images->image->url; echo '" width="200"></div>';}
echo '</ul></div>';
}
}
}
You don't need nested foreach loops in this case, simply use just one foreach loop like this:
// your code
foreach( $data->collection as $collection ) {
echo '<div id="pet-block"><ul class="pet-profile"><li class="pet-name">'. $collection->name; echo '</li>';
echo '<li class="pet-meta">'.'<span class="sex">' . $collection->sex; echo '</span>' . '<span class="breed">' . $collection->breed; echo '</span><span class="age">' . $collection->age; echo '</span></li>';
echo '<li><p>' . $collection->description; echo '</li></p>';
echo '<div class="pet-photo"><img src="' . $collection->images[0]->image->url; echo '" width="200"></div>';
echo '</ul></div>';
}
// your code
I have a theme options page and a loop which grabs my categories. This code works fine and I am able to save my options. The code like this:
function drop_elements_function(){
$my_cats = get_categories();
$i = 1;
foreach( $my_cats as $my_cat ) :
$my_categories[$my_cat->cat_ID] = array(
'value' => $my_cat->cat_ID,
'label' => $my_cat->cat_name
);
$i++;
endforeach;
$options = get_option('sandbox_theme_social_options');
echo'<select id="featured_cat" name="sandbox_theme_social_options[Drop_Elements]">';
foreach ( $my_categories as $category ){
$label = $category['label'];
$selected = '';
if ( $options['Drop_Elements'] == $category['value'] )
$selected = 'selected="selected"';
echo '<option style="padding-right: 10px;" value="' . esc_attr( $category['value'] ) . '" ' . $selected . '>' . $label . '</option>';
}
echo '</select>';
//print_r($options['Drop_Elements']);
}/*Function end*/
The output looks like this:
http://www.vasinternetposao.com/img.png
Problem: Now when my theme is installed for the first time i am getting the output like the screen shot above but obviously my option is not yet saved to the database (user must click the save button in order to select that category). So i was thinking to do something like this:
1.) User install the theme for the first time and then output looks like this:
http://www.vasinternetposao.com/img2.png
2.) If user unintentionally select "Choose your category" and clicks the "save button"
the output will be again:
http://www.vasinternetposao.com/img2.png
3.) If the user select the real category (not "Choose Your Category") then "Choose Your Category" Disappears:
http://www.vasinternetposao.com/img.png
This is my attempt but it is not working:
function drop_elements_function(){
$my_cats = get_categories();
$i = 1;
foreach( $my_cats as $my_cat ) :
$my_categories[$my_cat->cat_ID] = array(
'value' => $my_cat->cat_ID,
'label' => $my_cat->cat_name
);
$i++;
endforeach;
$options = get_option('sandbox_theme_social_options');
echo'<select id="featured_cat" name="sandbox_theme_social_options[Drop_Elements]">';
foreach ( $my_categories as $category ){
$label = $category['label'];
$selected = '';
if ( $options['Drop_Elements'] == $category['value'] ){
$selected = 'selected="selected"';
echo '<option style="padding-right: 10px;" value="' . esc_attr( $category['value'] ) . '" ' . $selected . '>' . $label . '</option>';
}
elseif(!isset($options['Drop_Elements'])){
$selected = 'selected="selected"';
echo '<option selected="selected" value="Choose Your Category">Choose Your Category</option>';
echo '<option style="padding-right: 10px;" value="' . esc_attr( $category['value'] ) . '" ' . '>' . $label . '</option>';
}
}/*Foreach close*/
echo '</select>';
//print_r($options['Drop_Elements']);
}/*Function end*/
Can it be done with PHP? Any help is appreciated! Thank you!
I think what you want to do is something like the following example:
echo '<select id="featured_cat" name="sandbox_theme_social_options[Drop_Elements]">';
echo '<option selected="selected" value="Choose Your Category">Choose Your Category</option>';
foreach ( $my_categories as $category ){
$label = $category['label'];
$selected = ( $options['Drop_Elements'] == $category['value'] ) ? " selected='selected' " : "";
echo '<option style="padding-right: 10px;" value="' . esc_attr( $category['value'] ) . '" ' . $selected . '>' . $label . '</option>';
}
echo "</select>";
I found a post on this site to add a custom "mytheme_list_pages" to the functions.php file in order to add the title attribute to a link. While this works to add the title attribute to the "href" output, it no longer preserves the order of the menu as wp_list_pages does. Can someone tell me how to order the output of the custom code below?
I'm calling the function from my page.php file like this:
<?php mytheme_list_pages('exclude=819&title_li='); ?>
The custom function below:
<?php
function mytheme_list_pages($param) {
$pages = get_pages($param);
foreach ( $pages as $page ) {
$li = '<li><a href="' . get_page_link( $page->ID ) . '" title="';
$li .= esc_attr($page->post_title);
$li .= '">';
$li .= $page->post_title;
$li .= '</a></li>';
echo $li;
}
}
?>
Many thanks!
Here is updated code,
<?php mytheme_list_pages('exclude=819&title_li=&sort_column=menu_order'); ?>
<?php
function mytheme_list_pages($param) {
$pages = get_pages($param);
foreach ( $pages as $page ) {
$li = '<li><a href="' . get_page_link( $page->ID ) . '" title="';
$li .= esc_attr($page->post_title);
$li .= '">';
$li .= $page->post_title;
$li .= '</a></li>';
echo $li;
}
}
?>
for more information http://codex.wordpress.org/Function_Reference/get_pages
I have a fairly basic setup with Wordpress Advanced Custom Fields. I have a need to add extra fields to a custom post and then display them on the post page. I have this code that DOES work, but when I got to a custom field that has multiple checkbox selections, obviously that particular field dumps out the word ‘array’, as it is an array.
How can I make this code below, dump all labels and data for regular fields as well as for fields that have an array in them.
$fields = get_field_objects();
if( $fields )
{
echo '<div class="item-info-custom">';
echo '<dl class="item-custom">';
echo '<dt class="title"><h4>Custom Information</h4></dt>';
foreach( $fields as $field_name => $field )
{
echo '<dt class="custom-label">' . $field['label'] . ': </dt>';
echo '<dd class="custom-data">' . $field['value'] . '</dd>';
}
echo '</dl>';
echo '</div>';
}
This is the final code that I got to work:
<?php
$fields = get_field_objects();
if( $fields )
{
echo '<div class="item-info-custom">';
echo '<dl class="item-custom">';
echo '<dt class="title"><h4>Custom Information</h4></dt>';
foreach( $fields as $field_name => $field )
{
echo '<dt class="custom-label">' . $field['label'] . ': </dt>';
echo '<dd class="custom-data">';
if (is_array($field['value'])) {
echo implode(', ', $field['value']);
}
else {
echo $field['value'];
}
echo '</dd>';
}
echo '</dl>';
echo '</div>';
}
?>
Depending on the composition of the arrays in $field['value'] you can do one of the following:
If it's a simple list of values you can just tape them together with implode.
echo '<dd class="custom-data">' . (is_array($field['value'])?implode(", ", $field['value']:$field['value']) . '</dd>';
If the array contains data represented like the main array (with label and value keys) you can create a function to render the array and call it recursively when you encounter a array value.
<?php
function showFields($data){
echo '<div class="item-info-custom">';
echo '<dl class="item-custom">';
echo '<dt class="title"><h4>Custom Information</h4></dt>';
foreach( $fields as $field_name => $field )
{
echo '<dt class="custom-label">' . $field['label'] . ': </dt>';
if (is_array($field['value'])){
showFields($field['value']);
}
echo '<dd class="custom-data">' . $field['value'] . '</dd>';
}
echo '</dl>';
echo '</div>';
}
$fields = get_field_objects();
if( $fields ) showFields($fields);
You'll need to do some type checking. You can use functions like is_array() and do additional logic.
For example:
echo '<dd class="custom-data">';
if (is_array($field['value'])) {
echo implode(', ', $field['value']);
}
else {
echo $field['value'];
}
echo '</dd>';