How can we help?
< All Topics
Print

How to embed your Press room on your WordPress site

There are a few different ways to embed your newsroom on your website depending on which editor (in WordPress) you use. Here’s how to do it with the most common editors:

custom html

1. Insert an iframe in the Gutenberg Block Editor

If you are 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 by clicking on the Preview button above the block.
  • Customize the code by adjusting the width and height to fit your design.

Example with additional customization:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #pressFrame { overflow: scroll; }
        #pressFrame::-webkit-scrollbar { width: 0px; height: 0px; }
        #pressFrame { scrollbar-width: none; }
        #pressFrame { -ms-overflow-style: none; }
    </style>
</head>
<body>
    <iframe id="pressFrame" src="https://pressroom.newsmachine.com/" width="100%" height="1500" frameborder="0" allowfullscreen></iframe>
    <script>
        function resize_frame(e) {
            if (e.origin === 'https://pressroom.newsmachine.com') {
                var data = JSON.parse(e.data);
                if (data['height']) {
                    $('#pressFrame').css('height', (data['height'] + 1));
                }
            }
        }
        if (window.addEventListener) {
            window.addEventListener('message', resize_frame);
        } else if (window.attachEvent) {
            window.attachEvent('onmessage', resize_frame, false);
        }
    </script>
</body>

2. Insert an iframe in the Classic Editor

If you use the Classic Editor (or a plugin that provides the old editor):

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

text editor
  • Paste your iframe code where you want it.

Example:

<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 use certain themes, you can use a plugin to insert the iframe.

  • Install and activate a plugin like Shortcoder or Iframe Embedder.
  • Once activated, you can create shortcodes to wrap the iframe code or use widgets to embed it without editing the HTML.

4. Insert an iframe with Elementor

elementor code

If you use Elementor, you can easily add an iframe.

Method 1: Using the HTML widget

  • Open the page or post in Elementor where you want to add the iframe in Elementor.
  • Click on Edit with Elementor.
  • Search for the HTML widget in the left panel.
  • Drag and drop the HTML widget to the desired section.
  • Paste your iframe code, e.g.:

<iframe src="https://pressroom.newsmachine.com" width="100%" height="1400"></iframe>
  • You see the iframe content directly in Elementor.

Method 2: Using Elementor Shortcodes

  • Search for the Shortcode widget.
  • Drag the widget to the desired section.
  • Add the iframe code to the shortcode field if your website supports it.

5. Insert an iframe with 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 in Divi.
  • Click on “Edit with Divi Builder”.
  • Select Code Module from the list.

divi code
  • Paste your iframe code:

<iframe src="https://pressroom.newsmachine.com" width="100%" height="1400"></iframe>
  • The iframe content will be displayed directly in the module.

Method 2: Using the Text Module

If you want to insert an iframe in text, you can use the Text module.

  • Click on + button to add a Text Module.
  • Switch to Text mode and paste the iframe code.
  • Switch back to Visual mode to preview.

Extra tips

1. Responsive iframe in Divi

To ensure that the iframe is responsive, you can add custom CSS in Divi Advanced > Custom CSS or Divi Theme Options > Custom CSS.

2. Iframe blocking

Some themes and plugins may block iframe for security reasons. If you have problems, you can:

  • Adjust the security settings.
  • Use a plugin that supports iframe embedding.

Tags:
Table of Contents