Display Directory inside your current site using iFrames

iFrames allow you to display parts of other themes/sites inside your own website. For instance, if you have the Directory theme installed inside a sub-domain you can use iFrames to display that sub-site in various parts of your main site. Getting this to work is simple, all you do is paste the iFrame code inside an appropriate page or (Text) widget.

The iFrame code should look something like this

<div style="overflow: hidden;">
<iframe frameborder="0" style="height: 700px; margin-top: -218px; width: 100%;" src="https://templatic.com/demos/directory/"></iframe>
</div>

Here’s what some of these controls mean…

height – set the height of the frame (in pixels)

margin-top – cuts the top of the embedded page. Useful if you want to hide the top part. For example, enter -32px to hide the WordPress admin bar. Insert -218px to hide the header or -250px to hide the header + admin bar.

width – enter a fixed width (in pixels) or as a percentage. Entering 100% will make the iFrame span across the whole element in which you placed it.

Example: Displaying Directory inside TwentyFifteen

Let’s imagine you want to display the Directory demo inside the homepage of the stock WordPress Twenty Fifteen theme. Here’s how you’d do it…

  1. Go to Pages -> Add New and create a new page called “Homepage”.
  2. Switch the content window to “Text” and insert the following code 
    <div style="overflow: hidden;">
<iframe frameborder="0" style="height: 700px; margin-top: 0px; width: 100%;" src="https://templatic.com/demos/directory/"></iframe>
</div>
  3. Go to Settings -> Reading and under “Front Page Displays” select your new “Homepage” map as the static front page.

If you did everything correctly your new homepage should look something like this
ff574