To incorporate your NewsMachine Press Room into your own WordPress website, it’s easier than you think.

There are a few different ways of doing this, depending on the editor (in WordPress) you are using. Here’s how to do it with most commonly used editors:

1. Inserting an <Iframe> in Gutenberg Block Editor

If you’re using the new WordPress Block Editor (Gutenberg), follow these steps:

Open the page or post where you want to insert the <iframe>.
Click on the block inserter + icon to add a new block.
Search for Custom HTML and select it

In the Custom HTML block, paste your <iframe> code.
Here is an example of the code:

<iframe src=" https://pressroom.newsmachine.com" width="100%" height="1400"> </iframe>

You can preview the result by clicking the Preview button above the block.
You can tailor the code, adjust the width and height in the iframe code to fit your design.
Like the example below:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        /* Hide scrollbar but keep scrolling */
        #pressFrame {
            overflow: scroll; /* Enable scrolling */
        }

        /* For Webkit browsers (Chrome, Safari) */
        #pressFrame::-webkit-scrollbar {
            width: 0px; /* Hide the scrollbar */
            height: 0px; /* For horizontal scrollbar */
        }

        /* For Firefox */
        #pressFrame {
            scrollbar-width: none; /* Hide scrollbar in Firefox */
        }

        /* For IE/Edge */
        #pressFrame {
            -ms-overflow-style: none; /* Hide scrollbar in IE/Edge */
        }
    </style>
</head>

<body>
    <iframe id="pressFrame" src="https://pressroom.newsmachine.com/" width="100%" height="1500" frameborder="0" allowfullscreen></iframe>

    <script>
        function resize_frame(e) {
            console.log("Origin:" + e.origin);
            if (e.origin === 'https://pressroom.newsmachine.com') {
                var data = JSON.parse(e.data);
                console.log("iframe change:" + e.data);
            }
            if (data['height']) {
                // Remember! Change ifrm_id to the id of the iframe
                var extraHeight = 1;
                // Use "Lagom number" if you like to handle DOM created/Ajax loaded content inside the frame
                $('#pressFrame').css('height', (data['height'] + extraHeight));
            }
        }

        /*
         * If this code snippet returns false, this means that the addEventListener method property is not supported by the browser. 
         * This is the case for Internet Explorer, where attachEvent is used instead. 
         */
        if (window.addEventListener) {
            window.addEventListener('message', resize_frame);
            console.log("added EventListener");
        } else if (window.attachEvent) {
            window.attachEvent('onmessage', resize_frame, false);
            console.log("attached Event");
        }
    </script>
</body>

2. Inserting an <Iframe> in the Classic Editor

If you’re using the Classic Editor (or a plugin that provides the old-style editor):

Go to the post or page editor.
Switch from Visual mode to Text mode (HTML).

Paste your iframe code directly where you want it to appear.

<iframe src=" https://pressroom.newsmachine.com" width="100%" height="1400"> </iframe>

Switch back to Visual mode to see the placement (though you won’t see the actual iframe unless you preview the page or post).
Update or publish the post.

3. Using a Shortcode Plugin

If you are restricted from adding HTML or using certain themes, you can use a plugin to insert iframes.

Install and activate a plugin like Shortcoder or Iframe Embedder.
After activation, you can create shortcodes that wrap around iframe code or use widgets to embed iframes without directly editing HTML.

4. Using the Elementor Editor

Inserting an <iframe> in WordPress when using Elementor is a straightforward process.

Method 1: Using the HTML Widget

Open the page or post where you want to add the <iframe> in Elementor.
Click Edit with Elementor to launch the editor.

On the left panel, search for the HTML widget.
Drag and drop the HTML widget onto the section or column where you want to place the iframe.
Paste your iframe code. For example:

<iframe src=" https://pressroom.newsmachine.com" width="100%" height="1400"> </iframe>

The iframe will appear directly in the Elementor preview.
You can adjust the width and height in the iframe code to fit your design.

Method 2: Using Elementor Shortcodes

For certain cases, you might need to use Elementor’s Shortcode widget to insert custom HTML.

Search for the Shortcode Widget:
Drag the Shortcode widget into the desired section.
Inside the shortcode box, you can add the iframe shortcode if your site supports it.

5. Using the DIVI Editor

Method 1: Using the Code Module

Divi provides a Code Module that allows you to insert custom HTML, JavaScript, and CSS, including iframes.

Open the page or post you want to edit using Divi.
Click Edit with the Divi Builder to enter the Divi Editor.
Select “Code” widget form Divi module list.

In the Code module settings, paste your `<iframe>` code. For example:

<iframe src=" https://pressroom.newsmachine.com" width="100%" height="1400"> </iframe>

The iframe will render inside the module.
You can use the design options in Divi to adjust padding, margins, and styling for the section containing the iframe.
Save your changes and preview the page to ensure the iframe is displaying properly.

Method 2: Using the Text Module

Alternatively, if you want to insert an iframe within text content, you can use the Text Module and insert the iframe in the HTML view.

Click the + button to add a Text Module within your section or row.
Choose the Text module from the list.
In the Text module, you’ll see two tabs: Visual and Text.
Switch to the Text tab (this is where you can input raw HTML code).
Paste your iframe code into the Text editor.
Switch back to Visual to preview how it will look in the editor.
After inserting the code, save your changes, and preview the page to ensure everything is displaying correctly.

A few more things to consider

Responsive Iframe in Divi:

If you want to ensure the iframe is fully responsive, you can use custom CSS for better control. You can add this CSS to the Divi Advanced > Custom CSS tab or in the Divi Theme Options > Custom CSS.

Iframe Blocking

Iframe Blocking: Some themes and plugins may restrict iframe usage for security reasons. In such cases, you may need to adjust the security settings or use plugins designed for iframe embedding.

Share the blog post

How to insert your Press Room into your WordPress web site