• Resolved Aaron

    (@ergate)


    I am working with a Child Theme – I would like to reverse the page layout for one or two of my pages. I will use a template page for the page, I am looking for some suggestions or an example for the page.
    Any help would be appreciated.

    Thanks
    Aaron

Viewing 2 replies - 1 through 2 (of 2 total)
  • in your child theme, create a folder /template-parts/ (if it does not exist already);

    add a file named reverse-layout-page.php into that folder;

    copy the code of page.php of the parent theme into that file;

    edit the top section in that file to:

    /**
     Template Name: Reverse Layout
     * 
     * forces two column page layout - reversed - regardless of theme options 'Page Layout' setting
     */
    

    in functions.php of the child theme, add:

    add_filter( 'body_class', 'reverse_layout_page_body_classes', 12 );
    
    function reverse_layout_page_body_classes( $classes ) {
        if ( is_page_template( 'template-parts/reverse-layout-page.php' ) ) {
            if( in_array('page-one-column', $classes) ) {
    			unset( $classes[array_search('page-one-column', $classes)] );
    			$classes[] = 'page-two-column';
    		}
        	$classes[] = 'reverse-layout';
    	}
    	return $classes;
    }

    in style.css of the child theme, add:

    @media screen and (min-width: 48em) {
    	
    	body.reverse-layout:not(.has-sidebar):not(.page-one-column) .page-header,
    	body.reverse-layout.page-two-column:not(.archive) #primary .entry-header, 
    	body.reverse-layout.page-two-column.archive:not(.has-sidebar) #primary .page-header
    	{
    	  float: right;
    	}
    	
    	body.reverse-layout.page-two-column:not(.archive) #primary .entry-content,
    	body.reverse-layout.page-two-column #comments
    	{
    	  float: left;
    	}	
    }
    

    not widely tested, if you find minor layout issues, please come back here.

    Thread Starter Aaron

    (@ergate)

    That worked!

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Reverse-Flip page layout’ is closed to new replies.