Custom taxonomy terms not printing in order - wordpress

I have multiple custom taxonomies in custom post type. I am printing the custom posts with their multiple taxonomies in loop. I am able to done that. But the taxonomies are printing in random order like this:
This is what printing in loop:
As you can see some data of job type is printing in Company field, Some company is printing in Skills field. How can i print them in order.
Here is my code:
$args=array("post_per_page"=>-1,"post_type"=>"jobs");
$loop=new WP_Query($args);
if($loop->have_posts()){
while($loop->have_posts()):$loop->the_post();
$custom_terms=wp_get_object_terms(get_the_ID(),array('companies','job-type','skills'),array('orderby' => 'name', 'order'=>'ASC','fields'=>'all'));?>
<div class="col-md-12" style="box-shadow:0px 3px 5px 2px #f4f4f4;margin:10px;background:#fff;">
<div class="media col-md-3" style="margin-top:2%;">
<figure class="pull-left">
<?php the_post_thumbnail('small',array('class'=>'media-object img-rounded img-responsive'));?>
<h5 class="list-group-item-heading" style="font-weight: 400;color: #0db294;margin-bottom:3%;border-bottom:1px solid rgb(98,59,204,0.1);padding:5px;"><?php echo the_title();?> </h5>
</figure>
</div>
<div class="col-md-6" style="margin-top:3%;">
<div class="col-md-4 col-xs-12 text-center b-right"><label style="color: #0db294;">Company</label><br/><span style="text-transform:capitalize"><?php echo $custom_terms[1]->name;?></span></div>
<div class="col-md-4 col-xs-12 text-center b-right"><label style="color: #0db294;">Job Type</label><br/><?php echo $custom_terms[0]->name;?></div>
<div class="col-md-4 col-xs-12 text-center"><label style="color: #0db294;">Skills</label><br/><?php echo $custom_terms[2]->name;?></div>
</div>
<div class="col-md-3 col-xs-12 text-center"><br/>
View Details
</div>
</div>
<?php endwhile;
}

Use get_the_term_list to get all terms for specific taxonomy. You can also modify this to get first one if there are multiple ones.
Like this ID, 'companies', 'Company: ', ', ' ); ?>
You are getting all and ordering by name then getting by position. That is causing issues. Get each one like this manually.

Here is the solution as #boris suggested
$args=array("post_per_page"=>-1,"post_type"=>"jobs");
$loop=new WP_Query($args);
if($loop->have_posts()){
while($loop->have_posts()):$loop->the_post();
$comp=get_the_term_list(get_the_ID(),'companies','',',');
$jobt=get_the_term_list(get_the_ID(),'job-type','',',');
$skil=get_the_term_list(get_the_ID(),'skills','',',');
?>
<div class="col-md-12 col-xs-12" style="margin:10px;background:#fff;margin-left:0;">
<div class="media col-md-4 col-xs-12" style="margin-top:2%;">
<figure class="pull-left">
<!-- <img class="media-object img-rounded img-responsive" src="" alt="placehold.it/350x250" style="height:70px;width:auto;margin:0 auto" > -->
<h2 class="list-group-item-heading" style="font-weight: 400;font-size:19px;color: #2A5A8E;margin-bottom:3%;padding:5px;"><?php echo the_title();?> </h2>
</figure>
</div>
<div class="col-md-6" style="margin-top:3%;">
<div class="col-md-4 col-xs-12 text-center b-right"><label style="color: #0db294;">Company</label><br/><span style="text-transform:capitalize"><?php echo $comp;?></span></div>
<div class="col-md-4 col-xs-12 text-center b-right"><label style="color: #0db294;">Job Type</label><br/><?php echo $jobt;?></div>
<div class="col-md-4 col-xs-12 text-center"><label style="color: #0db294;">Skills</label><br/><?php echo $skil;?></div>
</div>
<div class="col-md-2 col-xs-12 text-center"><br/>
View Details
</div>
</div>
<?php endwhile;
}
?>

Related

posts_per_page showing only 1 post instead of 3 posts

I have a loop that should show recent blog posts. The problem is the posts_per_page shows only one post instead of three posts.
I couldn't figure out where I am going wrong.
I tried the following steps but did not help, but did not work for me.
ignore_sticky_posts = > true,
update_post_term_cache=>false,
nopaging=>true
The code is:
<section class="ftco-section" id="blog-section">
<div class="container">
<div class="row justify-content-center mb-5 pb-5">
<div class="col-md-7 heading-section text-center ftco-animate">
<h1 class="big big-2">Blog</h1>
<h2 class="mb-4">Our Blog</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia</p>
</div>
</div>
<div class="row d-flex">
<?php if (have_posts()) :
while (have_posts()) :the_post(); ?>
<div class="col-md-4 d-flex ftco-animate">
<div class="blog-entry justify-content-end">
<a href="<?php the_permalink(); ?>" class="block-20" style="background-image: url('<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>');">
</a>
<div class="text mt-3 float-right d-block">
<div class="d-flex align-items-center mb-3 meta">
<p class="mb-0">
<span class="mr-2">June 21, 2019</span>
Admin
<span class="icon-chat"></span> 3
</p>
</div>
<h3 class="heading"><?php the_title(); ?></h3>
<p><?php echo wp_trim_words(get_the_excerpt(), 30); ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</section>
Is this the correct way to loop?
The problem that I'm getting is that now I do not see any of the blog posts.
From what I see in your code, you are displaying your content outside the while loop. Also, you were merging the query arguments array with the $wp_query->query and those are different. You want to use: $wp_query->query_vars
Before you read further, make sure you visit the following links:
query_posts() documentation
The Loop documentation
Your code should be something like:
<?php
global $wpdb;
$args = array(
'post_type' => 'post',
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => 3,
);
$this_query = new WP_Query( $args );
?>
<section class="ftco-section" id="blog-section">
<div class="container">
<div class="row justify-content-center mb-5 pb-5">
<div class="col-md-7 heading-section text-center ftco-animate">
<h1 class="big big-2">Blog</h1>
<h2 class="mb-4">Our Blog</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia</p>
</div>
</div>
<div class="row d-flex">
<?php if ( $this_query->have_posts() ) : ?>
<?php while ( $this_query->have_posts() ) : $this_query->the_post(); ?>
<div class="col-md-4 d-flex ftco-animate">
<div class="blog-entry justify-content-end">
<a href="<?php the_permalink(); ?>" class="block-20" style="background-image: url('<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>');">
</a>
<div class="text mt-3 float-right d-block">
<div class="d-flex align-items-center mb-3 meta">
<p class="mb-0">
<span class="mr-2">June 21, 2019</span>
Admin
<span class="icon-chat"></span> 3
</p>
</div>
<h3 class="heading"><?php the_title(); ?></h3>
<p><?php echo wp_trim_words(get_the_excerpt(), 30); ?></p>
</div>
</div>
</div>
<?php endwhile;
wp_reset_postdata();
else : ?>
<p><?php esc_html_e( 'Sorry, no posts found.' ); ?></p>
<?php endif; ?>
</div>
</div>
</section>

Load more for custom query wp

how can i integrate load more button that loads next 10 posts from custom query ?
I've tried with bunch of plugins, css and js ways, but can't seem to load it.
How would you load more posts on load click?
Any tip is very much appreaciated
<div class="container">
<div class="row featured-akcije">
#foreach(get_field('actions') as $action)
#php($query = new WP_Query(array('post_type' => 'condo', 'p' => $action['akcions']->ID)))
#php($query->the_post())
<div class="col-md-4 col-xl-3 action">
<div class="box-shadow-posts hoverPic">
<div class="row">
<div class="col-12 col-md-12">
<div class="row">
<div class="col-4 col-md-6 col-xl-6">
<div class="action-img">
<img src="{{ get_the_post_thumbnail_url() }}" class="img-fluid">
<p class="action">action</p>
</div>
</div>
<div class="col-8 col-md-6 pl-md-0">
<div class="row info-action">
<div class="col-md-12"><h2 class="title">
{{ the_title() }}
</h2></div>
<div class="col-md-12 price-info">
<div class="divider">
</div>
<?php if( get_field('price_off') ): ?>
<p class="price">price from <?php the_field('price_from'); ?>e</p>
<?php endif; ?>
<p class="detail"><a href="{{ the_permalink() }}"><span class="nav-border"></span><span>detail <i
class="fas fa-arrow-right"></i></span></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#php(wp_reset_postdata())
#endforeach
</div>
</div>
I implemented load more functionality for custom query like this:
Create wp ajax endpoint which is called be javascript on load more button click
Endpoint gets offset which post to load? For example from 11 to 20 and returns html with rendered posts
Javascript appends return html to html of the page in proper place
How to create endpoint? Here are examples for creating endpoint and calling it from javascript: https://codex.wordpress.org/AJAX_in_Plugins In endpoint you should call fetching posts like this: $query = new WP_Query(array('post_type' => 'condo', 'p' => $action['akcions']->ID)) with proper offset passed in params, render html template and return it.

Screen goes white when setting home display to static on server site (Wordpress)

:)
I have made a Wordpress site, which I have migrated from local to a server. I have created a one pager with images in the bottom that links to the different post of my site. I have used the plugin Advanced custom fields in order to make my site editable.
After a lot of searching online, I found that it was not possible to add custom fields to your index php directly but that you could make a template in which you copied all your old code from the index.php into.
I got it to work on my local host by going to Settings - Readings in my wordpress admin panel an under set my homepage displays as static - Homepage (which is the name of my template).
But when I try to do the same thing on the server site, the screen goes white... Maybe it is something with the file structure?
I've taken a screen shot of whole the files are located in my FTP (Cyberduck). I don't know if its enough to help..
Thanks in advance
<div class="section" id="section2">
<div class="row">
<div class="col-12 col-md-6 col-lg-6" id="left">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/pen.png" id="pen" class="img-fluid animation" alt="Responsive-image"/>
<lol><h2 id="About">3 Facts</h2></lol>
</div>
<div class="col-12 col-md-6 col-lg-6" id="right">
<div class="image_field d-none d-md-block"> <!-- image field-->
<?php $post_image = get_field('avatar_image')['sizes']['large']; ?>
<img src = "<?php echo $post_image; ?> " id="avatarimage" class="img-fluid" alt="Responsive image">
</div>
<div class="col-md-12 col-lg-12">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/Onefinal.svg" id="One"/> <!-- class="img-fluid" alt="Responsive-image" -->
<div class="container" id=text>
<?php
$my_query = new WP_Query('pagename=hej');
while ($my_query->have_posts() ) : $my_query->the_post();
the_content();
endwhile;
wp_reset_postdata();
?>
</div>
</div>
Template of the static homepage should be stored in a file called front-page.php which needs to be placed in /wp-content/themes/elnino directory.
Copy code of your template (except comment with template name) and paste it inside front-page.php file.
<div class="section" id="section2">
<div class="row">
<div class="col-12 col-md-6 col-lg-6" id="left">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/pen.png" id="pen" class="img-fluid animation" alt="Responsive-image" />
<lol>
<h2 id="About">3 Facts</h2>
</lol>
</div>
<div class="col-12 col-md-6 col-lg-6" id="right">
<div class="image_field d-none d-md-block">
<!-- image field-->
<?php $post_image = get_field('avatar_image')['sizes']['large']; ?>
<img src="<?php echo $post_image; ?> " id="avatarimage" class="img-fluid" alt="Responsive image">
</div>
<div class="col-md-12 col-lg-12">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/Onefinal.svg" id="One" />
<!-- class="img-fluid" alt="Responsive-image" -->
<div class="container" id=text>
<?php
$my_query = new WP_Query('pagename=hej');
while ($my_query->have_posts() ) : $my_query->the_post();
the_content();
endwhile;
wp_reset_postdata();
?>
</div>
</div>

wordpress development how to make theme options for home page

I'm trying to figure out a way to make a dynamic home page on wordpress, i want the ability to edit the front page, and add content without hardcoding it.
Basically i want to have my home page to look similar to this.
https://html5up.net/forty
and i am aware that i need theme options to do this, how would i integrate that in my wordpress theme.
I want to be able to make columns, add rows, add hero image, etc.
and no, i dont want to use the visual composer. I am currently using Advanced custom fields.
Here is current front page on my theme, i dont want to use advanced custom fields because i still have to hard code.
In a nutshell how to make theme options for wordpress theme
template-frontpage.php
<?php
/**
* Template Name: Front Page
*
* #package Eli
*/
$image = get_field('hero_image');
get_header();
?>
<div class="row">
<div class="hero" style="background-image:url(<?php echo $image;?>); width:100%; min-height:350px; background-size: cover;">
<div class="container">
<div class="col-md-12">
<header class="hero-text">
<?php if (get_field('hero_title') ):?>
<h1 style="color:#fff;"><?php the_field('hero_title'); ?></h1>
<?php endif;?>
<?php if (get_field('hero_span') ):?>
<span><?php the_field('hero_span'); ?></span>
<?php endif;?>
<?php if (get_field('hero_span_2') ):?>
<span id="move"><?php the_field('hero_span_2'); ?></span>
<?php endif;?>
</header>
</div>
</div>
</div>
</div>
<section class="section-home">
<div class="row">
<div class="container">
<div class="line"></div>
<?php if (get_field('content_block_left') ):?>
<div id="cbl" class="col-md-4 col-xs-12">
<?php the_field('content_block_left_icon'); ?>
<?php the_field('content_block_left'); ?>
</div>
<?php endif;?>
<?php if (get_field('content_block_left2') ):?>
<div id="cbl" class="col-md-4 col-xs-12 ">
<?php the_field('content_block_left_2_icon'); ?>
<?php the_field('content_block_left2'); ?>
</div>
<?php endif;?>
<?php if (get_field('content_block_left3') ):?>
<div id="cbl" class="col-md-4 col-xs-12">
<?php the_field('content_block_left_3_icon'); ?>
<?php the_field('content_block_left3'); ?>
</div>
<?php endif;?>
</div>
</div>
</section>
<div class="section-about">
<div class="row">
<h1>Beat Your Rivals</h1>
<div class="line"></div>
<div class="container">
<?php if (get_field('image_left') ):?>
<div id="cbl2" class="col-md-6 offset-md-3 col-xs-12">
<img src="<?php echo the_field('image_left'); ?>" width:"400px" height:"300px">
</div>
<?php endif;?>
<?php if (get_field('caption_text') ):?>
<div id="cbl2" class="col-md-6 offset-md-3 col-xs-12">
<?php the_field('caption_text'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<?php
$image2 = get_field('test_image');
?>
<div class="section-test" style="background-image:url(<?php echo $image2['url'];?>); width:100%; min-height:300px; background-size: cover;">
<div class="row">
<div class="container">
<?php if (get_field('test_text') ):?>
<div id="cbl3" class="col-md-12 col-xs-12">
<?php the_field('test_text'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<div class="about-us">
<div class="row">
<div class="container">
<?php if (get_field('about_us') ):?>
<div class="col-md-12 col-xs-12">
<?php the_field('about_us'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<?php
$image3 = get_field('cons_image');
?>
<div class="consult">
<div class="row">
<div class="my-block-left" style="background-image:url(<?php echo $image3['url'];?>); background-size: cover;" >
<div class="container">
<?php if (get_field('consult_us') ):?>
<div class="col-md-12 col-xs-12">
<?php the_field('consult_us'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
</div>
<?php if (get_field('contact_us') ):?>
<div class="contact-us">
<div class="row">
<div class="container">
<h1 class="contact-h1">Contact Us</h1>
<div class="line"></div>
<div class="col-md-12 col-xs-12">
<?php the_field('contact_us'); ?>
</div>
</div>
</div>
</div>
<?php endif;?>
<?php get_footer(); ?>
Ok, It seems you have already done the basic theme options. Now if you want to create real theme options like the ones everyone creates in their themes then you have three cool options. WP Theme Customizer API , Redux and Codestars
You need to study them. Anyone of the above you can use in your project.

Wordpress featured image / post thumbnail not showing

I'm trying to show the featured image or the post thumbnail in every list items < li >. Here's the code:
<div class="row headline">
<ul class="col-md-12 col-sm-12">
<?php
$sql_submenu_produk_sql = $wpdb->get_results("
SELECT * from $wpdb->posts
WHERE post_parent=52 AND post_type='page' AND post_status='publish' group by ID;
");
?>
<?php foreach ($sql_submenu_produk_sql as $row_submenu_sql) { ?>
<li>
<div class="col-md-2 col-xs-12 bordered" style="min-height: 100px;">
<a href="" data-featherlight="image">
<?php echo get_the_post_thumbnail($post->ID); ?>
</a>
</div>
<div class="col-md-10 col-xs-12">
<h2 style="font-weight: normal;"><?php echo $row_submenu_sql->post_title ?></h2>
<p style="padding-bottom: 15px;"><?php echo $row_submenu_sql->post_content ?></p>
</div>
</li>
<?php } ;?>
</ul>
</div>
but, it's not showing after all while on the other page shows. Please help.
Should you have get_the_post_thumbnail($row_submenu_sql->ID); and not $row_submenu_sql->ID $post->ID is not defined in that loop.
<div class="row headline">
<ul class="col-md-12 col-sm-12">
<?php
$sql_submenu_produk_sql = $wpdb->get_results("
SELECT * from $wpdb->posts
WHERE post_parent=52 AND post_type='page' AND post_status='publish' group by ID;
");
?>
<?php foreach ($sql_submenu_produk_sql as $row_submenu_sql) { ?>
<li>
<div class="col-md-2 col-xs-12 bordered" style="min-height: 100px;">
<a href="" data-featherlight="image">
//UPDATE THIS LINE LIKE BELOW
<?php echo get_the_post_thumbnail($row_submenu_sql->ID); ?>
</a>
</div>
<div class="col-md-10 col-xs-12">
<h2 style="font-weight: normal;"><?php echo $row_submenu_sql->post_title ?></h2>
<p style="padding-bottom: 15px;"><?php echo $row_submenu_sql->post_content ?></p>
</div>
</li>
<?php } ;?>
</ul>
</div>

Resources