{"id":36991,"date":"2024-10-10T05:53:13","date_gmt":"2024-10-10T03:53:13","guid":{"rendered":"https:\/\/market.newsmachine.com\/?p=36991"},"modified":"2024-11-13T16:12:58","modified_gmt":"2024-11-13T15:12:58","slug":"how-to-insert-your-press-room-into-your-wordpress-web-site","status":"publish","type":"post","link":"https:\/\/market.newsmachine.com\/en\/how-to-insert-your-press-room-into-your-wordpress-web-site\/","title":{"rendered":"How to insert your Press Room into your WordPress web site"},"content":{"rendered":"\n<p>To incorporate your NewsMachine Press Room into your own WordPress website, it&#8217;s easier than you think.<\/p>\n\n\n\n<p>There are a few different ways of doing this, depending on the editor (in WordPress) you are using. Here&#8217;s how to do it with most commonly used editors:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Inserting an &lt;Iframe&gt; in Gutenberg Block Editor <\/strong><\/h3>\n\n\n\n<p>If you&#8217;re using the new WordPress Block Editor (Gutenberg), follow these steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the page or post where you want to insert the &lt;iframe&gt;.<\/li>\n\n\n\n<li>Click on the block inserter + icon to add a new block.<\/li>\n\n\n\n<li>Search for Custom HTML and select it<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"385\" height=\"319\" src=\"https:\/\/market.newsmachine.com\/wp-content\/uploads\/2024\/11\/html-edited.png\" alt=\"\" class=\"wp-image-37135\" style=\"width:247px;height:auto\" srcset=\"https:\/\/market.newsmachine.com\/wp-content\/uploads\/2024\/11\/html-edited.png 385w, https:\/\/market.newsmachine.com\/wp-content\/uploads\/2024\/11\/html-edited-300x249.png 300w\" sizes=\"(max-width: 385px) 100vw, 385px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the Custom HTML block, paste your &lt;iframe&gt; code. <br><strong>Here is an example of the code:<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;iframe src=\" https:\/\/pressroom.newsmachine.com\" width=\"100%\" height=\"1400\"&gt; &lt;\/iframe&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can preview the result by clicking the Preview button above the block.<\/li>\n\n\n\n<li>You can tailor the code, &nbsp;adjust the width and height in the iframe code to fit your design. <br>Like the example below:&nbsp;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head>\n    &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\">&lt;\/script>\n    &lt;style>\n        \/* Hide scrollbar but keep scrolling *\/\n        #pressFrame {\n            overflow: scroll; \/* Enable scrolling *\/\n        }\n\n        \/* For Webkit browsers (Chrome, Safari) *\/\n        #pressFrame::-webkit-scrollbar {\n            width: 0px; \/* Hide the scrollbar *\/\n            height: 0px; \/* For horizontal scrollbar *\/\n        }\n\n        \/* For Firefox *\/\n        #pressFrame {\n            scrollbar-width: none; \/* Hide scrollbar in Firefox *\/\n        }\n\n        \/* For IE\/Edge *\/\n        #pressFrame {\n            -ms-overflow-style: none; \/* Hide scrollbar in IE\/Edge *\/\n        }\n    &lt;\/style>\n&lt;\/head>\n\n&lt;body>\n    &lt;iframe id=\"pressFrame\" src=\"https:\/\/pressroom.newsmachine.com\/\" width=\"100%\" height=\"1500\" frameborder=\"0\" allowfullscreen>&lt;\/iframe>\n\n    &lt;script>\n        function resize_frame(e) {\n            console.log(\"Origin:\" + e.origin);\n            if (e.origin === 'https:\/\/pressroom.newsmachine.com') {\n                var data = JSON.parse(e.data);\n                console.log(\"iframe change:\" + e.data);\n            }\n            if (data&#91;'height']) {\n                \/\/ Remember! Change ifrm_id to the id of the iframe\n                var extraHeight = 1;\n                \/\/ Use \"Lagom number\" if you like to handle DOM created\/Ajax loaded content inside the frame\n                $('#pressFrame').css('height', (data&#91;'height'] + extraHeight));\n            }\n        }\n\n        \/*\n         * If this code snippet returns false, this means that the addEventListener method property is not supported by the browser. \n         * This is the case for Internet Explorer, where attachEvent is used instead. \n         *\/\n        if (window.addEventListener) {\n            window.addEventListener('message', resize_frame);\n            console.log(\"added EventListener\");\n        } else if (window.attachEvent) {\n            window.attachEvent('onmessage', resize_frame, false);\n            console.log(\"attached Event\");\n        }\n    &lt;\/script>\n&lt;\/body>\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Inserting an &lt;Iframe&gt;<\/strong> in the Classic Editor<\/h3>\n\n\n\n<p>If you&#8217;re using the Classic Editor (or a plugin that provides the old-style editor):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to the post or page editor.<\/li>\n\n\n\n<li>Switch from Visual mode to Text mode (HTML).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"451\" height=\"64\" src=\"https:\/\/market.newsmachine.com\/wp-content\/uploads\/2024\/10\/Picture-2.png\" alt=\"\" class=\"wp-image-37140\" srcset=\"https:\/\/market.newsmachine.com\/wp-content\/uploads\/2024\/10\/Picture-2.png 451w, https:\/\/market.newsmachine.com\/wp-content\/uploads\/2024\/10\/Picture-2-300x43.png 300w\" sizes=\"(max-width: 451px) 100vw, 451px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Paste your iframe code directly where you want it to appear.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;iframe src=\" https:\/\/pressroom.newsmachine.com\" width=\"100%\" height=\"1400\"&gt; &lt;\/iframe&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Switch back to Visual mode to see the placement (though you won\u2019t see the actual iframe unless you preview the page or post).<\/li>\n\n\n\n<li>Update or publish the post.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Using a Shortcode Plugin<\/strong><\/h3>\n\n\n\n<p>If you are restricted from adding HTML or using certain themes, you can use a plugin to insert iframes.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Install and activate a plugin like <strong>Shortcoder<\/strong> or <strong>Iframe Embedder<\/strong>.<\/li>\n\n\n\n<li>After activation, you can create shortcodes that wrap around iframe code or use widgets to embed iframes without directly editing HTML.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Using the Elementor Editor<\/strong><\/h3>\n\n\n\n<p>Inserting an &lt;iframe&gt; in WordPress when using <strong>Elementor<\/strong> is a straightforward process.<\/p>\n\n\n\n<p><strong>Method 1: Using the HTML Widget<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the page or post where you want to add the &lt;iframe&gt; in Elementor.<\/li>\n\n\n\n<li>Click Edit with Elementor to launch the editor.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"319\" height=\"395\" src=\"https:\/\/market.newsmachine.com\/wp-content\/uploads\/2024\/10\/elementor2.png\" alt=\"\" class=\"wp-image-37148\" style=\"width:209px;height:auto\" srcset=\"https:\/\/market.newsmachine.com\/wp-content\/uploads\/2024\/10\/elementor2.png 319w, https:\/\/market.newsmachine.com\/wp-content\/uploads\/2024\/10\/elementor2-242x300.png 242w\" sizes=\"(max-width: 319px) 100vw, 319px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>On the left panel, search for the HTML widget.<\/li>\n\n\n\n<li>Drag and drop the HTML widget onto the section or column where you want to place the iframe.<\/li>\n\n\n\n<li>Paste your iframe code. For example:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;iframe src=\" https:\/\/pressroom.newsmachine.com\" width=\"100%\" height=\"1400\"&gt; &lt;\/iframe&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The iframe will appear directly in the Elementor preview.<\/li>\n\n\n\n<li>You can adjust the width and height in the iframe code to fit your design.<\/li>\n<\/ul>\n\n\n\n<p><strong>Method 2: Using Elementor Shortcodes<\/strong><\/p>\n\n\n\n<p>For certain cases, you might need to use Elementor\u2019s <strong>Shortcode widget<\/strong> to insert custom HTML.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Search for the Shortcode Widget:<\/li>\n\n\n\n<li>Drag the Shortcode widget into the desired section.<\/li>\n\n\n\n<li>Inside the shortcode box, you can add the iframe shortcode if your site supports it.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5.<\/strong> Using the DIVI Editor<\/h3>\n\n\n\n<p>Method 1: Using the Code Module<\/p>\n\n\n\n<p>Divi provides a Code Module that allows you to insert custom HTML, JavaScript, and CSS, including iframes.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&nbsp;Open the page or post you want to edit using Divi.<\/li>\n\n\n\n<li>&nbsp;Click Edit with the Divi Builder to enter the Divi Editor.<\/li>\n\n\n\n<li>Select \u201cCode\u201d widget form Divi module list.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"326\" height=\"201\" src=\"https:\/\/market.newsmachine.com\/wp-content\/uploads\/2024\/10\/divi1.png\" alt=\"\" class=\"wp-image-37151\" style=\"width:243px;height:auto\" srcset=\"https:\/\/market.newsmachine.com\/wp-content\/uploads\/2024\/10\/divi1.png 326w, https:\/\/market.newsmachine.com\/wp-content\/uploads\/2024\/10\/divi1-300x185.png 300w\" sizes=\"(max-width: 326px) 100vw, 326px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the Code module settings, paste your `&lt;iframe&gt;` code. For example:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;iframe src=\" https:\/\/pressroom.newsmachine.com\" width=\"100%\" height=\"1400\"&gt; &lt;\/iframe&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&nbsp; The iframe will render inside the module.<\/li>\n\n\n\n<li>&nbsp; You can use the design options in Divi to adjust padding, margins, and styling for the section containing the iframe.<\/li>\n\n\n\n<li>&nbsp; Save your changes and preview the page to ensure the iframe is displaying properly.<\/li>\n<\/ul>\n\n\n\n<p><strong>Method 2: Using the Text Module<\/strong><\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click the + button to add a Text Module within your section or row.<\/li>\n\n\n\n<li>Choose the Text module from the list.<\/li>\n\n\n\n<li>In the Text module, you\u2019ll see two tabs: Visual and Text.<\/li>\n\n\n\n<li>Switch to the Text tab (this is where you can input raw HTML code).<\/li>\n\n\n\n<li>Paste your iframe code into the Text editor.<\/li>\n\n\n\n<li>Switch back to Visual to preview how it will look in the editor.<\/li>\n\n\n\n<li>After inserting the code, save your changes, and preview the page to ensure everything is displaying correctly.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>A few more things to consider<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Responsive Iframe in Divi:<\/strong><\/h3>\n\n\n\n<p>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 &gt; Custom CSS tab or in the Divi Theme Options &gt; Custom CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Iframe Blocking<\/strong><\/h3>\n\n\n\n<p><strong>Iframe Blocking:<\/strong> 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.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To incorporate your NewsMachine Press Room into your own WordPress website, it&#8217;s easier than you think. There are a few different ways of doing this, depending on the editor (in WordPress) you are using. Here&#8217;s how to do it with most commonly used editors: 1. Inserting an &lt;Iframe&gt; in Gutenberg Block Editor If you&#8217;re using [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":36993,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":"[]"},"categories":[322],"tags":[306,323,333,381],"class_list":["post-36991","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-en","tag-newsmachine-en","tag-press-release","tag-press-room","tag-web-site"],"_links":{"self":[{"href":"https:\/\/market.newsmachine.com\/en\/wp-json\/wp\/v2\/posts\/36991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/market.newsmachine.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/market.newsmachine.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/market.newsmachine.com\/en\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/market.newsmachine.com\/en\/wp-json\/wp\/v2\/comments?post=36991"}],"version-history":[{"count":0,"href":"https:\/\/market.newsmachine.com\/en\/wp-json\/wp\/v2\/posts\/36991\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/market.newsmachine.com\/en\/wp-json\/wp\/v2\/media\/36993"}],"wp:attachment":[{"href":"https:\/\/market.newsmachine.com\/en\/wp-json\/wp\/v2\/media?parent=36991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/market.newsmachine.com\/en\/wp-json\/wp\/v2\/categories?post=36991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/market.newsmachine.com\/en\/wp-json\/wp\/v2\/tags?post=36991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}