I'm self learning Wordpress and trying to modify Arcade basic theme.
What I need is to remove the ARCADE title and replace with an image. also I'm trying to get two call to action buttons instead one.
Can someone help me with a solution. I got a fair understanding about PHP however I seems to cant locate any file to think of a modification too.
Thank you
You need to modify your header.php file under the theme folder.
Open wp-content-> themes -> arcade-basic -> header.php
Put the following code under the
<div id="site-meta">
<h1 id="site-title">
<img src="<URL to your LOGO>" /> </h1>
<?php if ( $bavotasan_theme_options[ 'header_icon'] ) { ?>
<i class="fa <?php echo $bavotasan_theme_options['header_icon']; ?>"></i>
<?php } else { $space_class=' class="margin-top"' ; } ?>
<h2 id="site-description" <?php echo $space_class; ?>>
<?php bloginfo( 'description' ); ?>
</h2>
<a href="#" id="more-site" class="btn btn-default btn-lg">
<?php _e( 'Button1', 'arcade' ); ?>
</a>
<a href="#" id="more-site" class="btn btn-default btn-lg">
<?php _e( 'Button2', 'arcade' ); ?>
</a>
</div>
Let us know if you have any queries.
You can Change it Two Way.
1.) You Add Code On Direct Header.php Files.
<div id="site-meta">
<h1 id="site-title">
<a href="<?php echo esc_url( home_url() ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<URL to your LOGO>" />
</a>
</h1>
This Code Is Dynamic Code It's Come From Admin Panel.And You Also Add Static Site Name Like
<div id="site-meta">
<h1 id="site-title">
<a href="<?php echo esc_url( home_url() ); ?>" title="SITE NAME" rel="home"><img src="<URL to your LOGO>" />
</a>
</h1>
And Second Is.
2). Go Admin Panel -->> Appearance -->> Customize
3). you can create your own header.php file as per your requirement.
Now You See Theme Setting Page Write Your SITE NAME on Site Title & Tagline.
Related
I was curious if this would a best practice to add social media SVG icons to page and post types ( without using a plugin)?
I have added three custom fields to WordPress page and post. facebook, twitter and google plus fields I have added the WordPress provided SVG tags specific to each social media site.
wordpress page admin screenshot
here is the code that I have added to my front page where I need the social share icons to be added
<header class="entry-header-hp">
<div class="page-title-homepage">
<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
<nav class="social-naviation-news" role="navigation">
<div>
<ul>
<li>
<a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=<?php echo urlencode(get_permalink()); ?>" target="_blank"><?php echo the_field('facebook'); ?>
</a>
</li>
<li>
<a href="https://twitter.com/intent/tweet?text=<?php echo urlencode(get_the_title()); ?>+<?php echo get_permalink(); ?>" target="_blank">
<?php echo the_field('twitter'); ?>
</a>
</li>
<li>
<a href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank">
<?php echo the_field('Google'); ?>
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="entry-meta">
<?php echo the_modified_date(); ?>
</div><!-- .entry-meta -->
<div class="edit-link">
<?php twentyseventeen_edit_link( get_the_ID() ); ?>
</div>
</header><!-- .entry-header -->
As you can see the icons will display on the front page.
https//staging.rockimages.com
Is this a good approach or will this cause any problems down the line?
It wouldn't cause problem down the line but i recommend you structure the sharing element in a way that is re-usable and doesn't require bulk change on multiple pages templates. So basically make a function out of it and place it in your functions.php file of your theme. Also if you use any default Wordpress theme makes sure you copy the original and rename it or create a child theme.
Ref:
https://premium.wpmudev.org/blog/five-hacks-twenty-seventeen/#social
https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/
Would you be able to help me with my problem?
What I'm trying to do is get the exact URL of the get_avatar_url() function in WordPress. Then use the URL as the background-image url.
Here's how my code looked like.
<?php $avatar_url = get_avatar_url(get_avatar($author->ID, 150), array("size"=>260)); ?>
<div class="col-xs-5 nopadding author-picture" style="background: url('<?php echo $avatar_url; ?>')">
<a class="author-block " href="<?php echo get_author_posts_url($author->ID); ?>">
<figure class="author-picture">
<?php echo get_avatar($author->ID, 150); ?>
</figure>
</a>
</div>
However, on the page it is returning like this:
like this:
<?php $avatar_url = get_avatar_url(get_the_author_meta( 'ID' ), array('size' => 450)); ?>
<div class="col-xs-5 nopadding author-picture" style="background: url('<?php echo esc_url( $avatar_url ); ?>')">
The usage of get_avatar_url is get_avatar_url( mixed $id_or_email, array $args = null ). Why are you passing get_avatar to this function.
You can use this directly like this:
get_avatar_url($author->ID, array("size"=>260 ));
I think the background URL rule must contain a recognizable image extension (jpg, jpeg, gif, png).
To achieve this, you can:
first, get the whole html of the avatar for the specified user ID...
... then extract the url containing the image extension from it, using regex...
and finally use it in your code as follows.
$imageHtml = get_avatar($author->ID, 150);
$imageUrlWithType = [];
preg_match('#\bhttps?://[^,\s()<>]+(?:\([\w\d]+\)|([^,[:punct:]\s]|/))#', $imageHtml, $imageUrlWithType);
<div class="col-xs-5 nopadding author-picture" style="background: url('<?php echo $imageUrlWithType[0]; ?>')">
<a class="author-block " href="<?php echo get_author_posts_url($author->ID); ?>">
<figure class="author-picture">
<?php echo get_avatar($author->ID, 150); ?>
</figure>
</a>
</div>
get_avatar_url( $current_user->ID );
This is the testing code I wrote to display an ad on a site. It does not display the link and image. I have added the link and image using default settings.
<?php
if(1){
echo("<div style='position:absolute; right:142.5px; top:0px; top:303px;'>
<a href='");
echo get_field( 'add_ad_link' );
echo("'><img src=').get_field( 'ad_image' ).('></a></div>");
}
?>
If you are using the correct field names and this is within your loop then you just need to correct your quotes.
<?php if (1) : ?>
<div style='position:absolute; right:142.5px; top:0px; top:303px;'>
<a href="<?php echo get_field( 'add_ad_link' ); ?>">
<img src="<?php echo get_field( 'ad_image' ); ?>">
</a>
</div>
<?php endif; ?>
If you are going to be outputting a large amount of HTML it is sometimes easier to read if you just output the HTML instead of trying to echo a string of html. This makes it easier to keep your quotes in the right order.
I'm trying to create a fancybox slideshow that pops up when you click on one thumbnail. I'm using Advanced Custom Fields with Gallery Field.
This is what I have;
<?php
$images = get_field('gallery');
$image_1 = $images[0];
?>
<a href="<?php echo $images['url']; ?>" rel="fancybox">
<img src="<?php echo $image_1['url']; ?>" /></a>
Unfortunately, nothing happens when you click on the image…
Any leads?
Thanks!
As Pranita said you should be using a for loop for generating the gallery.
If this display more thumbnails than you want, you can simply build your HTML/CSS so that every thumbnail, except the first, is hidden.
Use this, from the official documentation, and customize it to your needs.
<?php $images = get_field('gallery');
if( $images ) : ?>
<div id="carousel" class="flexslider">
<ul class="slides">
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
The problem is you have used $images['url'] where images is a multidimensional array. It has to be $image_1['url'];
Simply use for loop if you want every image. Else if you want only one image then use
<a href="<?php echo $images[0]['url']; ?>" rel="fancybox">
<img src="<?php echo $images[0]['url']; ?>" /></a>
I'm working on a WP site with some promotion / advert sliders with a Google Analytics click event. Works great, now I want to serve the right image on the right resolution.
I'm using picturefill for serving the images. Works fine while hardcoded, so I know it works. When I try to get the image sources with images uploaded by WP is doesn't. I know it due my (lack-off) php skills.
What picturfill needs:
<span data-picture data-alt="">
<span data-src="filename_default.jpg"></span>
<span data-src="filename_small.jpg" data-media="(min-width: 400px)"></span>
<span data-src="filename_medium.jpg" data-media="(min-width: 768px)"></span>
<span data-src="filename_big.jpg" data-media="(min-width: 1200px)"></span>
<!-- Fallback content for non-JS browsers. -->
<noscript>
<img src="external/imgs/small.jpg" alt="">
</noscript>
</span>
I have either the url or the id or the image stored in:
$attachment_id
I thought doing this:
<?php
$attachment_id = get_field('advimg');
$large = "adv-pos-a-large";
$default = "adv-pos-a-default";
$small = "adv-pos-a-small";
?>
The get_field('advimg'); is from ACF.
<span data-picture data-alt="">
<span data-src="<?php wp_get_attachment_image_src( $attachment_id, $default ); ?>"></span>
<span data-src="<?php wp_get_attachment_image_src( $attachment_id, $small ); ?>" data-media="(min-width: 400px)"></span>
<span data-src="<?php wp_get_attachment_image_src( $attachment_id, $default ); ?>" data-media="(min-width: 768px)"></span>
<span data-src="<?php wp_get_attachment_image_src( $attachment_id, $large ); ?>" data-media="(min-width: 1200px)"></span>
<!-- Fallback content for non-JS browsers. -->
<noscript>
<img src="external/imgs/small.jpg" alt="">
</noscript>
</span>
But it ain't working. Iv'e played around with:
wp_get_attachment_image_src
wp_get_attachment_image_url
wp_get_attachment_image_link
I must be having the fridays, due it ain't working and something says to me that it's not that hard... im just not seeing it today.
Hoped you guys could pitch in.
Thanks in advance,
/Paul
EDIT / FINAL CODE / FIX
<?php
$attachment_id = get_field('advanced_custom_field_name_here');
$small = wp_get_attachment_image_src( $attachment_id, 'adv-pos-a-small' );
$default = wp_get_attachment_image_src( $attachment_id, 'adv-pos-a-default' );
$large = wp_get_attachment_image_src( $attachment_id, 'adv-pos-a-large' );
?>
<span data-picture data-alt="alt desc here">
<span data-src="<?php echo $default[0]; ?>"></span>
<span data-src="<?php echo $small[0]; ?>" data-media="(min-width: 400px)"></span>
<span data-src="<?php echo $default[0]; ?>" data-media="(min-width: 768px)"></span>
<span data-src="<?php echo $large[0]; ?>" data-media="(min-width: 1200px)"></span>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src="<?php echo $default[0]; ?>" alt="alt desc here">
</noscript>
</span>
wp_get_attachment_image_src is confusingly named. (A better name for it would be wp_get_attachment_image_atts). It actually returns an array with the image attributes "url", "width" and "height", of an image attachment file. For just the image src, use the first element in the returned array:
$img_atts = wp_get_attachment_image_src( $attachment_id, $default );
$img_src = $img_atts[0];
Also, make sure your ACF image field return type is set to attachment ID so that $attachment_id = get_field('advimg'); gives you the id that you expect.