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 632 Bricks code tutorials with BricksLabs Pro

Leave the first comment

 

Related Tutorials..

Pro
Image Banner as Query Loop Posts Grid’s Last Item in Bricks

Image Banner as Query Loop Posts Grid’s Last Item in Bricks

In the comments section of How to Insert Element(s) Between Query Loop Posts in Bricks tutorial, a site member asked: This is fantastic! Is there…
Categories:
Tags:
Pro
Team Member Photos Stack with Hover Tooltips in Bricks

Team Member Photos Stack with Hover Tooltips in Bricks

Herman Baiatian shared in the Bricks Facebook group here that he worked on overlapping team member headshots showing info in hover tooltips. I recreated it…
Categories:
Pro
Horizontal Scrolling Sections in Bricks Using GSAP’s ScrollTrigger

Horizontal Scrolling Sections in Bricks Using GSAP’s ScrollTrigger

In this Pro tutorial we'll use GSAP's ScrollTrigger library in Bricks to create a section that will scroll horizontally across a number of full width…
How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

This tutorial series will review how to create a dynamic filterable image gallery using the IsotopeJS library‘s features in Bricks. Requirements Create a custom taxonomy for your…
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:
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
Stripe’s Animated Gradient in Bricks

Stripe’s Animated Gradient in Bricks

This Pro tutorial provides the steps to set up an animated gradient as a background of a section in Bricks using the code generated by…
Categories:
How to add a resizable desktop navbar in Bricks

How to add a resizable desktop navbar in Bricks

This tutorial will show you how to add a "More" menu item when the navbar overflows on desktop.
Categories:
Tags: