Need space between two buttons on blog - html

I need help to create space between two buttons on my blog, one for previous post, one for next. Both buttons appear one next to another, i need to be in the right and left corner. This is the code for them:
<?php
$prev_post = get_previous_post();
if (!empty( $prev_post )): ?>
<a class="post-nav-prev" title="<?php _e('Previous post:', 'baskerville'); echo ' ' . esc_attr( get_the_title($prev_post) ); ?>" href="<?php echo get_permalink( $prev_post->ID ); ?>"><?php _e('Previous post', 'baskerville'); ?></a>
<?php endif; ?>
<?php
$next_post = get_next_post();
if (!empty( $next_post )): ?>
<a class="post-nav-next" title="<?php _e('Next post:', 'baskerville') ; echo ' ' . esc_attr( get_the_title($next_post) ); ?>" href="<?php echo get_permalink( $next_post->ID ); ?>"><?php _e('Next post', 'baskerville'); ?></a>
<?php endif; ?>
<?php edit_post_link( __('Edit post', 'baskerville')); ?>
<div class="clear"></div>

I honestly tried to run your code snippet locally, but just couldn't get it to work so I will do my best and help you achieve what you want.
But before I get started, make sure you don't post PHP snippets in a post that has nothing to do with PHP. If you were to only post the HTML code, it would have made things much easier.
So I see you have two a elements which you are using as buttons. You don't want them next to each other but "in the right and left corner" Although I'm not sure whether you mean the corners of the page or the corners of where those buttons might or might not be, here is how I would tackle this problem.
#navigationControls{
width:300px;
height:20px;
}
<div id="navigationControls">
<a class="post-nav-prev" title="test">Previous</a>
<a class="post-nav-next" style="float:right" title="test">Next</a>
</div>
By putting them in a container with a defined width, we can float the next button to the right of the container. You can modify the containers width to how big you want it to be.
Please let me know if my answer got you in the right direction and if you need any help!

Related

How to add an anchor link with Advanced Custom Fields

Is it possible to add anchor links to Advanced Custom Fields?
I've created a page that shows images that when you click on the image a lightbox opens with the description. I have it all working without using Advanced Custom Fields but I'm trying to make it user friendly for the client so I added fields for them to just fill in the information and everything is already styled.
The problem is the tabs use an Anchor Link to link to the ID DIV that opens up the lightbox with the description - it works but not when I use the fields I created.
I created a url field for them to fill in the #div name for the anchor url and a field for the name of the #div for the anchor to link to. (Hope that makes sense!)
I'm also using repeater fields so they can add/delete flavors.
This is the code I am using -
<?php
// check if the repeater field has rows of data
if( have_rows('flavors') ):
// loop through the rows of data
while ( have_rows('flavors') ) : the_row();
// display a sub field value
?>
<li>
******** This is the anchor link *************
<?php
$link = get_sub_field('flavor_name');
if( $link ): ?>
<a href="<?php echo esc_url( $link ); ?>" class="wplightbox" data-width=900 data-height=800>
<?php
$image = get_sub_field('beer_image');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
<?php if( get_sub_field('beer_title') ): ?>
<?php the_sub_field('beer_title'); ?>
<?php endif; ?>
</a>
<?php endif; ?>
********* This is the div that needs to pick up the anchor name typed in as the Div ID name *****
<div id="<?php if( get_sub_field('flavor_name') ): ?>" style="display: none;">
<?php the_sub_field('flavor_name'); ?>
<?php endif; ?>
<div class="flavors">
<div class="flavorsleft">
<?php
$image = get_sub_field('beer_image');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="flavorsright">
<h3><?php if( get_sub_field('beer_title') ): ?>
<?php the_sub_field('beer_title'); ?>
<?php endif; ?></h3>
<div class="percent">
<?php if( get_sub_field('alcohol_percentage') ): ?>
<?php the_sub_field('alcohol_percentage'); ?>
<?php endif; ?>
</div>
<?php if( get_sub_field('beer_description') ): ?>
<?php the_sub_field('beer_description'); ?>
<?php endif; ?>
</div>
</div>
</div>
<div class="clear"></div>
</li>
<?php
endwhile;
else :
// no rows found
endif;
?>
</ul>```
This is the dev site where it's at - https://headley.tfm-dev.com/beers
The page is working right now because it's currently built not using the ACF fields (I took them off for now and rebuilt it) but I would like to change it so the owner can make changes.
Thank you!
[![Screenshot of Advanced Custom Fields][1]][1]
[![Screenshot of Advanced Custom Fields Redone][2]][2]
[1]: https://i.stack.imgur.com/NeKYe.jpg
[2]: https://i.stack.imgur.com/uUN0G.png
On your dev site in the source code the anchor href is an id but you are using a page link field to match to the get_sub_field('flavor_bottom_section_name') so this would return a url so won't work.
Correct me if I'm wrong but you are using 2 repeaters, does that not reply on each of them to match up to each other? I would do this wiht one repeater field and you'd be able to avoid mistakes being made and would probably require less fields e.g you would only need one field for the anchor and one field for the div. You can have 1 repeater field but you can have 2 separate loops through the same repeater just getting what you want out of it on each loop.
ADDITIONAL
This line of code nothing is being ouput into the id=""
<div id="<?php if( get_sub_field('flavor_name') ): ?>" style="display: none;">
I think you need to echo the sub field like this maybe
<div id="<?php echo get_sub_field('flavor_name') ?>" style="display: none;">
Yon can see in the red boxes I've marked that the id attribute is empty on the div, even if I change it locally in the inspector it works, not sure why you got an error earlier but I also think that the value in your field might have # before it but the # is only only required in the href not the id.
Final Solution (Hopefully)
Ok I used your code and I see why you were getting the critical error this:
<a href="#<?php if( get_sub_field('beer_title') ): ?>" class="wplightbox" data-width=900 data-height=800 >
<?php the_sub_field('beer_title'); ?>
<?php endif; ?>
Needs to change to this:
<a href="#<?php the_sub_field('beer_title'); ?>" class="wplightbox" data-width=900 data-height=800 >
<?php the_sub_field('beer_title'); ?>
You have and if in there which isn't needed so removing that and echoing the sub field fixes it, we just needed to remove the endif also. I should have asked what the error was originally.
What you are saying here is
<a href="#
// IF THERE IS A SUB FIELD VALUE FOR BEER TITLE
<?php if( get_sub_field('beer_title') ): ?>"
// OUTPUT THIS
class="wplightbox" data-width=900 data-height=800 >
<?php the_sub_field('beer_title'); ?>
get_sub_field() doesn't output anything it has to be echoed or else use the_sub_field() instead.

Links configured in the template administration panel don't work on the website

The problem on a Wordpress site is that even though links are set properly in the WP admin area (see attachment 1) they do not work once the site has been published. When using inspect element it kind of shows the problem (see attachment 2).
Clicking and opening the links within the admin area is working just fine. Other links on the website work correctly. What is missing here?
Code in WP template:
<?php if ($section['link_to_doc']) : ?>
<?php foreach ($section['link_to_doc'] as $link) : ?>
<div>
<a href="<?php echo $link['link_to_doc'] ?>" class="btn-txt">
<?php echo $link['text_of_link'] ?>
</a>
</div>
<?php endforeach; ?>
<?php endif; ?>
Repeater fields:
It seems the ACF link object is not returning the right output in the href because of an error in how the links where coded.
Usually you'll want something like this:
$link = get_field('link');
<a href="<?= $link['url']) ?>"<?= $link['title'] ?></a>
That's providing the ACF field is not nested, and the field name is 'link' and there's just one.
Amended code (presumably):
<?php if ($section['link_to_doc']) : ?>
<?php foreach ($section['link_to_doc'] as $link) : ?>
<div>
<a href="<?= $link['url'] ?>" class="btn-txt">
<?= $link['text_of_link'] ?>
</a>
</div>
<?php endforeach; ?>
<?php endif; ?>
Even thought the whole concept is not the best, as you wouldn't create an extra custom field to put the text of the link since you can use $link['title'] for that but yeah...
Edit 2:
According to your screenshot edit the a to be:
<a href="<?= $link['link'] ?>" class="btn-txt">
<?= $link['text_of_link'] ?>
</a>

Wordpress: HTML sidebar at bottom, instead of right aligned with body

I added HTML to my functions.php. After the
<?PHP get_sidebar(); ?>
and before
<?php get_footer(); ?>
while the CSS is added in my style.css Child theme. The result is my box of HTML under the main content on my home page instead of being on the right side of the main content. I am hoping someone may be able to help me?
I tried to add my HTML and CSS but it wouldn't let me post it.
I've spent about 3 hours on this by myself so far. First I tried reformatting a feature provided by the Minamaze Wordpress Theme, but I figured I may as well just right my own code as it may be easier to implement.
I fixed it! Here's how: The real problem was the fact that my front page articles were individually grouped instead of wrapped in a class. I found the index.php file (the copy from my child theme) and surrounded the homepage content in a named div class. Below is code from my index file. Put a div wrapper class between get_header and the php line below it. Close the div before the get_sidebar.
get_header(); ?>
<?php while( have_posts() ): the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('blog-article'); ?>>
<?php if ( has_post_thumbnail() ) {
$column1 = ' two_fifth';
$column2 = ' three_fifth last';
} else {
$column1 = NULL;
$column2 = NULL;
} ?>
<header class="entry-header<?php echo $column1; ?>">
<?php thinkup_input_blogimage(); ?>
</header>
<div class="entry-content<?php echo $column2; ?>">
<?php think_input_blogtitle(); ?>
<?php thinkup_input_blogmeta(); ?>
<?php thinkup_input_blogtext(); ?>
</div>
<div class="clearboth"></div>
</article><!-- #post-<?php get_the_ID(); ?> -->
<?php endwhile; ?>
<?php thinkup_input_pagination(); ?>
<?php else: ?>
<?php get_template_part( 'no-results', 'archive' ); ?>
<?php endif; ?>
?php get_sidebar(); ?>
Under get_sidebar, you can put in your HTML code for YOUR sidebar that you wish to add.
Once I wrapped them into the php into it's own class and wrapped my sidebar boxes into their own class, I used float: left and right respectively in my CSS child theme, successfully creating a sidebar. I also made their widths percentages to increase usability. You can use this same method in the content-page.php, content-single.php, if you wish to add a side bar to other pages besides just the home screen.

Image Slider flashes wrong image at first

I am using a wordpress theme, Pitch Pro, and it has a built in slider. My issue is that sometimes the slider will flash the wrong image for a second. I noticed that it does not do it normally but only if I go from a page such as support to the home page. I have tried changed and setting the order. Changing the max amount of slides, currently 6, but nothing seems to fix it.
The site currently is jrummy16.com/test if anyone has any idea on a fix.
Not sure if this could relate to it anyway but the server I am using has issues and to fix it hostgator told me to add define( 'CONCATENATE_SCRIPTS', false ); to my config.php file. It fixed the issue but I do not recall the slider having this issue before adding that.
I have no idea on how to even start troubleshooting this. So any help would be greatly appreciated.
EDIT
All of the files were found inside the Theme, Pitch Pro.
I opened up my home.php file and I find this at the top for slider.
<?php
$slider_template = apply_filters('pitch_slider_template', array('slider', null));
get_template_part( $slider_template[0], $slider_template[1] );
?>
I then went and opened up slider.php in the same folder. It has this code,
<?php
$slides = new WP_Query(array(
'numberposts' => siteorigin_setting('slider_max_slides'),
'nopaging' => true,
'post_type' => 'slide',
'orderby' => 'menu_order',
'order' => 'ASC'
));
if($slides->have_posts()){
?>
<div id="slider">
<div class="container">
<div class="slides nivoSlider">
<?php while ($slides->have_posts()) : $slides->the_post(); if(has_post_thumbnail()) : ?>
<?php if(get_post_meta(get_the_ID(), 'slide_destination', true)) : $destination = get_post_meta(get_the_ID(), 'slide_destination', true) ?>
<?php echo '<a href="'.esc_url(get_permalink($destination)).'" title="'.esc_attr(get_the_title($destination)).'">' ?>
<?php elseif(get_post_meta(get_the_ID(), 'slide_destination_url', true)) : $destination = get_post_meta(get_the_ID(), 'slide_destination_url', true) ?>
<?php echo '<a href="'.esc_url($destination).'">' ?>
<?php endif; ?>
<?php echo get_the_post_thumbnail(get_the_ID(), 'slide') ?>
<?php if(!empty($destination)) echo '</a>' ?>
<?php endif; endwhile; ?>
</div>
<?php $slides->rewind_posts(); ?>
<div class="indicators-wrapper">
<ul class="indicators">
<?php while ($slides->have_posts()) : $slides->the_post(); if(has_post_thumbnail()) : ?>
<li class="indicator <?php if($slides->current_post == 0) echo 'active' ?> indicator-group-<?php echo $slides->post_count ?>">
<div class="indicator-container">
<div class="pointer"></div>
<h4><?php the_title() ?></h4>
<?php the_excerpt() ?>
</div>
</li>
<?php endif; endwhile; ?>
</ul>
</div>
</div>
</div>
<?php
wp_reset_postdata();
}
I am not sure if this will help or not but I hope that it does.
I think the reason is that before slider loads completely, the page will show last image in the list of slides and in your case it is this one:
<img width="705" height="344" src="http://jrummy16.com/test/wp-content/uploads/BA-slider.jpg" class="attachment-slide wp-post-image" alt="BA-slider">
Here is a similar problem and it has few of the solutions which you may use it as well.
UPDATE:
I found this article which suggests to modify your CSS. I would paste the code here but the article uses image to show CSS code:)

An unexplainable space added inside an anchor

Nope. Ignore this. The space is put there by browser.
This is a HTML snippet from my application:
Correct answers:
0 / 6<br /><br />
You have failed to pass the final test.
<a href="/module/controller/course/id/5" class="accessible-link">
Click here
</a>
to return to the training.
As you can see, there is a single space after the </a> closing tag. Yet in the browser the space is added inside the anchor. So it looks like this:
This is the PHP code which produces the HTML:
<?php if (isset($this->correctAnswersCount) && isset($this->answersCount)): ?>
<?php echo Zend_Registry::get('translate')->_('Počet správnych odpovedí'); ?>:
<?php echo ToHtml($this->correctAnswersCount); ?> / <?php echo ToHtml($this->answersCount); ?><br /><br />
<?php endif; ?>
<?php echo Zend_Registry::get('translate')->_('Záverečný test sa vám nepodarilo úspešne absolvovať.'), "\n"; ?>
<a href="<?php echo ToHtml($this->backToCourseUri); ?>" class="accessible-link">
<?php echo Zend_Registry::get('translate')->_('Kliknite'), "\n"; ?>
</a>
<?php echo Zend_Registry::get('translate')->_('pre návrat do kurzu.'), "\n"; ?>
I am completely baffled by this and cannot figure out what's causing this even though I've been staring into the code for 30 minutes now.
This is a relevant part from the translation file:
'Kliknite' => 'Click here',
As you can see, there should be no space added by Zend_Translate.
Change this:
<a href="<?php echo ToHtml($this->backToCourseUri); ?>" class="accessible-link">
<?php echo Zend_Registry::get('translate')->_('Kliknite'), "\n"; ?>
</a>
Into this:
<a href="<?php echo ToHtml($this->backToCourseUri); ?>" class="accessible-link">
<?php echo Zend_Registry::get('translate')->_('Kliknite'), "\n"; ?></a>
The </a> should be in the same line after the <?php echo Zend_Registry::get('translate')->_('Kliknite'), "\n"; ?> aka Click Here
EDIT:
The new line and the spaces after it renders like 1 space that is still inside de <a></a> tags, that is where the blank space is coming from.
EDIT2:
For the record I also don't like the closing tag to be next to the content instead of a being in a new line but that's how it has to be done in order to work correctly.
I like good formatted code and I always look for a autoformat command in my IDE.
But at least for example in Visual Studio when you hit Ctrl + K, Ctrl + D (the Format Document shorcut) the closing tags like the </a> are not automatically moved to a new line for this exact reason: that it should not break the way it looks before the auto format.
Close the 'a' tag directly after the next, without a newline, like this:
Click here
Try it like this:
Click here
I am not sure if this will work, but it is worth trying.
Put immediately after the </a> tag.