28th Feb '24
/
0 comments

Plain HTML pages in Bricks

Plain HTML pages in Bricks

As great as Bricks is, there might be some situations when you want to put raw HTML and render just that, with no other WordPress/Bricks (or any other active child/parent theme)/plugins baggage.

Use case: You are trying to embed a TypeForm quiz and don’t want any code from Bricks or other plugins to pollute your HTML.

Sample embed code:

<div data-tf-live="01HQPE13KWFMSHKSK7YHG65EKH"></div><script src="//embed.typeform.com/next/embed.js"></script>

Turning off the header and footer for your specific Page in Bricks PAGE SETTINGS → GENERAL or adding it to be excluded from your single Bricks template that applies to all Pages won’t suffice.

Ben Affleck in this situation:

The solution is to use a traditional WordPress Page Template.

Step 1

Create a file named say page_quiz.php having:

<?php
/**
* Template Name: Quiz
*/

?>

<div data-tf-live="01HQPE13KWFMSHKSK7YHG65EKH"></div><script src="//embed.typeform.com/next/embed.js"></script>

<?php

Step 2

Upload it to your child theme directory.

Step 3

Apply this template for the Page.

If you have already edited the Page with Bricks and added any elements, delete them.

Result on the front end is the same but looking at the page source, all there will be is:

Much better.

You can, of course, add HTML DOCTYPE declaration, head and body tags, etc., if needed.

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Leave the first comment

 

Related Tutorials..

How to create filters with IsotopeJS in Bricks (Part 4): AJAX filter and infinite loops, Sorting, List view and Disable animations

How to create filters with IsotopeJS in Bricks (Part 4): AJAX filter and infinite loops, Sorting, List view and Disable animations

This tutorial will explain how to enable the AJAX filter with an infinite scroll query loop container, how to add a sorting function, how to…
Categories:
Pro
Accordion Grid Query Loop in Bricks

Accordion Grid Query Loop in Bricks

How to set up a accordion in Bricks such that the "titles" are arranged in a grid with the full width content opening below.
Categories:
Pro
Reading Progress Bar in Bricks

Reading Progress Bar in Bricks

This Pro tutorial provides the steps to implement a reading progress bar in Bricks builder. Step 1 Add the progress element as the first child…
Categories:
Floating Element in Bricks

Floating Element in Bricks

How to create a floating element in Bricks that appears across the entire website.
Categories:
Tags:
Pro
Codrops Dynamic Shape Overlay in Bricks

Codrops Dynamic Shape Overlay in Bricks

This Pro tutorial provides the steps to implement Codrops' SVG shape overlay in Bricks. We shall display a WordPress menu in the overlay after an…
Categories:
Pro
Fixed Sidebar Layout in Bricks

Fixed Sidebar Layout in Bricks

A user asked: This Pro tutorial provides the steps to set up a fixed left (or can be on the right) sidebar using hooks and…
Categories:
Pro
CSS Grid for Posts Element in Bricks

CSS Grid for Posts Element in Bricks

The "Posts" element in Bricks has "Grid" as the default layout but the actual CSS it applies on the page feels hacky with negative margins…
Categories:
Animated Border Hover Effect Buttons

Animated Border Hover Effect Buttons

Here's how can be implemented in HTML/WordPress/Bricks. Step 1 Add this CSS in your child theme's style.css or another appropriate location: Step 2 Add a…
Categories:
Pro
Custom WordPress Dashboard Page in Bricks

Custom WordPress Dashboard Page in Bricks

Updated on 10 Jul 2024 This Pro tutorial provides the steps to replace all the meta boxes of the WordPress admin dashboard page with the…
Categories:
Tags: