back to top link every page

Do not edit the Twenty Twelve theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

Yes I have a child theme, my apologies for not stating this. How do I add the back to top href though (in the locations desired on every page)?

Try adding it to a custom copy of footer.php in your child theme.

That’s where it is currently at (though not right aligned). I’m trying to get it to appear before the footer (the light grey line in the image) on the far right. That would indicate to me it probably doesn’t belong in the footer (could be wrong but I think the footer controls everything below the grey line) but some css file that controls pages.

Try adding it above </div><!-- #main .wrapper -->. And do give the link it’s own id or class, so that you can move it easily using CSS.

I added this exactly and it puts the link in the far right but right below the header.

<?php
/**
 * The template for displaying the footer.
 *
 * Contains footer content and the closing of the
 * #main and #page div elements.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?>
    <p id="totop" style="text-align: right;"><a href="#">Back to Top</a></p>
	</div><!-- #main .wrapper -->
	<footer id="colophon" role="contentinfo">
	    <p style="text-align: center;">
	        <a href="/index.php/">HOME</a> | <a href="HR('ABOUT CLARI')">ABOUT CLARI</a> | <a href="/index.php/parents-and-teachers/">PARENTS AND TEACHERS</a> | <a href="/index.php/clari-research/">CLARI RESEARCH</a> | <a href="/index.php/contact/">CONTACT</a> | <a href="/index.php/events/">EVENTS</a></br></br>
	    </p>
		<a href="https://www.buffalo.edu/"> <img class="center" src="<?php echo get_stylesheet_directory_uri(); ?>/images/ub-logo.png" alt="ub logo" /></a>
		<div class="site-info">
		</br>
			<p style="text-align: center;">
			17 Baldy Hall, North Campus &nbsp;&nbsp; Buffalo, NY  14260 <br>
            phone: 716.645.2470 &nbsp;&nbsp; fax: 716.645.5060 &nbsp;&nbsp; <a href="https://www.clari.buffalo.edu">https://www.clari.buffalo.edu</a>

            </p>
		</div><!-- .site-info -->
	</footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>
</body>
</html>

Try:

#top {
element.style {
    clear: both;
    text-align: right;
}

esmi thank you for your response and patience. Can you be slightly more explicit (I’m new to this) as I don’t know quite what to do with this. Where to put it? (I’m guessing in the style.css and then use this as a class on the text). I appreciate the time you’re giving me.

Do you know how to use CSS?

open style.css
and in the
#main {
position: relative;
}

p#totop {posittion: absolute;
bottom: 10px;
right: 0px;
}
Now taking in cosideration that your button is inside the #main div you need to tell your css that that div’s postion is relative , so what ever element with absolute position on it will see it has the pivot poins of coordenates ‘0,0’.
Then tell the element p#totop to be in an absolut position of bottom: 0 , and right: 0 .

now it would be better to put that <p> element inside the <footer> and make the footer{position: relative; overflow: visible} and the p#totop {position:absolute; right:0; top:-20px;
}

this way nomater what height or float the #main may have you make sure that that p#top always styas stuck to the footer
<footer id=”colophon” role=”contentinfo”>

<p id="totop" style="text-align: right;"><a href="#">Back to Top</a></p> 

<--- all the stuff inside the footer here -->
</footer>

[Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]

No – in these days of responsive design for mobile devices, absolute positioning is not the answer.

esmi, I have altered the style.css in my child theme and uploaded via Filezilla. I have created and applied some classes and made minor changes via the css. So some but limited experience in doing so.

I have 2 books on html5 and css but have a website to build for a literacy center I am project manage for and the site build has a deadline so the learning I’m doing isn’t ideal.

At first I was going to follow May_68’s advice but it seems this may be less flexible (i.e., not responsive).

Here’s what I know. I am not a programmer but know one language (R) proficiently. All the changes I’ve added to style.css have use a . in front of the command not a # so I’m not sure why this one has a # in front.

How should I proceed?

Try adding the CSS I posted above to the bottom of your child theme’s style.css file.

This did not change anything.

It’s worked as far as I can see. Remember to press CTRL and F5 simultaneously when viewing an updated page/site. Or try emptying your browser cache. This should ensure that your web browser fetches a fresh copy of the page rather than serving up an out-dated copy from your own cache.

Also disable/deactivate any caching plugin(s).