Breadcrumbs

Home Web Development Adding FullWidth and WideWidth in Wordpress 5 non Gutenberg themes
Adding FullWidth and WideWidth in Wordpress 5 non Gutenberg themes PDF Print E-mail
Written by Tom   

 

With the new Gutenberg Wordpress 5 release some themes from Wordpress 4 may not have the FullWidth and WideWidth coded in the theme function. To create this follow the below instructions.

 

Navigate to the Wordpress theme. On a localhost it may look similar to below. On FTP it may look slightly different with \public_html

 

C:\xampp\htdocs\KingCon\wp-content\themes\yourtheme

or

\public_html\www.yourwebsite\ wp-content\themes\yourtheme

 

Open the function.php file

 

C:\xampp\htdocs\KingCon\wp-content\themes\yourtheme\ functions.php

Add the below code(to bottom of file):

 

/**

* Register support for Gutenberg wide images in your theme

*/

function mytheme_setup() {

add_theme_support( 'align-wide' );

}

add_action( 'after_setup_theme', 'mytheme_setup' );

 

 

Open the themes' CSS file

C:\xampp\htdocs\KingCon\wp-content\themes\yourtheme\ style.css

 

Add the below code (to bottom of file):

 

.entry-content .alignwide {

margin-left : -80px;

margin-right : -80px;

}

.entry-content .alignfull {

margin-left : calc( -100vw / 2 + 100% / 2 );

margin-right : calc( -100vw / 2 + 100% / 2 );

max-width : 100vw;

}

.alignfull img {

width: 100vw;

}

 

 

Depending on the theme you may need to adjust the CSS to match. Example in my case I had to amend the alignfull marign as below:

 

.entry-content .alignwide {

margin-left : -80px;

margin-right : -80px;

}

.entry-content .alignfull {

/*margin-left : calc( -100vw / 2 + 100% / 2 );

margin-right : calc( -100vw / 2 + 100% / 2 ); */

/*Mike*/

margin-left : -90px;

margin-right : -90px;

max-width : 100vw;

}

.alignfull img {

width: 100vw;

}