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/
Related
I have added pages on my wordpress.com blog and I want the main page should appear like
is there any widget or way to do this?
Here's I suggest you do:
Create a category. E.G "secondary-pages "
Create your secondary pages as posts and assign the category to all of them.
Call the category on the home page as shown below and have them display in grids.
$query = new WP_Query('category_name=secondary-pages');
if($query->have_posts()) : while($query->have_posts()) : $query->the_post(); ?>
<div id="content">
<?php the_title('<h2 class="post-title">','</h2>') ?>
<?php echo excerpt(35); ?>...
<span class="link">
<a href="<?php echo get_permalink(); ?>">
continue Reading → </a>
</span><!-- End link -->
</div>
<!-- End Content -->
<?php endwhile; ?>
<?php endif; ?>
<?php } ?>
Note: you can use different category names for the pages but that will increase your page size because you's have to call em individually.
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.
I know that probably you have answered this questions many times but I can’t use your advices in my case.
I have the Adelle theme by Blu Chic on my blog (right now I just test different functions and make changes before I move my blog on my own hosting). I made same changes in archive.php to change how posts displays in categories and archive.
<div style="height:251px; display:block; margin:0 0 20px 0;"><h3><?php echo get_the_post_thumbnail( $post_id, array(174,251), array('class' => 'alignleft'), $attr ); ?> <?php the_title();?> </h3>
<?php the_excerpt(); ?></div>
I works but…during editing new post I have to set featured /thumbnail image. It’s not a problem. The problems show on first page because right now I have 2 images – one small and one big. Is it possible to remove thumbnail of post on main page?
I would be very grateful for your help!
Best,
Kasia
You simply need to find the CSS classes that belong to those thumbnail images on the main page and add a CSS property in the Additional CSS:
display: none
For screenshots you can check this guide: https://www.helpmegeek.com/remove-featured-thumbnails-list-pages-wordpress/
For your requirement to use two images for your post, one on the main page that is archive page and other on post detail page, you can use one best plugin available for that
http://wordpress.org/plugins/multiple-post-thumbnails/
By using Multiple Post Thumbnails plugin you can see two featured images for your post, one you can display on main page and other on post detail page or whichever section you want to display.
If you want to remove the thumbnails just delete/comment out the php code that display the thumbnail like so:
<div style="height:251px; display:block; margin:0 0 20px 0;">
<h3>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
<?php //echo get_the_post_thumbnail( $post_id, array(174,251), array('class' => 'alignleft'), $attr ); ?> <!-- Notice the // just after the first <?php tag
</a>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
<?php the_title();?>
</a>
</h3>
</div>
I'm using Wordpress Canyon Theme in my website (http://thomasconti.blog.br/). The slider works fine but it would be really great if it also showed post titles and in larger letters, instead of just a bunch of small text like the default configuration is set to show.
Please, if anyone can help, here is the code for the slider:
<?php get_header(); ?>
<div id="content">
<div id="slide">
<div class="flexslider">
<ul class="slides">
<?php
$slide = get_option('cany_slide_cat');
$count = get_option('cany_slide_count');
$slide_query = new WP_Query('category_name='.$slide.'&posts_per_page='.$count.'' );
while ( $slide_query->have_posts() ) : $slide_query->the_post();
$do_not_duplicate[] = $post->ID
?>
<li>
<img class="slideimg" src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo get_image_url()?>&h=300&w=650&zc=1" title="" alt="" />
<div class="flex-caption">
<?php wpe_excerpt('wpe_excerptlength_slide', ''); ?>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
I tried to find this info on the web but only found other bloggers using this theme and asking the same question. Thanks in advance for any help.
I don't know that plugin but from your question I'd say you need to put a wordpress template tags for the title in here:
<div class="flex-caption">
<!-- at this place -->
<?php wpe_excerpt('wpe_excerptlength_slide', ''); ?>
</div>
E.g. mock that with some dummy HTML and headlien:
<div class="flex-caption">
<h2>This is My Headline that is Just There</h2>
<?php wpe_excerpt('wpe_excerptlength_slide', ''); ?>
</div>
Style it via your themes CSS and for the content use the_title():
<div class="flex-caption">
<?php the_title( '<h2>', '</h2>' ); ?>
<?php wpe_excerpt('wpe_excerptlength_slide', ''); ?>
</div>
Depending on your styling needs you might want to introduce more markup.
To link the title you use the_permalink() again as you already have in your code. That could do it, so hopefully this gives you some pointers.
I am using the ACF purely so the user can upload images to a predefined location and have assigned the page rules accordingly. Everything seems to be fine on the WP back-end, with the three images uploaded to the fields. However, on the font end, nothing apart from blank box is appearing at all where the images should be. Looking at the source that WP is outputting, there is only blank code:
<img src="" class="middle" alt="image1"/>
This is the loop I am using:
<?php query_posts("posts_per_page=1&post_type=page&page_id=168"); if (have_posts()) :
while ( have_posts() ) :
the_post(); ?>
<!--If you want to refer to the child of parent page, use "post_parent=" -->
<li>
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
<img src="<?php the_field('image_1'); ?>" class="middle" alt="image1"/>
View More
</li>
<?php endwhile; ?>
<!-- post navigation -->
<?php else: ?>
<!-- no posts found -->
<?php endif; ?>
<?php wp_reset_query(); ?>
It is important to note that I am not pulling the images from another page. I just want the images to relate to the template & page I am working on.
Make sure the image field is outputting the id or url of the image link.
<?php if(get_field('YOUR FIELD NAME')): while(has_sub_field('YOUR FIELD NAME')): ?>
<img class="logo" src="<?php the_sub_field('image_1'); ?>" />
<?php endwhile; endif; ?>
I just needed to nominate the home page id the function:
<img src="<?php the_field('image_2', '245'); ?>" class="middle" alt="image2"/>
you can use get_the_field() to get the right value of the field,
<img src="<?php get_the_field('image_1'); ?>" class="middle" alt="image1"/>