I'm breaking my head to make this code work, see.
I can list my wordpress articles by letter.
But I can't do the same so that it shows articles that start with numbers.
See my code
<ul>
<?php
//get all post IDs for posts beginning with cap B, in title order,
//display posts
$first_char = '0';
$postids=$wpdb->get_col($wpdb->prepare("
SELECT ID
FROM $wpdb->posts
WHERE SUBSTR($wpdb->posts.post_title,1,1) = %s
ORDER BY $wpdb->posts.post_title",$first_char));
if ($postids) {
$args=array(
'post__in' => $postids,
'post_type' => ' ',
'tag' => 'anime-dublado',
'orderby' => 'title',
'order' => 'ASC',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo ' '. $first_char;
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<style>
.thumbnail{
position:
z-index: 0;
}
.thumbnail:hover{
background-color:
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: fixed;
margin-top: 190px;
background-color: #d3d5d9;
padding: 5px;
left: -1000px;
border: 0px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 360px; /*position where enlarged image should offset horizontally */
}
</style>
<li>
<div class="manga-body">
<div class="thumb">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); }?>
<a class="thumbnail" href="#thumb">
<?php echo catch_that_image(52, 50) ?>
<span>
<?php echo catch_that_image(auto, auto) ?>
</span>
</a>
</div>
<div class="manga-list">
<h2> <?php the_title(); ?></h2>
</div>
<div class="" style="font-weight: margin-top: 20px;">
<div class="waktu"></div>
</div>
</div>
</li>
<?php
endwhile;
}
wp_reset_query(); // Restore global post data stomped by the_post().
}
?>
</ul>
I already tried to change that part $ first_char = '0-9'; for only one number but only 1 article appears.
I would like the code to show all articles that start with numbers only.
I could get it to work if I could put in that code $ first_char = '0,1,2,3,4,5,6,7,8,9,'; but I can't do that
Maybe this work:
$first_char = "('0','1','2','3','4','5','6','7','8','9')";
And in the SQL query change "=" for "IN"
WHERE SUBSTR($wpdb->posts.post_title,1,1) IN %s
Related
I have this section on my website:
This is on my homepage, pulling through items of a custom post type called products.
Each product has it's own product colour, I've allowed the user to select this from an Advanced Custom Field Colour Picker.
I've created the Arrows using CSS :before and :after (one for the line and one for the arrow head), so I could colour them using the product colour ACF.
This would mean I would have to apply the colour inline, inside the template. But as I have used Pseudo classes, I don't believe I can style them inline.
To get around this I added a style block inside my loop... This seems to work but it's only taking the yellow colour as I assume it's the first colour it finds...
Is there a way around this? I'm not sure if I'm making it too complex...
Here's the separate CSS from the CSS document:
.products-item-inner .arrow-right:after {
content: "";
border: solid;
/* border-color: <?php the_field('product_colour'); ?>; */
border-width: 0 2px 2px 0;
display: inline-block;
vertical-align: middle;
padding: 5px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
margin-left:-12px;
}
.products-item-inner .arrow-right:before {
width: 30px;
height: 2px;
/* background-color: <?php the_field('product_colour'); ?>;*/
content: "";
display: inline-block;
vertical-align: middle;
}
Here's the template loop with the added CSS <style> inline:
<div class="container">
<div class="row">
<?php
$args = array(
'post_type' => 'products',
'posts_per_page' => 9999,
'orderby' => 'none'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<!-- <a href="<?php the_permalink(); ?>"> -->
<div class="col-lg-4 products-item-outer">
<div class="col-12 products-item-inner">
<style type="text/css">
.products-item-inner .arrow-right:after { border-color: <?php the_field('product_colour'); ?>; }
.products-item-inner .arrow-right:before { background-color: <?php the_field('product_colour'); ?>; }
</style>
<div class="logo">
<?php
$image = get_field('logo');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right"></span></div>
</div>
</div>
<!-- </a> -->
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
Thanks for looking :)
Older browser support method
For maximum browser support, you can use the style attribute to assign a colour to your .arrow-right element, and can leverage currentColor in its pseudo-elements:
<div class="container">
<div class="row">
<?php
$args = array(
'post_type' => 'products',
'posts_per_page' => 9999,
'orderby' => 'none'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<!-- <a href="<?php the_permalink(); ?>"> -->
<div class="col-lg-4 products-item-outer">
<div class="col-12 products-item-inner">
<div class="logo">
<?php
$image = get_field('logo');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right" style="color: <?php the_field('product_colour'); ?>;"></span></div>
</div>
</div>
<!-- </a> -->
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
.products-item-inner .arrow-right:after {
content: "";
border: solid;
border-color: currentColor;
border-width: 0 2px 2px 0;
display: inline-block;
vertical-align: middle;
padding: 5px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
margin-left:-12px;
}
.products-item-inner .arrow-right:before {
width: 30px;
height: 2px;
background-color: currentColor;
content: "";
display: inline-block;
vertical-align: middle;
}
CSS Custom Property method
You could also use a CSS custom property, if you need the colour in more than one spot, where the method above won't work (unless you repeat the colour definition in several places).
I added it to your .products-item-outer element as a style attribute. This will cascade down into your .arrow-right pseudo-elements. I also added a fallback colour of rebeccapurple in this example, in case the value is missing.
<div class="container">
<div class="row">
<?php
$args = array(
'post_type' => 'products',
'posts_per_page' => 9999,
'orderby' => 'none'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<!-- <a href="<?php the_permalink(); ?>"> -->
<div class="col-lg-4 products-item-outer" style="--product-color: <?php the_field('product_colour'); ?>;">
<div class="col-12 products-item-inner">
<div class="logo">
<?php
$image = get_field('logo');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right"></span></div>
</div>
</div>
<!-- </a> -->
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
.products-item-inner .arrow-right:after {
content: "";
border: solid;
border-color: var(--product-color, rebeccapurple);
border-width: 0 2px 2px 0;
display: inline-block;
vertical-align: middle;
padding: 5px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
margin-left:-12px;
}
.products-item-inner .arrow-right:before {
width: 30px;
height: 2px;
background-color: var(--product-color, rebeccapurple);
content: "";
display: inline-block;
vertical-align: middle;
}
On the front page of my site I have 3 posts being pulled, with a div underneath each that is a link. I need each of the 3 divs to be a different color. New posts in this category are going to be displayed here as they are posted, but it will just display the most recent three. I need to make it so that the three "hear more >" divs are always the same color. Below are pics and the code.
How is it currently:
How I need it to be:
HTML:
<?php
$args = array(
'post_type' => 'success',
'posts_per_page' => 3,
'order' => 'ASC'
);
$query = new WP_Query($args);
?>
<?php while ($query->have_posts()) : $query->the_post(); ?>
<div class="success-stories-div">
<div class="success-stories-text">
<p style="font-size: 120%;">Success Story</p>
<?php the_content(); ?>
</div>
<a href="<?php the_permalink(); ?>">
<div class="success-stories-link">Hear More >
</div>
</a>
</div>
<?php endwhile; wp_reset_query(); ?>
CSS:
.success-stories .success-stories-link {
margin-top: 1em;
width: 465px;
height: 50px;
background-color: #F4B147;
padding: 12px 0 0 15px;
}
you can use selector
example:
<style>
div{
margin-top: 1em;
width: 465px;
height: 50px;
padding: 12px 0 0 15px;
}
div.success-stories-link:nth-child(1) {
background: green;
}
div.success-stories-link:nth-child(2) {
background: yellow;
}
div.success-stories-link:nth-child(3) {
background: red;
}
</style>
<div class="success-stories-link">1</div>
<div class="success-stories-link">2</div>
<div class="success-stories-link">3</div>
I think that the problem is that you are not calling the other colors: I would try something like this: What I am doing here is that I am creating a variable $i and make it $i=0 then inside the while loop I increment $i and so I can add a number at the end of the css class and it will look like this:
class="success-stories-link<?php echo $i; ?>"
<?php
$args = array(
'post_type' => 'success',
'posts_per_page' => 3,
'order' => 'ASC'
);
$query = new WP_Query($args);
?>
<?php $i = 0;
while ($query->have_posts()) : $query->the_post(); ?>
<div class="success-stories-div">
<div class="success-stories-text">
<p style="font-size: 120%;">Success Story</p>
<?php the_content(); ?>
</div>
<a href="<?php the_permalink(); ?>">
<div class="success-stories-link<?php echo $i; ?>">Hear More >
</div>
</a>
</div>
<?php $i++; endwhile; wp_reset_query(); ?>
in the css I would add different background-color:
.success-stories .success-stories-link0 {
margin-top: 1em;
width: 465px;
height: 50px;
background-color: #F4B147;
padding: 12px 0 0 15px;
}
.success-stories .success-stories-link1 {
background-color: another-color;
}
.success-stories .success-stories-link2 {
background-color: another-color;
}
I haven't test this code. Also, I am looking at the pictures How I need to be:
Also, there might be a better solution to it...but this should save your life for now =)
I have a list of post titles with their featured image above it. The last post title in the list is two lines, so it messes up the alignment of the list. Below is an image. I want the first three posts to move upwards to align with the last one.
The code:
<div class="classes-links">
<?php
$args = array(
'post_type' => 'class',
'posts_per_page' => 4,
'order' => 'ASC'
);
$query = new WP_Query($args);
?>
<?php while ($query->have_posts()) : $query->the_post(); ?>
<a href="<?php the_permalink(); ?>">
<ul><li><?php the_post_thumbnail(); ?></li>
<li><?php the_title(); ?></li>
</ul>
</a>
<?php endwhile; wp_reset_query(); ?>
</div>
CSS:
.classes-services .classes-div .classes-links {
display: inline-block;
float: right;
position: relative;
margin: 80px 250px 0 0;
}
.classes-services .classes-div .classes-links a {
text-decoration: none;
color: #113337;
}
.classes-services .classes-div .classes-links ul {
display: inline-block;
margin: 0 auto;
text-align: center;
}
give vertical-align: top to the ul displayed inline-block and it should work
You could put them in a table and set valign:top; on the tr element. If you use percentage based width for the table and the td elements, it will flex fine if your application is responsive.
This will align the images to the top instead of middle aligning the text and image.
3 posts are displayed and under each of them there is a thin 1px border line - the last (3rd) post should not have this border. How to do that?
Code:
<?php
$args = array( 'numberposts' => 3 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post); ?>
<!-- TITLE -->
<div class="proponowanytitle">
<?php the_title(); ?>
</div>
<!-- DATE -->
<div class="proponowanydate">
<?php the_time('m F Y');?>
</div>
<?php endforeach; ?>
CSS:
.proponowanytitle {
color:#34a694;
font-size:13px;
font-weight:400;
padding:15px 0 0 0;
margin:0;
}
.proponowanydate {
color:#999a9b;
font-size:14px;
font-weight:400;
padding:0 0 15px 0;
margin:0;
border-bottom:1px solid #e2e2e3;
}
.proponowanydate:last-child {
color:#999a9b;
font-size:14px;
font-weight:400;
padding:0 0 15px 0;
margin:0;
}
It doesn't work, i tried :not(:last-child) as well. Can anyone help me set the last-child?
As mentioned in the other comment, you can use the :last-child pseudo class. However, you need to make sure the last .proponowanydate is the last child of it's parent.
To make sure this happens, add in a wrap/container div:
HTML/PHP
<div class="container">
<?php
$args = array( 'numberposts' => 3 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post); ?>
<!-- TITLE -->
<div class="proponowanytitle">
<?php the_title(); ?>
</div>
<!-- DATE -->
<div class="proponowanydate">
<?php the_time('m F Y');?>
</div>
<?php endforeach; ?>
</div>
CSS
.proponowanytitle {
color:#34a694;
font-size:13px;
font-weight:400;
padding:15px 0 0 0;
margin:0;
}
.proponowanydate {
color:#999a9b;
font-size:14px;
font-weight:400;
padding:0 0 15px 0;
margin:0;
border-bottom:1px solid #e2e2e3;
}
.proponowanydate:last-child {
border-bottom: none;
}
Use the CSS :last-child selector after adding a parent element. See here.
.proponowanydate:last-child{
border-bottom: none;
}
I really don't know much about coding and my developer has gone dark so I really need some advice on how to fix this problem. The footer on one of my pages won't stay at the bottom and is covering up some of the content. Below is the code. How can I make the footer stay at the bottom of the page? Here is the page: http://www.halfmoonbaymeetings.com/hot-dates-hot-rates/
<?php
/*
Template Name: Hot Dates Hot Rates
*/
?>
<?php get_header(); ?>
<div class="col7 equalheight" id="content">
<?php $my_query = new WP_Query('page_id=76'); while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>
<h1 class="title"><?php the_title(); ?></h1>
<?php $subtitle = get_post_meta($post->ID, 'subtitle', TRUE); if($subtitle != '') { ?>
<p class="subtitle"><?php echo $subtitle; ?></p>
<?php } ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php $my_query = new WP_Query('showposts=1000&post_type=featured-hotels'); while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>
<?php if ( get_post_meta( get_the_ID(), '_hotdates', true ) ) { ?>
<div class="col6 featuredhotel steals hotelheight">
<?php echo get_post_meta($post->ID, "_hotdates", true); ?>
</div><!-- END .col6.featuredhotel.steals -->
<?php } ?>
<?php endwhile; ?>
</div><!-- END .col8 #content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
And here is the footer code from the Stylesheet:
.footerwrap {
background: #F9F9F9;
float: left;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
.footerwrap .col12 { text-align: center; }
.footerwidgets {
background: #eee;
border-top: 5px solid #e0e0e0;
float: left;
margin: 0;
padding: 20px 0 0 0;
position: relative;
width: 100%;
You need to add margin-bottom: 289px; to the .contentwrap div because the footer is 289px high so you need to add 289px bottom of the .contentwrap div to offset that.
.contentwrap
{
float: left;
margin: 0;
padding: 0;
position: relative;
width: 100%;
margin-bottom: 289px;
}