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.
Related
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>
I created a shortcode to display social icons within the theme I am using (Divi). The social icons are contained in a PHP template called "social_icons.php".
This is the function I am using:
function social_icons_shortcode() {
$social_icons = get_template_part( 'includes/social_icons' );
echo $social_icons;
}
add_shortcode('social-icons', 'social_icons_shortcode');
Here is the the social_icons.php template:
<div id="custom-social-icons">
<?php if( get_field('facebook', 'option') ): ?>
<a class="icon facebook" href="<?php echo get_field( 'facebook', 'option' ) ?>" title="Follow us on Facebook"></a>
<?php endif; ?>
<?php if( get_field('twitter', 'option') ): ?>
<a class="icon twitter" href="<?php echo get_field( 'twitter', 'option' ) ?>" title="Follow us on Twitter"></a>
<?php endif; ?>
<?php if( get_field('instagram', 'option') ): ?>
<a class="icon instagram" href="<?php echo get_field( 'instagram', 'option' ) ?>" title="Follow us on Instagram"></a>
<?php endif; ?>
<?php if( get_field('youtube', 'option') ): ?>
<a class="icon youtube" href="<?php echo get_field( 'youtube', 'option' ) ?>" title="Follow us on YouTube"></a>
<?php endif; ?>
<?php if( get_field('linkedin', 'option') ): ?>
<a class="icon linkedin" href="<?php echo get_field( 'linkedin', 'option' ) ?>" title="Find us on Linkedin"></a>
<?php endif; ?>
</div>
The shortcode works fine when I want to show the social icons in the footer of the theme but when I try to put them into the body (eg: the contact page) they are displaying absolute at the upper left hand corner of the page. See Screenshot: https://share.getcloudapp.com/8LuJkODx
I cannot figure out why this is happening - is there something I am doing wrong with get_template_part()?
Ahh..I see what the problem is. You need to return the value, not echo.
function social_icons_shortcode() {
$social_icons = get_template_part( 'includes/social_icons' );
return $social_icons;
}
add_shortcode('social-icons', 'social_icons_shortcode');
The other thing that may happen because how get_template_part() works, you may need to use an ob_buffer.
function social_icons_shortcode() {
ob_start();
get_template_part( 'includes/social_icons' );
return ob_get_clean();
}
add_shortcode('social-icons', 'social_icons_shortcode');
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 creating a portfolio which needs to display and thumbnail, title and link to all other portfolio pages using a specific template.
This is what I have so far, which manages to retrieve the page title and the featured image just fine. I'm struggling to retrieve the link to that page as the_permalink() just returns the link of the page you're currently on.
<?php foreach ( $builtins as $page ) : ?>
<div class="fw-col-xs-6 fw-col-md-3 remove-column-padding ">
<div class="casestudy">
<?php if (has_post_thumbnail( $page->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'single-post-thumbnail' ); ?>
<div class="block" style="background: url('<?php echo $image[0]; ?>')">
<h3>
<a href="<?php echo apply_filters( 'the_permalink', $page->post_permalink, $page->ID ); ?>" title="<?php echo apply_filters( 'the_title', $page->post_title, $page->ID ); ?>">
<?php echo apply_filters( 'the_title', $page->post_title, $page->ID ); ?>
<span></span>
</a>
</h3>
</div>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
Thanks Junaid,
I figured out the answer, get_permalink($page->ID); did the trick!