load more articles button wordpress - javascript

I want to create a "load more articles" button that would generate 6 more articles. I have been looking online and found some tutorials, but they are for websites hosted in wordpress. my website only uses wordpress for news articles and posts them to my html page (I dont think its the right way to do it, but its what works for me at the moment)
Here is my site so far: http://futsoc.co/news/overview/recent-news/ (I corrected the link)
Here is what my code looks like so far. I want the new articles to be posted with the same format as the second loop:
I have a loop to show the 6 featured articles
<div class="row">
<?php $my_query = new WP_Query( 'category_name=featured&posts_per_page=6' );
while ( $my_query->have_posts() ) : $my_query->the_post();
$do_not_duplicate[] = $post->ID; ?>
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div class="col-sm-6 col-md-6 col-xl-4">
<article class="news-container">
<a href="<?php the_permalink();?>" class="news-link">
<div class="news-image">
<div class="news-img-bg" style="background-image: url('<?php echo $thumb['0'];?>')"></div>
</div>
<div class="news-info">
<p>
<i class="far fa-clock" style="padding-right:5px;"></i>
<?php echo get_the_date(); ?>
</p>
<h5>
<?php the_title(); ?>
</h5>
</div>
</a>
</article>
</div>
<?php endwhile; ?>
</div>
and I have a loop to show the 6 most recent articles (excluding the ones already featured)
<div class="row">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
if ( in_array( $post->ID, $do_not_duplicate ) ) continue; ?>
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div class="col-sm-12 col-md-6">
<article class="news-container-small">
<a href="<?php the_permalink();?>" class="news-link-small">
<div class="news-image-small">
<div class="news-img-bg-small" style="background-image: url('<?php echo $thumb['0'];?>')"></div>
</div>
<div class="news-info-small">
<p>
<i class="far fa-clock" style="padding-right:5px;"></i>
<?php echo get_the_date(); ?>
</p>
<h5>
<?php the_title(); ?>
</h5>
</div>
</a>
</article>
</div>
<?php endwhile; endif; ?>
</div>

Related

Clicking links in content not working (non css issue)

I have a Wordpress + Webpack theme with a custom post type archive page for careers. Problem is that none of the links are clickable in the content (breacrumbs (yoast module), content links, post permalinks). The issue appeared recently. The header menu works fine.
So far I've tried:
removing the content text: no effect
remove post listing to see if the issue is related to the listing only
Tried moving the post loop to another template: still not clickable
absolute position css to see if anything is overlapping: no effect
remove all styles, leave only html: no effect
disabling all plugins: no effect.
oddly it works from time-to-time on safari but cant see a logic in it (but not firefox, opera, chrome)
Issue is not present on local install either (codebase for theme is the same)
The jobs listing archive template looks as follows:
<?php /* Template Name: Jobs */ ?>
<?php get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="page-content">
<div class="jobs-listing">
<div class="blob-wrap">
<div class="blob blob-right-top"><img src="<?php bloginfo('template_url'); ?>/assets/page-blob_4.svg" alt="NEXD Blob"></div>
<div class="blob blob-left-top is-hidden-mobile"><img src="<?php bloginfo('template_url'); ?>/assets/blog-blob.svg" alt="NEXD Blob"></div>
<div class="blob blob-left-bottom"><img src="<?php bloginfo('template_url'); ?>/assets/table-blob-left.svg" alt="NEXD Blob"></div>
</div>
<div class="positions-wrap above-fold_wrap">
<div class="container positions-container">
<div class="breadcrumbs">
<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<p id="breadcrumbs">','</p>'); } ?>
</div><!-- breadcrumbs -->
<div class="columns is-centered" data-aos="fade-up">
<div class="column">
<div class="positions-title has-text-centered columns is-centered">
<div class="column is-8">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
<img src="<?php bloginfo('template_url'); ?>/assets/scroll-mouse--blue.svg" alt="Scroll icon">
</div>
</div><!-- title -->
<div class="positions columns">
<?php $args = array(
'post_type' => 'jobs',
'posts_per_page' => -1, //show all posts
);
$posts = new WP_Query($args); if( $posts->have_posts() ): while( $posts->have_posts() ) : $posts->the_post(); ?>
<div class="column">
<a href="<?php echo get_permalink(); ?>" title="Read more about <?php echo get_the_title(); ?>">
<div class="positions-inner">
<div class="position-title">
<h3><?php echo get_the_title(); ?></h3>
</div>
<div class="position-link">
<span><?php the_field('starting_from'); ?></span>
</div>
<div class="position-locations">
<img src="<?php bloginfo('template_url'); ?>/assets/icon-map--pin.svg" alt="map-pin"><span class="location-name"><?php the_field('location'); ?></span>
</div>
</div>
</a>
</div>
<?php endwhile; endif; ?>
<?php wp_reset_postdata(); ?>
</div>
</div><!-- column is-10 -->
</div><!-- columns -->
</div><!-- container -->
</div><!-- positions -->
</div><!-- jobs listing-->
</div>
</div>
</div><!-- .content-area -->
<?php get_footer(); ?>
When I switch to the common template, all links in content work and rest of the site is fine.
View here
I test your website, if you click the link before an external/internal source is loaded the link work.
So you have 2 option, try to find which of that source block your link or use this code for exceed the problem:
<div class="column">
<div class="positions-inner">
<a href="https://www.nexd.com/career/technical-writer/" title="Read more about
Technical Writer">
<div class="position-title">
<h3>Technical Writer</h3>
</div>
<div class="position-link">
<span>ASAP</span>
</div>
<div class="position-locations">
<img src="https://www.nexd.com/wp-content/themes/nexd_theme/assets/icon-map--pin.svg"
alt="map-pin"><span class="location-name">Tallinn, Estonia</span>
</div>
</a>
</div>
</div>
This is with php code:
<div class="column">
<div class="positions-inner">
<a href="<?php echo get_permalink(); ?>" title="Read more about <?php echo
get_the_title(); ?>">
<div class="position-title">
<h3><?php echo get_the_title(); ?></h3>
</div>
<div class="position-link">
<span><?php the_field('starting_from'); ?></span>
</div>
<div class="position-locations">
<img src="<?php bloginfo('template_url'); ?>/assets/icon-map--pin.svg" alt="map-pin"><span class="location-name"><?php the_field('location'); ?></span>
</div>
</a>
</div>
</div>

why pagination in my wordpress theme is not showing (wp-paginate plugin)

I use the rethink theme in wordpress, and use the wp-paginate plugin
in arcive.php, category.php and index.php pagination is fine
but why in page.php not running?
and I created my own template showing all the posts
posting.php
<?php
/*
Template Name: posting
*/
get_header();
?>
<div class="full-content">
<div class="grid_17 alpha">
<div class="content_bar">
<div class="feature_content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
$count_posts = wp_count_posts();
$published_posts = $count_posts->publish;
$myposts = get_posts(array('posts_per_page'=>3)); ;
foreach($myposts as $post) :
setup_postdata($post);
?>
<div id="post-<?php the_ID(); ?>" <?php post_class('product'); ?>>
<div class="post-info">
<h1 class="product_title">
<a href= "<?php the_permalink(); ?>" rel="bookmark" title="<?php echo sprintf(__("Permanent link to %s", 'rethink'), get_the_title(get_the_ID())); ?>">
<?php the_title(); ?>
</a>
</h1>
<div class="detail">
<ul class="post_meta">
<li class="admin"><?php printf(__("Posted by %s", 'rethink'), get_the_author_link()); ?></li>
<li class="date"><?php printf(__('Posted on %s', 'rethink'), get_the_time('F j, Y')); ?></li>
<li class="category"><?php the_category(','); ?></li>
<li class="commentt"><?php comments_popup_link(__('No Comments.', 'rethink'), __('1 Comment.', 'rethink'), __('% Comments.', 'rethink')); ?></li>
</ul>
</div>
</div>
<div class="post_thumbnail_wrapper">
<?php if (has_post_thumbnail()) { ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('post_thumbnail', array('class' => 'postimg')); ?>
</a>
<?php
} else {
echo rethink_main_image();
}
?>
</div>
<div class="product_content"><?php the_excerpt(); ?><div class="buttons"><a class="btn-2" href="<?php the_permalink() ?>"><span><?php _e('Read Review', 'rethink') ?></span></a></div>
</div>
</div>
<?php endforeach;
if(function_exists('wp_paginate')){
wp_paginate(); }
wp_reset_postdata(); ?>
<div class="clear"></div>
<?php endwhile;
else:
?>
<div class="product">
<p>
<?php _e('Sorry, no posts matched your criteria.', 'rethink'); ?>
</p>
</div>
<?php endif; ?>
</div>
</div>
</div>
<div class="grid_7 omega">
<!--Start Sidebar-->
<?php get_sidebar(); ?>
<!--End Sidebar-->
</div>
</div>
<?php get_footer(); ?>
how i want to display the pagination of my coding ????
sorry if the line of code is not neat I still newbie
Update this Code:
if(function_exists('wp_paginate')){
wp_paginate();
}
to this code:
if(function_exists('wp_paginate')){
wp_paginate(array('page' => 'page'));
}

Get multiple checkbox values in Yii

I have a page in which a user is able to select his desired category and get a listing of organizations. As for now, I've managed to get data from one selected category.
My issue now is getting multiple selected categories and retrieve data from multiple ids.
List of categories:
<div class="col-md-4 sidebar well col-md-push-8">
<div class="sidebar__block">
<div class="sidebar__inner">
<h4 class="h4">Filter by category</h4>
<?php foreach ($categories as $c): ?>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" name="category[]" id="<?php echo $c->id;?>" value="<?php echo $c->id;?>" class="styled" <?php if($c->id==$_GET['category']){ echo 'checked="checked"'; } ?>>
<label for="<?php echo $c->title; ?>"><?php echo $c->title;?></label>
</div>
</div>
<?php endforeach ?>
<div class="form-group">
<button type="submit" class="btn btn-sd btn-sd-green full-width filter_button" name="subscribe">Filter <i class="icon-right-small"></i></button>
</div>
</div>
</div>
</div>
List of data(organizations according to category selected):
<div class="col-md-8 col-md-pull-4">
<!--start show category with title-->
<div class="lgi__block lgi__block-2" id="appnendGridId">
<!--start show single category with title-->
<?php if(!empty($enterprises)): ?>
<?php foreach ($enterprises as $e): ?>
<div class="lgi__item category1">
<a class="lgi__item-inner" target="_blank" href="<?php echo $this->createUrl('frontend/enterprise', array('id' => $e->id)) ?>">
<div class="lgi__block-img">
<h5 class="lgi__label"><?php if($e->isIdeaEnterpriseActiveAccreditedMembership()): ?><?php echo $e->renderIdeaEnterpriseMembership('text')?><?php endif; ?></h5>
<img class="img-responsive-full lgi__img wp-post-image" src="<?php echo $e['imageLogoUrl']; ?>" alt="">
<div class="overlay"></div>
</div>
<div class="lgi__title stripe">
<h4><?php echo $e['title']; ?></h4>
<p><?php echo ysUtil::truncate($e['text_oneliner'], 85) ?></p>
</div>
</a>
</div>
<?php endforeach ?>
<?php else: ?>
<?php echo Notice::inline('Enterprises not found in this category or keyword') ?>
<?php endif; ?>
<!--end show single category with title-->
</div>
<!--end show category with title-->
<div class="row load_more_div">
<div class="col-sm-12 text-center">
<button type="button" class="btn btn-sd btn-sd-green full-width load-more-posts collapse please_wait_btn_class">
<h4 style="margin-top: 7px; color: #fff;">Loading...</h4>
</button>
<button type="button" class="btn btn-sd btn-sd-green full-width load-more-posts load_more_btn_class">
Load More <i class="icon-arr-down"></i>
</button>
</div>
</div>
</div>
JS :
$(document).on('click','.filter_button',function(e){
e.preventDefault();
var category = [];
$.each($("input[name='category[]']:checked"), function(){
window.location.replace('/idea/frontend/explore/category/'+$(this).val());
});
});
Appreciate if anyone could help me in this matter.

Remove Post View Count at the end of the Content

I have a 4.3 wordpress system that i install on it the "Orca Theme".
I notice i have duplicate indication of Post View Count:
I want to remove the First Indicator.
I try to look around amd search in the theme code and didnt find what display the First indicator.
postformat/standart.php:
<?php
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id, 'postlist', true);
$title_meta = get_post_meta($post->ID, 'title_style', true);
$title_meta = ($title_meta == ('banner' || 'title')) ? $title_meta : "standard";
$category = get_the_category();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> class="post standard">
<?php if($title_meta == "banner"){ ?>
<a class="basicfeature" href="<?php esc_url(the_permalink()); ?>" style="background-image:url('<?php echo esc_url($thumb_url[0]); ?>');"></a>
<h1><?php the_title(); ?></h1>
<?php }elseif($title_meta == "feature"){ ?>
<a href="<?php esc_url(the_permalink()); ?>" class="largeimage postfeature" style="background-image:url('<?php echo esc_url($thumb_url[0]); ?>');">
<div class="shadow"></div>
<h1><?php the_title(); ?></h1>
</a>
<?php }else{ ?>
<h1><?php the_title(); ?></h1>
<?php } ?>
<div class="info">
<div class="left">
<i class="issticky fa fa-thumb-tack "></i><img src="http://0.gravatar.com/avatar/<?php echo esc_attr(md5(get_the_author_meta('user_email'))); ?>?s=32" alt="author" class="minigravatar"><?php the_author(); ?>
</div>
<div class="right">
<i class="fa fa-clock-o"></i><?php echo esc_html(orca_get_time()); ?>
<div class="category"><i class="fa fa-tags"></i>
<?php if($category){
echo '' . $category[0]->name.' ';
} ?>
</div>
</div>
</div>
<div class="postcontents">
<?php the_content('', FALSE, ''); ?>
</div>
<div class="footer">
<?php esc_html_e('Read More', 'orcawp'); ?>
<i class="fa fa-comments"></i><?php echo esc_html(get_comments_number($post->id)); ?>
<?php if(get_post_meta($post->ID, '_count-views_all', true) != ''){ ?>
<i class="fa fa-bullseye"></i><?php echo esc_html(get_post_meta($post->ID, '_count-views_all', true)); ?>
<?php } ?>
</div>
Solve it!
I just Deactivated the "BAW Post Views Count" plugin and now it removed!

How Do I get lean modal js to show more than one modal in wordpress?

I have set up the modal for a team member page in WordPress as an advanced custom fields repeater field. That part works well, as it repeats and the modal opens up, but it only has the first team member's modal open up even though, it's another team member. My code is as follows:
<div class="leadership-row">
<?php
if ( get_field('leadership_block') ):
while( has_sub_field('leadership_block') ) :
?>
<div class="Leadership">
<a href="#teammember" rel="leanModal">
<div class="leadership-image">
<img src="<?php echo get_sub_field('leadership_image'); ?>" />
</div><!-- end of leadership-image -->
</a>
<div class="leadership-copy">
<h5 class="leadership-name"><?php echo get_sub_field('leadership_name'); ?></h5>
<h5 class="leadership-position"><?php echo get_sub_field('leadership_position'); ?></h5>
</div>
</div><!-- end of Leadership -->
<?php
endwhile;
endif;
?>
<?php
if ( get_field('team_modal') ):
while( has_sub_field('team_modal') ) :
?>
<div id="teammember">
<a class="modal_close"></a>
<div class="modal-image">
<img src="<?php echo get_sub_field('modal_image'); ?>" />
</div><!-- end of modal-image -->
<div class="modal-copy">
<h4><?php echo get_sub_field('modal_name'); ?></h4>
<p><?php echo get_sub_field('modal_position'); ?></p>
<img src="<?php echo get_sub_field('modal_icon'); ?>" />
<p><?php echo get_sub_field('modal_description'); ?></p>
</div><!-- end of modal-copy -->
</div><!-- end of teammember -->
<?php
endwhile;
endif;
?>
</div>
My JQuery is set up like this:
jQuery(document).ready(function($) {
$("a[rel*=leanModal]").leanModal({ top : 200, overlay : 0.4, closeButton: ".modal_close" });
});
Any help would be immensely appreciated.

Categories