I look at this example:
esc_html would be used inside of html for example between a <p> tag
<p><?php echo esc_html( $some_variable ); ?></p>
esc_attr would be used for escaping attribute values on html tags like so:
<p my-attribute="<?php echo esc_attr( $some_variable ); ?>"></p>
And I can't apply it to my code, am I doing it right?
Can anyone elaborate/explain with my live example what shielding is needed and why.
I'd be happy to get any answers on this case:
1. echo '<div class="bg-primary ' . esc_attr( $theme-name_header_class ) . '" id="subheader">';
<a href="<?php echo esc_url( $theme-name_l['url'] ); ?>" class="<?php if ( $theme-name_l['active'] ) { echo 'current-lng'; } ?> inline-flex">
<?php echo esc_html( $theme-name_l['language_code'] ); ?>
</a>
2. <a href="/<?php echo esc_attr( $theme-name_lng ); ?>/" class="<?php if ( $theme-name_current_uri === $theme-name_lng ) { echo 'current-lng'; } ?> inline-flex items-center text-xs lg:text-base h-5 pl-2 pr-3 leading-none text-accent border-accent capitalize" aria-label="<?php echo esc_attr( $theme-name_lng ); ?>" >
<?php echo esc_html( $theme-name_lng ); ?>
</a>
3. <div class="item-content-mega__desc">
<?php echo esc_html( $theme-name_children_post_desc ); ?>
</div>
4. <a class="px-4" href="<?php echo esc_url( $theme-name_parent_post_url ); ?>" aria-label="<?php echo esc_attr( $theme-name_parent_post_title ); ?>" class="transition-colors <?php if ( $theme-name_parent_post_url === $theme-name_current_url ) { echo 'active'; } ?>">
<span class="capitalize"><?php echo esc_attr( ucfirst( strtolower( $theme-name_parent_post_title ) ) ); ?></span>
</a>
Related
header.php question here. I have a custom logo being used on a specific set of listings pages https://carolroyseteam.com/our-nice-home/ , I've assigned it using a body class assignment to swap the header $logo in the header.php. Then the rest of the site with the branding of the domain https://carolroyseteam.com/. Is there anything that can be done to assign a different url to the two $logo's?
To clarify my custom logo for Our Nice homes logo goes to '/our-nice-home/' and then have standard domain home logo link to the default logo cotainer ">
Using Divi Theme
<?php ob_start(); ?>
<header id="main-header" data-height-onload="<?php echo esc_attr( et_get_option( 'menu_height', '66' ) ); ?>">
<div class="container clearfix et_menu_container">
<?php
$logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && ! empty( $user_logo )
? $user_logo
: $template_directory_uri . '/images/logo.png';
ob_start();
?>
<?php
$classes = get_body_class();
if (in_array('ournicehomeslogo',$classes)) {
$logo="/wp-content/uploads/2019/10/1-ONH-Logo-05-carolroyseteam.png";}
?>
<?php
$classes = get_body_class();
if (in_array('single-listing',$classes)) {
$logo="/wp-content/uploads/2019/10/1-ONH-Logo-05-carolroyseteam.png";}
?>
<?php
$classes = get_body_class();
if (in_array('search-results',$classes)) {
$logo="/wp-content/uploads/2019/10/1-ONH-Logo-05-carolroyseteam.png";}
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="/our-nice-homes/">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>
</div>
<?php
$logo_container = ob_get_clean();
Got it! Wordpress Divi Theme users will appreciate that this logo_container is a default in the header.php file. This has been the easiest way to both custom logo a specific page or pages and then modify the home url.
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php $classes = get_body_class();
if (in_array('ournicehomeslogo',$classes)) {
echo esc_url( home_url( '/our-nice-homes/' ) );}
else if (in_array('single-listing',$classes)) {
echo esc_url( home_url( '/our-nice-homes/' ) );}
else if (in_array('search-results',$classes)) {
echo esc_url( home_url( '/our-nice-homes/' ) );}
else{
echo esc_url( home_url( '/' ) );
} ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>
</div>
<?php
$logo_container = ob_get_clean();
I don't have clickable header on my website. I want redirect to home page when I click on header. I don't know how the code should look to make it work.
This is my page-header.php code:
<div class="entry-header">
<div class="cv-outer">
<div class="cv-inner">
<div class="header-logo">
<?php
if ( has_custom_logo() ) :
$custom_logo_id = get_theme_mod( 'custom_logo' );
$custom_logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr( bloginfo('name') ); ?>" class="logo-img">
<img src="<?php echo esc_url( $custom_logo[0] ); ?>" alt="<?php esc_attr( bloginfo('name') ); ?>">
</a>
<?php else : ?>
<?php echo bloginfo( 'title' ); ?>
<?php endif; ?>
<?php if ( display_header_text() ) : ?>
<br>
<p class="site-description"><?php echo bloginfo( 'description' ); ?></p>
<?php endif; ?>
</div>
</div>
</div>
</div>
I think I should add somethink here but I don't know PHP enough:
if ( has_custom_logo() ) :
$custom_logo_id = get_theme_mod( 'custom_logo' );
$custom_logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr( bloginfo('name') ); ?>" class="logo-img">
<img src="<?php echo esc_url( $custom_logo[0] ); ?>" alt="<?php esc_attr( bloginfo('name') ); ?>">
</a>
<?php else : ?>
<?php echo bloginfo( 'title' ); ?>
<?php endif; ?>
<?php if ( display_header_text() ) : ?>
<br>
<p class="site-description"><?php echo bloginfo( 'description' ); ?></p>
<?php endif; ?>
In additional I show you source of website in browser:
browser website source
All advice will be invaluable!
It looks like the title is empty.
In the else clause, if there is no custom logo, then a link will be displayed inside with text. The link is there, but it is not clickable because there is no text inside the link.
Can you check if bloginfo( 'title' ) is non-empty?
Another workaround would be to add a default picture that you know exists inside the link div, instead of text.
You just keep all header div in an Anchor element. Like below code
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"
<div class="cv-inner">
<div class="header-logo">
</div>
</div>
</a>
I personally would put the PHP code in the definition for CV-Outer div.
<?PHP
if (has_custom_logo()) {
echo "<div class='cv-outer clickHeader'>" + PHP_EOL;
} else {
echo "<div class='cv-outer'>" + PHP_EOL;
}
?>
Then, just add an onclick handler to your javascript for the clickHeader class to redirect to the proper URL.
If you need to keep the custom logo from the PHP code, just leave it there, delete the bit that has the URL.
Basically, the problem is that the hyperlink isn't clickable because it has no size. Instead of messing with CSS to make it fit...I'd just remove it and use JS for the clickhandler...
Full HTML Code:
<div class="entry-header">
<?PHP
if (has_custom_logo()) {
echo "<div class='cv-outer clickHeader'>" + PHP_EOL;
} else {
echo "<div class='cv-outer'>" + PHP_EOL;
}
?>
<div class="cv-inner">
<div class="header-logo">
</div>
</div>
</div>
Sample Javascript:
<script>
window.onload = function() {
var headers = document.getElementsByTagName('clickHeader');
for(var i = 0; i < headers.length; i++) {
var header = headers[i];
header.onclick = function() {
document.location.href="/";
}
}
}
</script>
As far as I understand I can use add_filter('hook', 'my_custom_credits'); to replace default credits with a custom one. I know how to create my_custom_credits function and it's working.
But I'm not sure how to find hook in someone's code. Do I need to create it or I just use some id?
<?php
/**
* The template for displaying the footer credits
*
*/
?>
<div id="footer__credits" class="footer__credits" <?php czr_fn_echo('element_attributes') ?>>
<p class="czr-copyright">
<span class="czr-copyright-text">© <?php echo esc_attr( date('Y') ) ?> </span><a class="czr-copyright-link" href="<?php echo esc_url( home_url() ) ?>" title="<?php echo esc_attr( get_bloginfo() ) ?>"><?php echo esc_attr( get_bloginfo() ) ?></a><span class="czr-rights-text"> – <?php _e( 'All rights reserved', 'customizr') ?></span>
</p>
<p class="czr-credits">
<span class="czr-designer">
<span class="czr-wp-powered"><span class="czr-wp-powered-text"><?php _e( 'Powered by', 'customizr') ?> </span><a class="czr-wp-powered-link fab fa-wordpress" title="<?php _e( 'Powered by WordPress', 'customizr' ) ?>" href="<?php echo esc_url( __( 'https://wordpress.org/', 'customizr' ) ); ?>" target="_blank"></a></span><span class="czr-designer-text"> – <?php printf( __('Designed with the %s', 'customizr'), sprintf( '<a class="czr-designer-link" href="%1$s" title="%2$s">%2$s</a>', esc_url( CZR_WEBSITE . 'customizr' ), __('Customizr theme', 'customizr') ) ); ?></span>
</span>
</p>
</div>
i'm a beginner in code and even if people have probably answered this question i don't know how to implement it in my case...
in my wordpress, i have a woocommerce integrated and i would like to display a different header logo then the home page.
i have found the place where it is called but i dont know how to implement it correctly and not scrap all the code.
i would probably want something like this
<?php if (isset($class) && $class == 'woocommerce'): ?>
<img src="images/logo-with-white-text" />
<?php else: ?>
<img src="images/logo-with-dark-text" />
<?php endif; ?>
implemented in this code from my theme
<!-- START LOGO -->
<div id="logo" class="<?php echo $width_tagline ?>" >
<?php
if( yit_get_option( 'header-custom-logo' ) == 'yes' && yit_get_option( 'header-custom-logo-image' ) != '' ) : ?>
<a id="logo-img" href="<?php echo home_url() ?>" title="<?php bloginfo( 'name' ) ?>">
<?php $size = #getimagesize(yit_get_option( 'header-custom-logo-image' )); ?>
<img class="no-dark" src="<?php echo yit_ssl_url( yit_get_option( 'header-custom-logo-image' ) ) ?>" <?php if( yit_get_option( 'logo-retina-url' ) ): ?>data-at2x="<?php echo yit_ssl_url( yit_get_option( 'logo-retina-url' ) ) ?>"<?php endif ?>title="<?php bloginfo( 'name' ) ?>" alt="<?php bloginfo( 'name' ) ?>" <?php if( !empty($size) && isset($size[3] ) ) echo $size[3] ?> />
<?php if ( 'yes' == YIT_Layout()->enable_dark_header ) : ?>
<?php $size = #getimagesize(yit_get_option( 'header-dark-custom-logo-image' )); ?>
<img class="only-dark" src="<?php echo yit_ssl_url( yit_get_option( 'header-dark-custom-logo-image' ) ) ?>" title="<?php bloginfo( 'name' ) ?>" alt="<?php bloginfo( 'name' ) ?>" <?php if( !empty($size) && isset($size[3] ) ) echo $size[3] ?> />
<?php endif; ?>
</a>
<?php else : ?>
<a id="textual" href="<?php echo home_url() ?>" title="<?php echo str_replace( array( '[', ']' ), '', bloginfo( 'name' ) ) ?>">
<?php echo yit_decode_title( get_bloginfo( 'name' ) ) ?>
</a>
<?php endif ?>
<?php
if( yit_get_option( 'header-logo-tagline' ) == 'yes' ):
$class = array();
if ( strpos( get_bloginfo( 'description' ), '|') ) $class[] = 'multiline';
if ( yit_get_option('header-logo-tagline-mobile') == 'no' ) $class[] = 'hidden-xs';
$class = ! empty( $class ) ? ' class="' . implode( $class, ' ' ) . '"' : '';
?>
<?php yit_string( "<p id='tagline'{$class}>", yit_decode_title( get_bloginfo( 'description' ) ), '</p>' );?>
<?php endif ?>
</div>
<!-- END LOGO -->
I hope someone will be kind enough to help me out on this one!
Thanks in advance
My way doing this
<a href="<?php echo home_url(); ?>" class="logo_link">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo.png" data-src="<?php echo get_template_directory_uri(); ?>/assets/images/logo-wc.png" alt="" class="logo">
</a>
<script>
$( document ).ready(function() {
if($('body').hasClass('woocommerce')) {
$('.logo_link img').attr('src', $(this).data('src'));
}
});
</script>
If woocommerce is installed and activated you can do this
<?php if(is_woocommerce()){ ?>
<img src="images/logo-with-white-text" />
<?php }else{ ?>
<img src="images/logo-with-white-text" />
<?php } ?>
I am on Wordpress and I can easily add a plugin, but that increases load time, looks common and old.
I am using the Brook theme, which a minimal theme. (http://www.defensionem.com/7th-and-3rd-fleet-to-be-combined/)
If you notice, only end at the blog I have my sharing options, Such as Facebook, Linkedin, Twitter.
Can I enable this in the Sidebar widget? I contacted my theme author and they said to me,
"Our social-sharing links are built in brook/share_block.php. You
could try creating a new custom widget, and use the code from
share_block.php. Alternatively, you could use a Text Widget, and input
directly html code for sharing. By using the markup and classes as we
did, you should be able to get the same style."
Here's my that php file. I tried various methods but it did not work. Guess everything is wrong.
Can you all help?
<?php
$theme_settings = brook_theme_settings();
if( has_post_thumbnail() ){
$share_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'xxl' );
$share_image = $share_image[0];
$share_image_portrait = wp_get_attachment_image_src( get_post_thumbnail_id(), 'portrait-m' );
$share_image_portrait = $share_image_portrait[0];
}else{
$share_image = '';
$share_image_portrait = '';
}
$share_excerpt = strip_tags( get_the_excerpt(), '<b><i><strong><a>' );
?>
<div class="social-nav social-nav--titles">
<ul class="social-nav__items">
<?php if( $theme_settings['sharing_email'] ): ?>
<li class="social-nav__item">
<a title="<?php _e( 'Email', 'brook' ); ?>" class="social-nav__link js-skip-ajax" href="mailto:?subject=<?php echo ( rawurlencode( get_the_title() ) ); ?>&body=<?php echo ( rawurlencode ( $share_excerpt . ' ' . get_the_permalink() ) ); ?>">
<?php _e( 'Email', 'brook' ); ?>
</a>
</li>
<?php endif; ?>
<?php if( $theme_settings['sharing_facebook'] ): ?>
<li class="social-nav__item">
<a title="<?php _e( 'Facebook', 'brook' ); ?>" class="social-nav__link js-sharer js-skip-ajax" target="_blank" href="http://www.facebook.com/sharer.php?u=<?php echo( rawurlencode( get_the_permalink() ) ); ?>">
<?php _e( 'Facebook', 'brook' ); ?>
</a>
</li>
<?php endif; ?>
<?php if( $theme_settings['sharing_twitter'] ): ?>
<li class="social-nav__item">
<a title="<?php _e( 'Twitter', 'brook' ); ?>" class="social-nav__link js-sharer js-skip-ajax" target="_blank" href="http://twitter.com/intent/tweet?text=<?php echo( rawurlencode( get_the_title() ) ); ?>&url=<?php echo( rawurlencode( get_the_permalink() ) ); ?>">
<?php _e( 'Twitter', 'brook' ); ?>
</a>
</li>
<?php endif; ?>
<?php if( $theme_settings['sharing_pinterest'] ): ?>
<li class="social-nav__item">
<a title="<?php _e( 'Pinterest', 'brook' ); ?>" class="social-nav__link js-sharer js-skip-ajax" target="_blank" href="http://pinterest.com/pin/create/button/?url=<?php echo( rawurlencode( get_the_permalink() ) ); ?>&media=<?php echo ( rawurlencode( $share_image_portrait ) ); ?>&description=<?php echo( rawurlencode( get_the_title() ) ); ?>">
<?php _e( 'Pinterest', 'brook' ); ?>
</a>
</li>
<?php endif; ?>
<?php if( $theme_settings['sharing_google'] ): ?>
<li class="social-nav__item">
<a title="<?php _e( 'Google+', 'brook' ); ?>" class="social-nav__link js-sharer js-skip-ajax" target="_blank" href="https://plus.google.com/share?url=<?php echo( rawurlencode( get_the_permalink() ) ); ?>">
<?php _e( 'Google+', 'brook' ); ?>
</a>
</li>
<?php endif; ?>
<?php if( $theme_settings['sharing_linkedin'] ): ?>
<li class="social-nav__item">
<a title="<?php _e( 'LinkedIn', 'brook' ); ?>" class="social-nav__link js-sharer js-skip-ajax" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php echo( rawurlencode( get_the_permalink() ) ); ?>&title=<?php echo( rawurlencode( get_the_title() ) ); ?>&summary=<?php echo ( rawurlencode ( $share_excerpt ) );?>&source=<?php echo ( rawurlencode( get_bloginfo('name') ) );?>">
<?php _e( 'LinkedIn', 'brook' ); ?>
</a>
</li>
<?php endif; ?>
</ul>
</div>
Well What I suggest you which is the easiest solution is first install a plugin from this link https://wordpress.org/plugins/php-code-widget/ It ia a plugin when you activate it, it creates a widget in which you can put your all php code from your required file. As far as the styling is concerned you can add the relevant styling to main css file of your Brook theme. I hope it helps....
Try to social share plugin and put shortcode.