I have a pizza sales site which offers 'Ingredients' of which these are simple products, for example: Pizza Napolí is a bundle product, this product has ingredients grouped together.
What I'm looking for is to show in a custom loop (wp_query) the children products or ingredients of this pizza, which are 'Cheese(Queso)', 'Bacon(Tocineta)', etc.
Images reference here:
My code:
<?php
$args = array(
'post_type' => 'product',
'post_status' => 'publish',
'ignore_sticky_posts' => 1,
'orderby' => 'date',
'order' => 'ASC',
'meta_key' => '_stock_status',
'posts_per_page' => 10,
'tax_query' => array(
array(
'taxonomy' => 'product_cat',
'terms' => array('pizzas'),
'field' => 'name',
'operator' => 'IN'
)
)
);
// End query
$products = new WP_Query( $args, 'woocommerce'); ?>
<div class="menu-grid-pizzas">
<?php if ($products->have_posts()): ?>
<div class="container">
<ul class="grid-pizzas-list">
<?php while ($products->have_posts()): $products->the_post(); ?>
<li class="grid-pizzas-content">
<div class="content-left">
<div class="grid-img">
<a href="<?php the_permalink();?>">
<?php the_post_thumbnail('medium');?>
</a>
</div>
</div>
<div class="content-right">
<div class="grid-product-title">
<a href="<?php the_permalink();?>">
<h4><?php the_title();?></h4>
</a>
</div>
<div class="grid-product-content">
<?php $content = get_the_content();?>
<p><?php echo mb_strimwidth($content, 0, 120, "...");?></p>
</div>
<div class="grid-product-ingredints">
<!-- HERE get DATA items bundles -->
</div>
<div class="grid-product-price">
<?php $precio = get_post_meta( get_the_ID(), '_price', true );?>
<p><?php echo wc_price( $precio ); ?></p>
</div>
<div class="grid-product-add-to-card">
<?php do_action('woocommerce_after_shop_loop_item' , 'woocommerce_template_loop_add_to_cart' , 10 );?>
</div>
</div>
</li>
<?php endwhile;?>
<?php wp_reset_postdata();?>
</ul>
</div>
<?php endif;?>
</div>
As you can see, it is a custom loop from which I call all products with the category 'Pizza' with a wp_query.
I hope you can help me, thank you.
I'm building a theme in WordPress, I'm a newbie, along with the image HTML is being outputted, please do help me resolve this issue, thank you.
<?php
$args = array( 'numberposts' => 4, 'order'=> 'ASC', 'orderby' => 'title', 'category' => '5' );
$postslist = get_posts( $args );
foreach ($postslist as $post) : setup_postdata($post); ?>
<li>
<div class="timeline-image">
<a href="<?php the_permalink(); ?>">
<img class="rounded-circle img-fluid" src="<?php echo the_post_thumbnail(); ?>">
</a>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="subheading text-left"><?php the_title(); ?></h4>
</div>
<div class="timeline-body">
<p class="text-muted text-justify"><?php the_excerpt(); ?>
Read More >>
</p>
</div>
</div>
</li>
<?php endforeach; ?>
You should be looping through the posts as such and not using foreach:
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 4,
'orderby' => 'title',
'order' => 'ASC',
'category__in' => 5
);
$loop = new wp_query( $args );
while( $loop->have_rows() ) : $loop->the_row();
?>
Your article content…
<h4 class="subheading text-left"><?php the_title(); ?></h4>
<?php endif; ?>
If you need to loop through a different custom post types, use this guide.
I am having problems reducing and/or removing the black space at the bottom of my wordpress webpage. Using inspector the black space seems to go over 2 css divs.
I need to add code in the custom css area to solve this but I dont know what to add.
http://andrewt.com.au/wp1/
this is the footer.php code
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after
*
* #package WordPress
* #subpackage Twenty_Sixteen
* #since Twenty Sixteen 1.0
*/
?>
</div><!-- .site-content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Primary Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav><!-- .main-navigation -->
<?php endif; ?>
<?php if ( has_nav_menu( 'social' ) ) : ?>
<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>',
) );
?>
</nav><!-- .social-navigation -->
<?php endif; ?>
</footer><!-- .site-footer -->
</div><!-- .site-inner -->
</div><!-- .site -->
<?php wp_footer(); ?>
</body>
</html>
Add this code in your footer.php
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after
*
* #package WordPress
* #subpackage Twenty_Sixteen
* #since Twenty Sixteen 1.0
*/
?>
<style>
#media screen and (min-width: 61.5625em){
.content-area .site-main {
margin-bottom: 0px;
}
}
</style>
</div><!-- .site-content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Primary Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav><!-- .main-navigation -->
<?php endif; ?>
<?php if ( has_nav_menu( 'social' ) ) : ?>
<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>',
) );
?>
</nav><!-- .social-navigation -->
<?php endif; ?>
</footer><!-- .site-footer -->
</div><!-- .site-inner -->
Your website is broken, or have very-very-very bad coded.
Add this css rules to custom css area( as you mentioned ):
#main{
margin-bottom: 10px;
}
footer{
padding: 5px; //or you can decrease/increase it
}
If after adding and refreshing/deleting cache of page, it doesn't affected, than try to use:
#main{
margin-bottom: 10px !important;
}
footer{
padding: 5px !important; //or you can decrease/increase it
}
or try to write the rules provided to some other stylesheet, such as default customizer of wordpress: Customize => Additional Css.
I'm developing my own wordpress theme for the first time, using bootstrap, and I've run into an issue when using the wp-bootstrap-navwalker.
I've created two menus, one that is visible in sm, md and lg, and one that is visible in xs. In xs it is supposed to be collapsed, and open on pressing the button, however after I added the wp-bootstrap-navwalker to my html, it is no longer working.
Here is my html:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="description" content="Storhamar kunstløp har i dag nærmere 100 medlemmer og løpere på skøyteskole-, aspirant- og konkurransenivå. Her er man velkommen uansett ambisjonsnivå!">
<meta name="keywords" content="Storhamar, SIL, kunstløp, figure skating, Hamar, skøyter, idrettslag, kunstløpklubb, skøyteklubb">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title(''); ?></title>
<!--Fonts-->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700' rel='stylesheet' type='text/css'>
<!--Icons-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="container-fluid hidden-xs">
<img src="<?php header_image(); ?>" class="img-responsive center-block">
</header>
<!-- Navbar ================================================== -->
<nav id="main-nav" class="navbar hidden-xs" data-spy="affix" data-offset-top="280">
<div class="container-fluid" id="main-nav-list">
<?php
wp_nav_menu( array(
'menu' => 'primary-lg',
'theme_location' => 'primary-lg',
'depth' => 1,
'container' => 'div',
'container_class' => 'container-fluid',
'container_id' => 'main-nav-list',
'menu_class' => 'nav navbar-nav main-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
</nav>
<!-- Mobile Navbar ================================================== -->
<nav id="mobile-nav" class="navbar mobile-nav navbar-default navbar-static-top visible-xs">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php
wp_nav_menu( array(
'menu' => 'primary-xs',
'theme_location' => 'primary-xs',
'depth' => 1,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<img src="<?php header_image(); ?>" class="img-responsive visible-xs center-block">
<main class="container">
Here is my functions.php:
<?php
if ( ! isset( $content_width ) ) {
$content_width = 660;
}
function SILkunstlop_setup() {
load_theme_textdomain('SILkunstlopLang', get_template_directory() . '/languages');
add_theme_support( 'title-tag' );
add_theme_support( 'automatic-feed-links' );
// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');
register_nav_menus( array(
'primary-lg' => __( 'Hovedmeny stor', 'SILkunstlop-wp' ),
) );
register_nav_menus( array(
'primary-xs' => __( 'Hovedmeny liten', 'SILkunstlop-wp' ),
) );
register_nav_menus( array(
'sidebar-menu' => __( 'Sidemeny', 'SILkunstlop-wp' ),
) );
register_nav_menus( array(
'sidebar-menu2' => __( 'Sidemeny skøyteskole', 'SILkunstlop-wp' ),
) );
}
add_action('after_setup_theme', 'SILkunstlop_setup');
//Load the theme CSS
function theme_styles() {
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css');
}
//Load the theme JS
function theme_js() {
//Adds JQuery from Google's CDN. Code pulled from www.http://css-tricks.com/snippets/wordpress/include-jquery-in-wordpress-theme/
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js", false, null);
wp_enqueue_script('jquery');
}
wp_enqueue_script( 'bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );
wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/custom.js', array('jquery'), '', true );
if ( is_singular() ) wp_enqueue_script('comment-reply');
}
add_action( 'wp_enqueue_scripts', 'theme_styles' );
add_action( 'wp_enqueue_scripts', 'theme_js' );
function new_excerpt_more( $more ) {
return '...';
}
add_filter('excerpt_more', 'new_excerpt_more');
/**
* Register our sidebars and widgetized areas.
*
*/
function arphabet_widgets_init() {
register_sidebar( array(
'name' => 'aktuelt',
'id' => 'aktuelt',
'before_widget' => '<div class="col-sm-8 hashtag">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
register_sidebar( array(
'name' => 'footer',
'id' => 'footer',
'before_widget' => '<div>',
'after_widget' => '</div>',
) );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );
function searchResult() {
printf( __('Søkeresultat for: %s', 'SILkunstlopLang'), get_search_query());
}
$args = array(
// 'width' => 980,
'height' => 180,
'default-image' => get_template_directory_uri() . '/images/header.svg',
'uploads' => true,
);
add_theme_support( 'custom-header', $args );
$args = array(
'default-color' => 'A9C5DD',
'default-image' => get_template_directory_uri() . '/images/background.jpg',
'default-attachment' => 'fixed',
'default-repeat' => 'none',
'default-position-x' => 'center',
'default-position-y' => 'center',
'uploads' => true,
);
add_theme_support( 'custom-background', $args );
?>
Does anyone have a clue to where my issue is originating?
Thanks a lot for any clues given, and let me know if I should include some more information!
Best,
Elena
So I actually found the problem myself in the end, after studying the html once again with inspect element.
I didn't realise that the div around my nav is actually superfluous and just duplicated the container added by the menu. So after I removed the surrounding div with class of "collapse navbar-collapse" the menu collapsing menu worked again (opens on clicking the button).
When passing different posts_per_page values in functions.php number of posts shown changes but it doesnt load any other posts on scroll. Changing type to click doesn't do anything.
adding support in functions.php:
add_theme_support( 'infinite-scroll', array(
'type' => 'scroll',
'footer_widgets' => false,
'container' => 'content',
'render' => false,
'posts_per_page' => false,
) );
index.php:
<?php
get_header(); ?>
<div id="content">
<?php if (have_posts):
while (have_posts()) {
the_post();
get_template_part('content', get_post_format());
}
else:
echo '<p>No content found</p>';
endif; ?>
</div>
content.php:
<div class="post clearfix">
<div class="post-heading">
<h2><?php the_title(); ?></h2>
<h3><?php the_subtitle(); ?></h3>
</div>
<div class="post-content">
<?php the_content(); ?>
<?php if (is_single()): ?>
<div class="navigation clearfix">
<?php the_post_navigation( array(
'next_text' => 'Next',
'prev_text' => 'Previous',
'screen_reader_text' => ' '
)); ?>
</div>
<p>Main</p>
<?php endif; ?>
</div>