use homepage layout for other pages

Hello,

My question is how to use homepage layout on other pages as well (without any posts displayed), and preferably with the same widget options as displayed on the homepage (homepage, footer widget1, etc., instead of sidebar, footer widget1, etc., see attachments). I’m new to wordpress and coding, and so far i’ve succeeded in getting the options i want, as mentioned above, by copying and renaming the template-home.php file in the shapely folder (and also renaming it in the file itself <?php/** * Template Name: Home Page * * to: <?php/** * Template Name: “product machine” * *). But when i add a widget on the homepage (master slider slideshow “A”) and then add a different slideshow “B” on product machine page, the slideshow on the homepage changes to “B” and crashes on the product machine page.

thank you very much

Hi @bennobas,

I hope you are well today and thank you for your question.

To achieve this you have to create child theme of Shapely theme and create a new theme file by copying template-home.php and changing its template name & file name then register custom widget area using the function register_sidebar and then call it in the newly created theme file by replacing “sidebar-home”.

Best Regards,
Movin

Hello Movin,

Thank you very much for the tips.

I’ve followed the steps you mentioned above. But now i’ve a couple of new questions

1: as you can see (product machine page) there is a white space above the slider and under the parralax, whats the css code for removing this? I’ve found a couple of custom css lines of code on the forum (see custom css attachment)

2: on the product machine page i’ve used the parralax with the same background and settings (background small) as can be seen on the frontpage, but the background wont show for some reason.

(for others who might be interested in the same layout for all the pages, i’ve attached the child theme function.php, i’ve added the widget areas product machine and eierdoos, and 1 of the templates used for a specific page “template-product machine.php”)

Best regards and thanks

1: as you can see (product machine page) there is a white space above the slider and under the parralax, whats the css code for removing this? I’ve found a couple of custom css lines of code on the forum (see custom css attachment)
2: on the product machine page i’ve used the parralax with the same background and settings (background small) as can be seen on the frontpage, but the background wont show for some reason.

Could you please share me the page URLs from your site where it is happening so that i can help you to remove it?

(for others who might be interested in the same layout for all the pages, i’ve attached the child theme function.php, i’ve added the widget areas product machine and eierdoos, and 1 of the templates used for a specific page “template-product machine.php”)

Your files are not uploaded due to security reasons so please upload it by adding them in the zip file.

Hello Movin

the frontpage is: bennobas.com
second page is: bennobas.com/product-machine/

thanks again

1: as you can see (product machine page) there is a white space above the slider and under the parralax, whats the css code for removing this? I’ve found a couple of custom css lines of code on the forum (see custom css attachment)

The text in this section is not visible because it has same color as the section background. You can try changing background color of it by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other


div#shapely_home_parallax-3 * {
    color: #000;
}
2: on the product machine page i’ve used the parralax with the same background and settings (background small) as can be seen on the frontpage, but the background wont show for some reason.

Because on that page your site is displaying the javascript error message as shown in the attached screenshot.

To resolve the error message by downloading latest version of shapely theme from the following page.

Hello Movin,

  1. Sorry maybe i should have been a bit clearer (see the image attached), i would like to remove the red areas.

  2. I’ve updated the shapely theme but the problem still exists (see: http://bennobas.com/product-machine/)

Thanks again.

Greetings,
Benno

1. Sorry maybe i should have been a bit clearer (see the image attached), i would like to remove the red areas.

Use the below CSS code to remove that space from product machine page.

body.page-template-template-productmachine .container.mt20 {
    margin-top: 0 !important;
}
body.page-template-template-productmachine section.content-area.pt0 {
    padding-bottom: 0;
    border-bottom: 0;
}
2. I’ve updated the shapely theme but the problem still exists (see: http://bennobas.com/product-machine/)

This is because the following parallax javascript file is only loading in the home page and not on PRODUCT MACHINE page. You should also load it in the PRODUCT MACHINE page.

http://bennobas.com/wp-content/themes/shapely/js/parallax.min.js

WHITE EDGES
Hello,
first it is really a great theme!
thanks!

I also want to make my contact page bootstrap.
First I copied the template-home.php, and rename it.
then i register custom widget area using the function register_sidebar.
and in the new created theme file replacing “sidebar-home”.

so far so good, but the page has white edges. and a photo in full screen remains white. Add small also does not work. And a slew of other widgets does not work. what am I doing wrong ? please help me!

I made screenshots:
https://1drv.ms/f/s!AsrMzg67TaZ9o3aUUXZ8y4KLjsvW <- this is my onedrive

Best regards and thanks
Ruben

@rubenro To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/shapely/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Hey Movin,
Thanks for your great support.
I’m trying to follow your instructions:

To achieve this you have to create child theme of Shapely theme and create a new theme file by copying template-home.php and changing its template name & file name then register custom widget area using the function register_sidebar and then call it in the newly created theme file by replacing “sidebar-home”

And I’d like to ask for some more detail.
1.) I create a new theme file which I save under a new name, say template-page.php, parallely to template-home.php?
2.) I register the the custom widget area by copying this into wp-includes/widgets.php?

<?php register_sidebar( $args ); 
<?php $args = array(
	'name'          => __( 'Sidebar name', 'theme_text_domain' ),
	'id'            => 'unique-sidebar-id',
	'description'   => '',
        'class'         => '',
	'before_widget' => '<li id="%1$s" class="widget %2$s">',
	'after_widget'  => '</li>',
	'before_title'  => '<h2 class="widgettitle">',
	'after_title'   => '</h2>' ); ?>

?>

I guess I’d change name and id - does it matter to what?

3.) Finally I call it in by replacing “sidebar-home” in the newly created theme file with what?

I appreciate your help.

1.) I create a new theme file which I save under a new name, say template-page.php, parallely to template-home.php?

Yes you are right but you have to also change the template name “Home Page” in your new file template-page.php to something else

/**
 * Template Name: Home Page
 *
 * Displays the Home page with Parallax effects.
 *
 */
2.) I register the the custom widget area by copying this into wp-includes/widgets.php?

No you have to add the register_sidebar function call in the functions.php file of child theme and also the code you have shared is wrong it should be as following as described on this page Function Reference/register sidebar « WordPress Codex

add_action( 'widgets_init', 'theme_slug_widgets_init' );
function theme_slug_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Main Sidebar', 'theme-slug' ),
        'id' => 'sidebar-1',
        'description' => __( 'Widgets in this area will be shown on all posts and pages.', 'theme-slug' ),
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
	'after_widget'  => '</li>',
	'before_title'  => '<h2 class="widgettitle">',
	'after_title'   => '</h2>',
    ) );
}
I guess I’d change name and id – does it matter to what?

Yes just change it to whatever you want to.

3.) Finally I call it in by replacing “sidebar-home” in the newly created theme file with what?

Yes just change “sidebar-home” in the new template file template-page.php with the ID you have written in the above code.

Thanks Movin, almost clear.
Registering the new widget in the functions.php
Would the below code work?

<?php register_sidebar( $args ); ?>
<?php $args = array(
	'name'          => __( 'New widget', 'theme_text_domain' ),
	'id'            => 'page-widget',
	'description'   => '',
        'class'         => '',
	'before_widget' => '<li id="%1$s" class="widget %2$s">',
	'after_widget'  => '</li>',
	'before_title'  => '<h2 class="widgettitle">',
	'after_title'   => '</h2>' ); ?>

You are most welcome here :slight_smile:

Try using the following code instead.

<?php $args = array(
	'name'          => __( 'New widget', 'theme_text_domain' ),
	'id'            => 'page-widget',
	'description'   => '',
        'class'         => '',
	'before_widget' => '<li id="%1$s" class="widget %2$s">',
	'after_widget'  => '</li>',
	'before_title'  => '<h2 class="widgettitle">',
	'after_title'   => '</h2>' );
register_sidebar( $args );
 ?>

thank you!

Movin,
It worked, the widget shows up in the Appearance->Widgets. But the widgets I add to it, don’t actually show up on the pages.
What have I missed?

Figured out that I have to choose the new template in the page editor.
But, if I do, the published page is empty, neither widgets nor content showing. What has gone wrong?

Thanks,
Ivo

You are always welcome here :slight_smile:

It seems now you are facing different issue than the question asked in this topic so to help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/shapely/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.