Added 'Return to Top' options in mobile

Add a 'Return to Top' link either under the post content, at the top of
the footer (or both) for mobile views. Also, reordered theme customizer
options.
This commit is contained in:
kjodle 2016-02-17 18:14:10 -05:00
parent dcd21e89db
commit d930e10049
6 changed files with 86 additions and 6 deletions

View File

@ -17,6 +17,8 @@
<footer>
<?php atticus_finch_footer_top_link(); ?>
<?php do_action( 'atticus_finch_before_footer_menu' ); ?>
<nav id="footer-menu">

View File

@ -671,7 +671,7 @@ $default_copyright = '<a rel="license" href="http://creativecommons.org/licenses
$wp_customize->add_section( 'atticus_finch_mobile_menu_options', array(
'title' => __( 'Mobile Menu Options', 'atticus-finch' ),
'capability' => 'edit_theme_options',
'priority' => 20,
'priority' => 110,
'description' => __('Menu settings for mobile appearance.', 'atticus-finch'),
'panel' => 'atticusfinch',
) );
@ -809,11 +809,46 @@ $default_copyright = '<a rel="license" href="http://creativecommons.org/licenses
) );
// Mobile Options Options
$wp_customize->add_section( 'atticus_finch_mobile', array(
'title' => __( 'Mobile Options', 'atticus-finch' ),
'capability' => 'edit_theme_options',
'priority' => 100,
'panel' => 'atticusfinch',
) );
$wp_customize->add_setting( 'atticus_finch_post_top_link', array(
'type' => 'theme_mod',
'transport' => 'postMessage',
'default' => '0',
'sanitize_callback' => 'atticus_finch_sanitize_checkbox',
) );
$wp_customize->add_control( 'atticus_finch_post_top_link', array(
'section' => 'atticus_finch_mobile',
'type' => 'checkbox',
'label' => __( 'Display \'Return to Top\' link after post content', 'atticus-finch' ),
) );
$wp_customize->add_setting( 'atticus_finch_footer_top_link', array(
'type' => 'theme_mod',
'transport' => 'postMessage',
'default' => '0',
'sanitize_callback' => 'atticus_finch_sanitize_checkbox',
) );
$wp_customize->add_control( 'atticus_finch_footer_top_link', array(
'section' => 'atticus_finch_mobile',
'type' => 'checkbox',
'label' => __( 'Display \'Return to Top\' link before footer content', 'atticus-finch' ),
) );
// Miscellaneous Options
$wp_customize->add_section( 'atticus_finch_misc', array(
'title' => __( 'Miscellaneous Options', 'atticus-finch' ),
'capability' => 'edit_theme_options',
'priority' => 100,
'priority' => 200,
'panel' => 'atticusfinch',
) );

View File

@ -264,10 +264,10 @@ function atticus_finch_display_footer_credits() {
// Custom CSS Option
function atticus_finch_custom_css_head() {
$afcss = get_theme_mod( 'atticus_finch_custom_css' );
// if ( !empty( $afcss ) ) {
echo '<style type="text/css">/* Atticus Finch Custom CSS */' . $afcss . '</style>';
// }
$afcss = get_theme_mod( 'atticus_finch_ccss' );
if ( !empty( $afcss ) ) {
echo '<style type="text/css">/* Atticus Finch Custom CSS */' . "\n" . get_theme_mod( 'atticus_finch_ccss' ) . "\n" . '</style>';
}
}
@ -314,3 +314,24 @@ function atticus_finch_social_media_display() {
}
// Mobile Top Link Options
function atticus_finch_footer_top_link() {
if ( get_theme_mod( 'atticus_finch_footer_top_link' ) == 1 ) {
echo '<a href="#" class="top-button">';
_e( 'Return to Top', 'atticus-finch' );
echo '</a>';
} else {
return;
}
}
function atticus_finch_post_top_link() {
if ( get_theme_mod( 'atticus_finch_post_top_link' ) == 1 ) {
echo '<a href="#" class="top-button">';
_e( 'Return to Top', 'atticus-finch' );
echo '</a>';
} else {
return;
}
}

View File

@ -30,6 +30,8 @@ get_header();
<?php atticus_finch_display_nav(); ?>
</div> <!-- end Content -->
<?php atticus_finch_post_top_link(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

View File

@ -173,6 +173,9 @@ p.sub { /* Style main menu descriptions */
margin-top: 0;
}
a.top-button {
display: none;
}
/**********************************/
/* 5. .post Elements */

View File

@ -54,6 +54,23 @@ textarea {
color: #fff;
}
a.top-button {
background: #333;
display: inline-block;
padding: 1em;
width: 100%;
text-align: center;
text-decoration: none;
margin-bottom: 1em;
letter-spacing: 0.1em;
color: #ddd;
font-family: 'IM Fell English', serif;
}
footer a.top-button{
border-bottom: solid 1px #999;
}
body > footer {
background: #333;
color: #fff;