Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Liam Hawkes
Liam Hawkes
4,094 Points

Display HTML page within a Wordpress page

Hey Guys!

I have got a HTML page with its own Stylesheet and JS folder. What would be the best (easiest) way to put that into a page within Wordpress.

At the moment I am using an iFrame but that isn't good practice as does not work well for mobile.

Here is the HTML page - http://thesimplesitecompany.co.uk/facebook/showcase/ Here is the Wordpress page - http://thesimplesitecompany.co.uk/showcase/

Hope someone can help! Thanks in advance, Liam

6 Answers

Matt Campbell
Matt Campbell
9,767 Points

Are they static images? As in, are they screenshots you've taken? Guessing the jquery is for transitions to other images in the placeholder?

Either way, just put the CSS and jQuery in a CSS and js folder in your theme directory and then link the files into this page.

If you want to update them from time to time then do as Kevin says but a custom post type isn't necessary. Just giving it a category of showcase or something will do. The loop can be tuned to take every sixth images so only one image comes up in each box and isn't repeated across boxes.

If you'd like some more help, let me know, I can help over Skype. :)

Kevin Korte
Kevin Korte
28,149 Points

So the first thing that comes to mind is to use a custom post type, and than set up custom fields. That way, you set the CSS and JS in the header file, and than you can add or subtract new projects by adding text, images, etc for the page as a custom post, and the PHP code you would have to write for that page would display that. Wrap that PHP in the HTML and you are set.

Maybe Zac Gordon can give some better advice. Also, probably worth checking out his lessons here. http://teamtreehouse.com/library/websites/how-to-build-a-wordpress-theme

This is the approach I would first take anyway.

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

+1 to Matthew for saying to just add the markup CSS and js into your theme.

Your call on whether to use custom posts or use the default post type and categories.

I would definitely say you want to rebuild the page within WordPress and not do an iframe include.

Liam Hawkes
Liam Hawkes
4,094 Points

Thanks both for your help!

Kevin Korte I would love to turn it into a custom post type, but think that is a little to advance for my level at the moment. I will be following through the wordpress tutorials in the near future.

Matthew Campbell I wasn't expecting it to be that straight-forward but with a little tweaking that has worked so thanks for your help!

Thanks guys!

Matt Campbell
Matt Campbell
9,767 Points

Hey Liam Hawkes, no problem...glad to help!

Zac Gordon's videos on custom post types are the best you'll find but for this instance, I don't think it necessary. I think a custom loop set to grab the 6 most recent posts and display post 1 in box 1, post 2 in box 2 etc...would be better. Otherwise you'll end up with 6 loops and 6 post types/categories. Keep it simple..the code isn't that bad to do that either. You just need to understand the PHP count function.

Liam Hawkes
Liam Hawkes
4,094 Points

Cheers! Will look into that.