Hello Mohamed,
This is a follow up on https://toolset.com/forums/topic/conflict-between-layouts-and-tm-theme/
Thank you very much for your helpful reply.
We followed your instructions, but unfortunately the website 'crashes' (pages looks garbled up) as soon as the Layouts plugin is activated.
The four different Bootstraps loading options don't make any difference in our case.
We set up a staging website. Would you mind to have a look at the issue? Hopefully there is an easy solution.
I will add the login details to the hidden area of this ticket.
Many thanks for your help,
Alex
Hi, Mohammed is unavailable today so I can help with this ticket. I hope that's okay. I logged in to the staging site and activated Layouts, and then able to see the garbled home page. To fix that, I created a new Layout and inserted a Post Content cell, which should display the contents of this page. Then I applied this Layout to all Pages. Now the homepage seems to be appearing as expected. Can you confirm?
Layout: wp-admin/admin.php?page=dd_layouts_edit&layout_id=5655&new=true#
Hi Christian,
Thanks a million for replying during the holidays!
I can confirm that your solution to create a new layout and assign it to pages works. That's very promising.
We did not realise we would need to create a layout for default WordPress pages. Is this always the case? Is there a documentation page that describes this? It would be good for us to learn more about this.
The home page now looks fine.
Other sections, like still look garbled up, for example:
News (default WordPress Posts/blog styled by TM theme) - Is this a matter of assigning the same layout to Posts?
Team member - Is this a matter of assigning the same layout to Team?
Buddypress (Community main menu link), the content is not displayed at all - It seems the layout can not be assigned to Buddypress?
Many thanks and Merry Christmas!
Alex
We did not realise we would need to create a layout for default WordPress pages. Is this always the case?
When you activate Layouts, it's usually necessary to apply a Layout to each post type. Layouts is a bit of an all-or-nothing approach in this respect. In the case of your theme, the consequence of omitting that Layout for the Pages post type seems to be very severe - your site looks broken. In some other themes, the site appears to be mostly right, but there may be problems displaying the page content when a post type Layout is omitted.
News (default WordPress Posts/blog styled by TM theme) - Is this a matter of assigning the same layout to Posts?
It depends. Usually the News page is an automatically generated archive, so the Pages Layout isn't best. Instead, you must create a Layout that uses a WordPress Archive cell, and apply this Layout to the News/Blog section.
Team member - Is this a matter of assigning the same layout to Team?
I assume Team member is a custom post type, correct? If so, then you could assign the same Pages Layout to this post type, or create a different Layout and apply it to this custom post type.
Buddypress (Community main menu link), the content is not displayed at all - It seems the layout can not be assigned to Buddypress?
Unfortunately Buddypress uses custom templates that are not compatible with Layouts. With that in mind, may I ask what you would like to accomplish with Layouts, that cannot be accomplished with your theme's built-in Page Builder system? I think we should evaluate whether or not Layouts is going to be the best approach for achieving your goals.
Hi Christian,
Thanks very much again for your thoughts and advice.
Good idea to start with that question about what we'd like to achieve.
We would like to create some sections for listing projects and tours:
- We need an 'archive' page (well, basically a page showing teaser images and titles in a grid format).
- We need a content page for individual listings, with a suitable layout.
We want to keep the TM theme we currently have, but it sounds like Toolset Layouts would take over the entire website and clash with the TM theme?
I hope there is a solution. Can the same be achieved without the Layouts plugin?
Many thanks again!
Alex
Great, I think we can work something out. For now, let's disable Layouts. Then you can use the following suggestions to accomplish your desired site design:
- We need an 'archive' page (well, basically a page showing teaser images and titles in a grid format).
Go to Toolset > WordPress Archives and create a new WordPress Archive for the desired post type. Use the Loop Output editor to create a design (optionally a Content Template), which will be applied to each result shown in the archive. You can also apply pagination settings here as needed, or even add custom filters to allow your users to filter the results. While a drag-and-drop editor is not available to build this display, there are several customization options you can use to create your own look and feel including a WYSIWYG editor. Some page builders like Visual Composer and Beaver Builder are more integrated in our Content Template builder, so you can achieve more of a drag-and-drop design for each item in the loop. For now, unfortunately TM's page builder is not integrated.
More information:
https://toolset.com/documentation/user-guides/normal-vs-archive-views/
- We need a content page for individual listings, with a suitable layout.
You can use Content Templates to create a template design that will be applied to all your individual listings. Without Layouts, there is no drag-and-drop editor to use, but you can use the Loop Output wizard to create your own design using shortcodes and a WYSIWYG editor. Again, some other page builders like Visual Composer and Beaver Builder are more integrated in the editor, but the TM theme is not currently integrated. Also note that if you want to use the theme's Page Builder to construct the design for each individual listing post, then no Content Template is required. A URL will automatically be generated for each Listing and the design you created in the Page Builder will be applied.
More information:
https://toolset.com/documentation/user-guides/view-templates/
Let me know if you would like additional clarification on either of these.
Hi Christian,
Thank you very much for your advice regarding the Archive page and the Content Template.
We disabled the Layouts plugin now. We also set up a Toolset listing website test account on discover-wp.com and copied some of the code from there.
We got pretty far in the Toolset backend, we think, but the frontend does not look good yet:
1. Archive page (Main menu>Projects) - The page looks garbled up and the listings are not rendered correctly in the archive grid and Google Map. We checked and double-checked but could not find the reason unfortunately. It's correctly assigned etc. I hope you can have a look at this page?
2. Content Template (Main menu>Single Project)
- The featured images appears at the top of the page and the Author info block at the bottom of the page, like in default posts. Is there a way to disable this?
- We'd like to display content field in tabs for a user-friendly experience. Is this possible in Content Templates? (we could not find anything in the documentation about this).
Many thanks (again!) for your help,
Alex
1. Archive page (Main menu>Projects)
- I added a Map Marker to the Content Template "Loop item in Volunteer Projects" in the WordPress Archive. Now the markers are appearing correctly on the map. Here's the code I added for reference:
[wpv-map-marker map_id="map-3" marker_id="marker-[wpv-post-id]" marker_field="wpcf-project-location"][/wpv-map-marker]
Where you add this code is not important, so long as it is included in the wpv-loop tags (or a Content Template that is placed in the wpv-loop tags).
The page looks garbled up and the listings are not rendered correctly in the archive grid and Google Map
The markup generated by the WordPress Archive should be updated to match the markup your theme expects, in order to inherit the styles from your theme. I see on the other pages there is a div wrapping the main content area with ID "content" and class "site-content":
<div id="content" class="site-content">
...other content...
</div>
This div is required to help center the page contents and provide a responsive layout. I edited the Filter and Loop Output Integration section of this WordPress Archive and added the wrapper div there. Now the margins seem to be working more like the other pages. Within the results area, styling each item is ultimately your responsibility. I'm not exactly sure how it should look, but if you have an old design you'd like to emulate you can copy that HTML and paste it into the Content Template, then replace the hard-coded content with the appropriate shortcodes to display the post title, content, and custom fields.
Hello Christian,
Thank you for looking at our page and adding the missing code for the map and site-content.
The archive page starts to look like something now. I guess it is a matter of styling to achieve the result we want - and I guess we will hire a developer to do this so that it is done in the right way.
A few questions before we recruit a developer, to make sure what we need can be achieved (just numbering for your convenience):
1. On the archive page, can we add columns (main body + right hand column)?
2. On the Content Template (item) page, can we add tabs?
3. Can archive templates and content templates be copied and applies to other Content Types?
Thanks a million!
Alex
1. On the archive page, can we add columns (main body + right hand column)?
If you are using Layouts, you can easily design row and column grid structures in any Layout using the drag-and-drop editor. If you are not using Layouts, your developer must implement rows and columns in the WordPress Archive editor using HTML and CSS. If you decide to load Bootstrap, you can use Bootstrap's grid system. Here's the documentation for their grid:
hidden link
2. On the Content Template (item) page, can we add tabs?
Layouts offers WYSIWYG tab cells you can use, or if you decide not to use Layouts you can use Bootstrap tabs. Bootstrap tabs aren't offered in a drag-and-drop interface, so this would require writing some HTML. Here's the documentation for Bootstrap tabs:
hidden link
3. Can archive templates and content templates be copied and applies to other Content Types?
Certainly. You can associate one template with multiple post types, or you can create different templates. You can also duplicate an existing template, make some minor changes, and apply it to a different post type.
All clear, thanks so much Christian for that detailed and very helpful reply!
Alex
