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>
Related
When I click on the "a" tag in the swiper slider, it does not go to the page and the slider starts to slide
this problem happens on mac
``
<div class="swiper-wrapper">
<?php do { ?>
<div class="swiper-slide">
<div class="slider-left-box">
<a href="<?php echo $SiteURL ?>tur-bilgisi/<?php echo $row_rsOneCikan['Seo']; ?>" title="<?php echo $row_rsOneCikan['Baslik']; ?>">
<img src="<?php echo $SiteURL ?>images/turlar/<?php echo $row_rsOneCikan['ResimBuyuk']; ?>" alt="<?php echo $row_rsOneCikan['Baslik']; ?>">
<div class="slider-left-box-content">
<div class="slider-left-box-content-wrapper">
<h3>ÖNE ÇIKAN TURLAR<span>yeni</span></h3>
<h4><?php echo $row_rsOneCikan['Baslik']; ?></h4>
<ul>
<li>
<h5><?php echo $row_rsOneCikan['KisaBilgi']; ?> </h5>
</li>
</ul>
<span style="color:#fff">Rezervasyon Yap</span> <img src="<?php echo $SiteURL ?>images/view-icone.png" alt="Rezervasyon Yap">
</div>
</div>
</a>
</div>
</div>
<?php } while ($row_rsOneCikan = mysql_fetch_assoc($rsOneCikan)); ?>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"><i class="fa fa-angle-left"></i></div>
<div class="swiper-button-next"><i class="fa fa-angle-right"></i></div>
```
im trying to send the id of the product selected in portfolio.php page to the page portfolio-detail.php and display the information from database according to the selected id
this is portfolio.php page
<ul class="portfolio-area da-thumbs">
<?php foreach ($product as $value): ?>
<li class="portfolio-item" data-id="id-0" data-type="web">
<div class="span3">
<div class="thumbnail">
<div class="image-wrapp">
<img src="<?php echo $target_dir.'/'.$value['product_pic']; ?>" alt="Portfolio name" title="" />
<article class="da-animate da-slideFromRight">
<a class="zoom" data-pretty="prettyPhoto" href="<?php echo $target_dir.'/'.$value['product_pic']; ?>">
<i class="icon-zoom-in icon-rounded icon-48 active"></i>
</a>
<a href="portfolio-detail.php" data-id="<?=$value['id']; ?>">
<i class="icon-link icon-rounded icon-48 active"></i>
</a>
<div class="hidden-tablet">
<p>
<?php echo $value['product_name']; ?>
</p>
</div>
</article>
</div>
</div>
</div>
</li>
<?php endforeach; ?>
</ul>
and this is portfolio-detail.php page
<section id="<?php echo $product['id']; ?>">
<div class="container">
<div class="row">
<div class="span12">
<article>
<div class="heading">
<h4><?php echo $product['product_name']; ?></h4>
</div>
<div class="clearfix">
</div>
<div class="row">
<div class="span8">
<!-- start flexslider -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="<?php echo $target_dir.'/'.$product['product_pic']; ?>" alt="" />
</li>
</ul>
</div>
<!-- end flexslider -->
<p>
<?php echo $product['product_desc']; ?>
</p>
</div>
<div class="span4">
<aside>
<div class="widget">
<div class="project-widget">
<h4 class="rheading">Portfolio detail<span></span></h4>
<ul class="project-detail">
<li><label>Project name :</label> <?php echo $product['product_name']; ?></li>
<li><label>Category :</label> <?php echo $product['product_code']; ?></li>
<li><label>Project date :</label> 12 Apr 2013</li>
<li><label>Project link :</label>www.somelink.com</li>
</ul>
</div>
</div>
</aside>
</div>
</div>
</article>
<!-- end article full post -->
</div>
</div>
</div>
</section>
how to show the details of a product according to the one selected ?
Here's a solution:
In portfolio.php
Change:
<a href="portfolio-detail.php" data-id="<?=$value['id']; ?>">
To:
<a href="portfolio-detail.php?data-id=<?php echo $value['id']; ?>">
Top of portfolio-detail.php add:
$id = $_GET['data-id'];
Do your DB query with $id
$product = {db stuff here};
Of course all proper validation will need to get added.
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>
I have an gallery.php file.It consist Albums and it's gallery images. My problem is when I click on Album image, Gallery images start to showing from images 4/4 then 3/4 and so on.
gallery.php
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lightbox-plus-jquery.min.js"></script>
<div class="menu-port">
<div class="container">
<div class="menu-grid-main">
<?php
include("database/connection.php");
$result=mysql_query("SELECT * from Album_image where status='process'");
while ($row1= mysql_fetch_array($result)) {
?>
<div class="col-md-4 menu-grid wow bounceInDown" data-wow-delay="0.3s">
<?php
include("database/connection.php");
$result1=mysql_query("SELECT * from Gallery_image where aid=$row1[aid]");
while ($row2= mysql_fetch_array($result1)) {
?>
<a href="admin/gcatch//<?php echo $row2['image'] ?>" data-lightbox="<?php echo $row1['name']?>" >
<?php }?>
<img src="admin/acatch/<?php echo $row1['image'] ?>" alt="" class="img-responsive">
</a>
<h3><?php echo $row1['name']?></h3>
<p><?php echo $row1['des']?></p>
</div>
<?php }?>
<div class="clearfix"> </div>
</div>
</div>
</div>
I used lightbox effect to showing gallery images
Please anyone help me to showing image proper format
there is syntax issue. try this
<div class="menu-port">
<div class="container">
<div class="menu-grid-main">
<?php
include("database/connection.php");
$result=mysql_query("SELECT * from Album_image where status='process'");
while ($row1= mysql_fetch_array($result)) {
?>
<?php
include("database/connection.php");
$result1=mysql_query("SELECT * from Gallery_image where aid=$row1[aid]");
while ($row2= mysql_fetch_array($result1)) {
?>
<div class="col-md-4 menu-grid wow bounceInDown" data-wow-delay="0.3s">
<a href="admin/gcatch//<?php echo $row2['image'] ?>" data-lightbox="<?php echo $row1['name']?>" >
<img src="admin/acatch/<?php echo $row1['image'] ?>" alt="" class="img-responsive">
</a>
<h3><?php echo $row1['name']?></h3>
<p><?php echo $row1['des']?></p>
</div>
<?php }?>
<?php }?>
<div class="clearfix"> </div>
</div>
</div>
</div>
this query is better for fetch data
"SELECT * from Gallery_image where aid=$row1[aid] ORDER BY id DESC"
ordering result is best way to figure out what data in what order is fetching
REMEMBER : mysql_* functions (mysql_connect OR mysql_query) are deprecated ! you should use PDO or at least mysqli functions
here is some resource to learn PDO : PDO and mysqli
/ intro to PDO (laracast tutorial)
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.