I have this function, it is supposed to handle icons for CPT in wordpress , but Somehow it is not working ..
add_action('admin_head', 'fbdf_cpt_icons_add');
function fbdf_cpt_icons_add() {
?>
<style>
<?php if (($_GET['post_type'] == 'my_cpt') || ($post_type == 'my_cpt')) : ?>
#icon-edit { background:transparent url('<?php echo plugin_dir_url(__FILE__) .'/img/cpt.32.png';?>') no-repeat; }
<?php endif; ?>
</style>
<?php }
Any ideas why ?
yes, I have an idea..
you need to make $post type global..
Add global $post_type; to the beginning of your function like so ..
add_action('admin_head', 'fbdf_cpt_icons_add');
function fbdf_cpt_icons_add() {
global $post_type; // here
?>
<style>
<?php if (($_GET['post_type'] == 'my_cpt') || ($post_type == 'my_cpt')) : ?>
#icon-edit { background:transparent url('<?php echo plugin_dir_url(__FILE__) .'/img/cpt.32.png';?>') no-repeat; }
<?php endif; ?>
</style>
<?php }
Related
I am trying to replace the text on my WordPress site page titles with an image. I am working locally with a child theme. I need to also be able to target each page separately as the images will be different.
It currently looks like:
I want to design some custom titles in Photoshop and save them as Jpg/Png and then replace the text.
I think i have identified the right part of the CSS
.hestia-title{
}
I have tried
.hestia-title{
font-size: 0px;
background-image:url(assets/img/quick_test.jpg);
}
This makes it look like this:
Could anyone point me in the right direction with this please? Thanks
I have now been able to get it looking like this:
Using this code:
.page-id-88 .page-header .hestia-title{
color:transparent;
background-image: url(assets/img/title_mock.png);
}
.page-header.header-small .hestia-title{
background-size:contain;
background-repeat: no-repeat;
}
.home .hestia-title{
display:none;
}
This is the page.php content
<?php
/**
* The template for displaying all single posts and attachments.
*
* #package Hestia
* #since Hestia 1.0
*/
get_header();
do_action( 'hestia_before_single_page_wrapper' );
?>
<div class="<?php echo hestia_layout(); ?>">
<?php
$class_to_add = '';
if ( class_exists( 'WooCommerce' ) && ! is_cart() ) {
$class_to_add = 'blog-post-wrapper';
}
?>
<div class="blog-post <?php esc_attr( $class_to_add ); ?>">
<div class="container">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', 'page' );
endwhile;
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</div>
</div>
<?php get_footer(); ?>
You can go to the page.php file of your active child theme find out <? the_title(); ?> function. You can commnet this code then page title will not come.
For the image, you can use the featured image, set featured image on each page. Now you can use this code to display image
if (has_post_thumbnail()) {
the_post_thumbnail('full'); // just the image
}
To hide page title from CSS use this code
.page h1.hestia-title {
font-size: 0;
}
I combined a slider with the repeater fields.
under the repeater I have 2 subfields. one called “image” and the other “title”
this slider has a class called “selected-item” that dynamically appear when an image is selected. (when this class is on an image the image change it’s size).
How can I define that when the class “selected-item” is on some image also the “title” form the same row of the image will appear?
this is the code the displays the images:
<?php
// check if the repeater field has rows of data
$i = 1;
if( have_rows('carousel_images') ):
// loop through the rows use_cases_fields data
while ( have_rows('carousel_images') ) : the_row();
$title=get_sub_field('image_carousel_discription');
$image = get_sub_field('image_carousel1');
if( !empty($image) ):
// vars
// thumbnail
$thumb = $image;
$i++;
?>
<h1 data-row="< echo $i; >"> <?php echo $title ?> </h1>
<li> <img data-row="< echo $i; >" src="<?php echo $thumb ?>"/> </li>
<?php endif; ?>
<?php
endwhile;
endif;
?>
?>
Keep the title hidden in the beginning and then show the title when selected-item class is applied. If h1 is going to be always next to the image tag then use the + selector.
h1 { display: none; }
.selected-item + h1 { display: block; }
Or you can detect a class change event using jquery.
function checkForChanges()
{
if ($('img').hasClass('selected-item'))
$('h1').css('display','block');
else
setTimeout(checkForChanges, 500);
}
checkForChanges();
$("#click").on('click', function(){
$('img').addClass("selected-item");
});
h1 { display: none; } /* Keep the title hidden in the beginning */
/* Show the title when selected-item class is applied */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://via.placeholder.com/100x100" width="100" height="100">
<h1>title</h1>
<div id="click">click me</div>
how can I change the HTML markup of bootstrap grid in my wordpress child theme?
I have this markup in the child theme
<div class="col-sm-6 col-md-3 footer-sidebar-wrap">
and would like to change the column width to
.col-xs-6 .col-sm-4
is there a way to override this is the custom CSS editor?
thanks!
It's possible to change with CSS:
.footer-sidebar-wrap.col-sm-6.col-md-3 {
/* Copy ALL style rules for .col-xs-6 and .col-sm-4 here. */
}
It's a bad idea, though, for maintainability reasons. Better to take #Nick Surmanidze's advice in his comment and change the html in the template.
here is the current footer.php file that I'm trying to edit
<?php
/**
* Template functions used for the site footer.
*
*/
if ( ! function_exists( 'shop_isle_footer_widgets' ) ) {
/**
* Display the footer widgets
* #since 1.0.0
* #return void
*/
function shop_isle_footer_widgets() {
?>
<!-- Widgets start -->
<?php if ( is_active_sidebar( 'sidebar-footer-area-1' ) || is_active_sidebar( 'sidebar-footer-area-2' ) || is_active_sidebar( 'sidebar-footer-area-3' ) || is_active_sidebar( 'sidebar-footer-area-4' ) ) : ?>
<div class="module-small bg-dark shop_isle_footer_sidebar">
<div class="container">
<div class="row">
<?php if ( is_active_sidebar( 'sidebar-footer-area-1' ) ) : ?>
<div class=".col-xs-6 .col-sm-4 footer-sidebar-wrap">
<?php dynamic_sidebar('sidebar-footer-area-1'); ?>
</div>
<?php endif; ?>
<!-- Widgets end -->
<?php if ( is_active_sidebar( 'sidebar-footer-area-2' ) ) : ?>
<div class=".col-xs-6 .col-sm-4 footer-sidebar-wrap">
<?php dynamic_sidebar('sidebar-footer-area-2'); ?>
</div>
<?php endif; ?>
<!-- Widgets end -->
<?php if ( is_active_sidebar( 'sidebar-footer-area-3' ) ) : ?>
<div class=".col-xs-6 .col-sm-4 footer-sidebar-wrap">
<?php dynamic_sidebar('sidebar-footer-area-3'); ?>
</div>
<?php endif; ?>
<!-- Widgets end -->
</div><!-- .row -->
</div>
</div>
<?php endif; ?>
<?php
}
}
if ( ! function_exists( 'shop_isle_footer_copyright_and_socials' ) ) {
/**
* Display the theme copyright and socials
* #since 1.0.0
* #return void
*/
function shop_isle_footer_copyright_and_socials() {
?>
<!-- Footer start -->
<footer class="footer bg-dark">
<!-- Divider -->
<hr class="divider-d">
<!-- Divider -->
<div class="container">
<div class="row">
<?php
/* Copyright */
$shop_isle_copyright = get_theme_mod('shop_isle_copyright',__( '© Themeisle, All rights reserved', 'shop-isle' ));
if( !empty($shop_isle_copyright) ):
echo '<div class="col-sm-6">';
echo '<p class="copyright font-alt">'.$shop_isle_copyright.'</p>';
$shop_isle_site_info_hide = get_theme_mod('shop_isle_site_info_hide');
if( isset($shop_isle_site_info_hide) && $shop_isle_site_info_hide != 1 ): ?>
<p class="shop-isle-poweredby-box"><a class="shop-isle-poweredby" href="http://themeisle.com/themes/shop-isle/" rel="nofollow">ShopIsle </a><?php _e('powered by','shop-isle'); ?><a class="shop-isle-poweredby" href="http://wordpress.org/" rel="nofollow"> WordPress</a></p>
<?php
endif;
echo '</div>';
endif;
/* Socials icons */
$shop_isle_socials = get_theme_mod('shop_isle_socials',json_encode(array( array('icon_value' => 'social_facebook' ,'link' => '#' ),array('icon_value' => 'social_twitter' ,'link' => '#'), array('icon_value' => 'social_dribbble' ,'link' => '#'), array('icon_value' => 'social_skype' ,'link' => '#') )));
if( !empty( $shop_isle_socials ) ):
$shop_isle_socials_decoded = json_decode($shop_isle_socials);
if( !empty($shop_isle_socials_decoded) ):
echo '<div class="col-sm-6">';
echo '<div class="footer-social-links">';
foreach($shop_isle_socials_decoded as $shop_isle_social):
if( !empty($shop_isle_social->icon_value) && !empty($shop_isle_social->link) ) {
if (function_exists ( 'icl_t' ) && !empty($shop_isle_social->id)){
$shop_isle_social_icon_value = icl_t( 'Social '.$shop_isle_social->id, 'Social icon', $shop_isle_social->icon_value );
$shop_isle_social_link = icl_t( 'Social '.$shop_isle_social->id, 'Social link', $shop_isle_social->link );
echo '<span class="'.$shop_isle_social_icon_value.'"></span>';
} else {
echo '<span class="'.$shop_isle_social->icon_value.'"></span>';
}
}
endforeach;
echo '</div>';
echo '</div>';
endif;
endif;
?>
</div><!-- .row -->
</div>
</footer>
<!-- Footer end -->
<?php
}
}
if ( ! function_exists( 'shop_isle_footer_wrap_open' ) ) {
/**
* Display the theme copyright and socials
* #since 1.0.0
* #return void
*/
function shop_isle_footer_wrap_open() {
echo '</div><div class="bottom-page-wrap">';
}
}
if ( ! function_exists( 'shop_isle_footer_wrap_close' ) ) {
/**
* Display the theme copyright and socials
* #since 1.0.0
* #return void
*/
function shop_isle_footer_wrap_close() {
echo '</div><!-- .bottom-page-wrap -->';
}
}
I am using Advanced Custom Fields to display a background image in my header. Now I want to display a default image if there is no ACF-image defined. I tried this code, but it didn't work (image only shows if it is set):
<?php wp_head(); ?>
<?php if(get_field('header')) {
$image = get_field('header');
} else {
$image = '<img src="#absolute-path-to-my-image">';
}
?>
<style type="text/css">
#inner-header{
background-image: url('<?php echo $image['url']; ?>');
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
</style>
thanks for any help.
I'd change things up a bit. You're experiencing problems because you're passing an image element in if there's no 'header' present (you should only be passing the src):
<?php
// Get the field
$image = get_field('header');
// Does the field exist ? src : default
$image_src = $image ? $image['url'] : 'http://example.com/default/src.jpg';
?>
<style>
#inner-header {
background: url(<?php echo $image_src; ?>) center / cover no-repeat;
}
</style>
I'm trying to display my posts my like.
A B
C D
E F
G
H
I
So far I have the following:
<div id="left-column">
<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>
<div class="post-row">
<?php
if ( function_exists( 'add_theme_support' ) && has_post_thumbnail()){
the_post_thumbnail(array(170, 80));
}
?>
<div class="post-title"><?php the_title();?></div><!--post-title-->
<div class="post-content excerpt"><?php the_excerpt();?></div><!--post-content-->
</div><!--post-row-->
<?php endif; endwhile; else: ?>
<?php endif; ?>
</div><!--left-column-->
<div id="right-column">
<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
<div class="post-row">
<?php
if ( function_exists( 'add_theme_support' ) && has_post_thumbnail()){
the_post_thumbnail(array(170, 80));
}
?>
<div class="post-title"><?php the_title();?></div><!--post-title-->
<div class="post-content excerpt"><?php the_excerpt();?></div><!--post-content-->
</div><!--post-row-->
<?php endif; endwhile; else: ?>
<?php endif; ?>
</div><!--right-column-->
<div id="restofpage">
NEED THE REST OF THE CODE.
</div>
Any idea how I can limit my logic to just 6 posts and how to continue wit the rest of the page?
don't do two whiles - keep it to just one. create an <article> or <div>for every post and just change the class: for example small for the first 6 and wide for the rest ...
<div id="page">
<?php
if (have_posts()) :
$index = 0;
while(have_posts()) : the_post();
?>
<article class="post<?= $index < 5 ? ' small' : ' wide' ?>">
<?php
if ( function_exists( 'add_theme_support' ) && has_post_thumbnail()){
the_post_thumbnail(array(170, 80));
}
?>
<div class="post-title"><?php the_title();?></div><!--post-title-->
<div class="post-content excerpt"><?php the_excerpt();?></div><!--post-content-->
</article><!-- post -->
<?php
++$index;
endwhile;
endif;
?>
</div><!--left-column-->
<div id="restofpage">
NEED THE REST OF THE CODE.
</div>
and then you can do the rest via CSS:
#page {
width: 420px;
margin-right: -20px;
font-size: 0;
}
.post {
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
font-size: 16px;
margin-right: 20px;
margin-bottom: 40px;
}
.post.small {
width: 200px;
}
.post.wide {
width: 420px;
}
You can use two loops, for the 1st loop
query_posts(array(
'showposts' => 6
));
while (have_posts()) : the_post();
// your code here for 2 columns
endwhile;
Above code will load only first 6 posts by default, now for the 2nd loop
wp_reset_query();
query_posts(array('paged'=>$paged, 'offset'=>7));
while (have_posts()) : the_post();
// your code here for single column/rest of the post
endwhile;
This code will load all posts beginning from offset 7.