[Resolved] Need help to integrate Layouts with new starter Bootstrap theme

[Author]

Posts

[Robert Campbell]

I was previously using the Toolset Starter theme for all my websites. Now that support for this theme has been discontinued, I decided to make my own simple starter theme to use with Layouts. The theme has bootstrap included.

I used the "the_ddlayout();" function in my index.php and this seems to work.

You can see a test page at hidden link

The rest of the theme integration advice at https://toolset.com/documentation/user-guides/layouts-theme-integration/ seems to be marked as out of date, so I need your help with two issues:-

1. Custom CSS included in the Layouts 'Custom CSS and JS' does not get loaded with the page. Does this need to be called in some way in my functions.php?

(By the way I tried a custom CSS plug-in and it works okay, but I would like to get the Layouts Custom CSS working.)

2. I created a test menu which you can see displayed. It works except for the dropdown menu item which does not function. Is there another element of integration with Layouts I need to add?

I want to be sure my theme is properly integrated with Layouts before I start using it for new websites. Are there other integration issues I should be aware of?

Kind regards

Robert

[Robert Campbell]

Dear Luo

I did some more checking and found that my bootstrap js was not loading. So I have corrected that issue and the drop down menu is now working.

I still have a problem with:-

1. Custom CSS included in the Layouts 'Custom CSS and JS' does not get loaded with the page. Does this need to be called in some way from my functions.php?

(By the way I tried a custom CSS plug-in and it works okay, but I would like to get the Layouts Custom CSS working.)

Regards

Robert

[Luo Yang]

Dear Robert,

It depends on your theme files, Layouts plugin is using wordpress function wp_enqueue_style() to load the custom CSS file, see the source codes of Layouts plugin, file \layouts\extra\theme_integration_support\autoloaded\theme_integration_setup_abstract.php, line 233:

wp_enqueue_style( 'layouts-theme-integration-frontend' );

I suggest you check if your theme filed supports function wp_enqueue_style(), and the custom CSS files does exist in your website, for example:
\layouts\public\css\custom-frontend.css

[Robert Campbell]

Dear Luo

Okay, I found the issue. The Layouts custom CSS file requires the <?php wp_footer(); ?> which I had not yet added to my theme. So an easy fix, thank you.

Can I check if the Layouts plug in requires anything else in my theme to operate correctly?

I guess I am trying to ask if there is an up to date specification to fully integrate Layouts into a theme?

Regards

Robert

[Luo Yang]

The Layouts depends on Bootstrap framework, so I suggest you enable this option:
Dashboard-> Toolset-> Settings-> General
Enable option "Toolset should load Bootstrap 3.0"

Then Layouts or other Toolset plugin will load Bootstrap for you, you don't need to load Bootstrap in your own custom theme files.

If there is other problem, feel free to create new ticket for new problem.

[Robert Campbell]

Dear Luo

I tried your suggestion:-

I edited my functions.php to remove the loading of bootstrap, but of course still loading the theme stylesheet:-

<?php

/*
function bootstrapstarter_enqueue_styles() {
    wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
    $dependencies = array('bootstrap');
	wp_enqueue_style( 'bootstrapstarter-style', get_stylesheet_uri(), $dependencies ); 
}

function bootstrapstarter_enqueue_scripts() {
    $dependencies = array('jquery');
    wp_enqueue_script('bootstrap', get_template_directory_uri().'/bootstrap/js/bootstrap.min.js', $dependencies, '3.3.6', true );
}

add_action( 'wp_enqueue_scripts', 'bootstrapstarter_enqueue_styles' );

add_action( 'wp_enqueue_scripts', 'bootstrapstarter_enqueue_scripts' );
*/

wp_enqueue_style( 'bootstrapstarter-style', get_stylesheet_uri() ); 

function bootstrapstarter_register_menu() {
    register_nav_menu('header-menu', __( 'Header Menu' ));
}
add_action( 'init', 'bootstrapstarter_register_menu' );

require_once get_template_directory() . '/wp-bootstrap-navwalker.php';

add_theme_support( 'post-thumbnails' );

?>

And I set Toolset Settings to load Bootstrap 3.0

But if you go to hidden link

You will see that bootstrap styles are not being applied. Example, go to the site header 'Norfolk Mastering' which is a <h2>. Note that only the user agent stylesheet is being applied.

Can you help me with this issue please.

Regards

Robert

[Luo Yang]

This is a custom codes problem, please provide a copy of your theme file(and other required plugins), I need to test and debug it in my localhost.

[Luo Yang]

Please put your files in google drive disk, then share a downloadable URL in your private message box:
https://toolset.com/forums/topic/need-help-to-integrate-layouts-with-new-starter-bootstrap-theme/#post-1138374

Thanks

[Robert Campbell]

Dear Luo

I have placed a copy of the test site including my 'bootstrapstarter' theme here

hidden link

Regards

Robert

[Luo Yang]

Thanks for the details, I am downloading the files, will update here if there is anything found

[Luo Yang]

Is this problem resolved?
I have checked it in your website and my localhost, there isn't text "Norfolk Mastering", and the text "Page 1 content shown using h2" display with H2 CSS style correctly, see screenshot H2.JPG

Here are some of my suggestions:
1) If you are going to display current page's title in H2 style, please edit your layout "Page Layout"
add a visual editor cell, and display the page title like this:

<h2>[wpv-post-title]</h2>

2) As you can see the wordpress footer is important to render other JS/CSS codes, I suggest you edit your theme file "index.php", change the codes as below:

...
    <?php wp_footer(); ?>

https://codex.wordpress.org/Function_Reference/wp_footer

3) And there are some required HTML tags are missing in your theme file, for example:

<HTML>
<header> ... </header>
<body> ... </body>
</HTML>

hidden link

You can get the sample codes in theme folder "toolset-starter", file footer.php and header.php

[Robert Campbell]

Dear Luo

Thanks for your advice. I have updated my index.php with your recommendations.

So now my theme seems to be working except for one issue:-

If you please go to hidden link

I made a test slide show using a view and you can see that the images are breaking out of the container. When I changed to the old Toolset Starter Theme, then the slideshow displays correctly.

Do I need to add some code to my theme so that slide show images do not break out of the container?

Regards

Robert

[Luo Yang]

For the new question:
a test slide show using a view and you can see that the images are breaking out of the container

It should be a custom CSS codes problem, please provide your website credentials, I need to test and debug it in a live website. thanks

[Luo Yang]

Dear Robert,

We can handles the questions one by one, for your original question:

Do I need to add some code to my theme so that slide show images do not break out of the container?

Yes, there is some CSS codes missing, I have done below modifications in your website:
1) Switch to your custom theme "Bootstrap Starter Theme"
2) Dashboard-> Toolset-> Layouts CSS and JS Editor, add below CSS codes

img, .wp-caption {
    max-width: 100% ;
    height: auto;
}

For the other new questions, you can simply copy those CSS codes(don't include theme definition) of Toolset Starter theme, file "style.css", paste them into your custom theme, file "style.css", this will be able to copy CSS style to your new theme, and remove those you don't need.

If you need more assistance for the new questions, please create new thread for them, thanks

[Robert Campbell]

Dear Luo

Thanks for the CSS to fix the images issue.

Just before we close this thread, I need to ask your understanding to clarify one final point regarding the use of Bootstrap style sheets within the old Toolset Starter Theme.

It would be easier to understand my question if we stay with the example of the styles applied to the h2 heading.

If you browse to hidden link and examine the style around the h2 heading "Norfolk Mastering", you will see that the font-size is 2.15em. This comes from the toolset-starter/boostrap/css/bootstrap.min.css This style sheet is commented as Bootstrap v3.3.7

If you now browse to hidden link and examine the style around the h2 heading "Norfolk Mastering", you will see that the font-size is 30px. This comes from my new theme and uses bootstrapstarter/bootstrap/css/bootstrap.min.css This style sheet is commented as Boostrap v3.3.7 (part of the package I downloaded from the Bootstrap site when I created the new style sheet).

So then I examined the two files and found they had many differences, even though they are both commented as being part of Bootstrap v3.3.7.

So my question is whether the toolset-starter/boostrap/css/bootstrap.min.css file has been heavily customised by Toolset? I based all my previous websites on this style but I need to understand why it is so different from the standard bootstrap.min.css

Regards

Robert