Inexact Copies

Back in April I posted about trying to deal with a really specific problem. The authors wanted to be able to include page content in other page progressions but only wanted to edit the content in one place AND they wanted little pieces of it to be different. Back then, I did some odd stuff to try to make that happen. It seemed like it was going to work but more complexity reared its head recently so I took another pass at it.

This time, I am removing the navigation entirely from the post. No navigation buttons will exist internally. That lets us reference the main content from the original post like we were doing originally. But instead of having to use fairly fragile javascript to scrape the sidebar and replace the internal navigation buttons we have a set of ACF fields where bottom navigation buttons are controlled manually per page and outside the content.

I think this ends up being a victory on multiple fronts. It makes it easier to make buttons. The navigation is consistent visually and prevents complication creep. This may happen with other groups but I often find educators just want to keep adding navigation/directions etc. to the website. What if people get lost? What if they don’t know what to do? What if they are viewing this on a split screen and the menu is forced into mobile view? I try to argue that many people use sites all the times with zero directions.

You can see it in action below and the ugly code that makes it work below that. Maybe I’ll do another post on cleaning up garbage code and use this as an example.

add_filter( 'the_content', 'ssr_bottom_nav', 1);

function ssr_bottom_nav($content){
    $html = '';
    $true = FALSE;
    $post_id = get_the_ID();
    if (get_field('previous', $post_id)){  
        $true = TRUE; 
        $prev = get_field('previous', $post_id);  
        $html .= "<a class='lts_button lts_button_sc lts_button_default lt_rounded lt_flat ssr_button previous' href='{$prev}'><i class='fa fa-angle-left'></i> Previous
   </a>";   
    }
    if (get_field('module', $post_id)){ 
        $true = TRUE;  
        $mod = get_field('module', $post_id);           
        $html .= "<a class='lts_button lts_button_sc lts_button_default lt_rounded lt_flat ssr_button module' href='{$mod}'></i> Next Module </a>";          
    } 
    if (get_field('next', $post_id)){        
        $true = TRUE; 
        $next = get_field('next', $post_id);            
        $html .= "<a class='lts_button lts_button_sc lts_button_default lt_rounded lt_flat ssr_button next' href='{$next}'></i>Next <i class='fa fa-angle-right'></i>
   </a>";     
    } 
    if($true === TRUE){
        return $content . "<div id='ssr-b-nav'>{$html}</div>";
    } else {
        return $content;
    }   
}

#ssr-b-nav {
	position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #0e3a5f;
    z-index: 100;
    display: flex;
    justify-content: space-between;
}


#ssr-b-nav a.ssr_button {
	color:  #fff;
	background-color: #54b3a4;
	margin:  10px;
	width:  120px;
	text-align: center;
}

  @media only screen and (max-width: 700px) {
  	#ssr-b-nav a.ssr_button {
		width:  33vw;
	}

 }

Leave a Reply