How to Create a Splash Page

[bamajr]

Before this gets moved, or someone blindly replies about this being a duplicate post, please read the whole thing. I don't feel that this is a dupe as I'm not looking for something as simple as a landing page (http://www.briangardner.com/create-landing-page/ & http://www.studiopress.community/topic/what-is-the-current-snippet-to-create-splash-page/). I've read both of these and they are not exactly what I'm trying to accomplish. I even posted about this issue (at the second link, provided above) and haven't gotten any response. I have used this idea on another website and it doesn't exactly meet the objective, for one specific client.

I've been using Genesis for a while now and have built a couple of my own themes and have spent quite a bit of time modifying several other themes. However, on one website, I'm still having a problem - or I'm just simply confused.

I have a client who has had some flash work done for him. In fact, the client's old website was almost entirely flash. They had some issues with their domain registrar and host, and lost their domain. Now, I'm trying to help them set up a new website at a new host. This new website will primarily utilize WordPress/Genesis, instead of the Flash idea. However, they still want to incorporate parts of the flash movie (Who can blame them? It probably cost them quite a bit.).

Flash has it's places, but I'm not a fan of using flash for entire websites. As the prior website wasn't under my supervision and the client's current wants are not my choice, please, help me focus on a WordPress/Genesis solution. Here is what I'm trying to accomplish:

I need the root (I.E. http://www.MyWebsite.com/) to land on a page with nothing but a single image, one line of text two buttons.
Button #1 one will take the visitor to the self-encompassing flash movie (I.E. http://www.MyWebsite.com/flash/), which is little more than a .SWF file, embedded in a similar fashion, the image in #1 (above) was.
Button #2 will take the visitor to the WordPress home page (I.E. http://www.MyWebsite.com/home/).

Everything else will operate like a normal WordPress/Genesis website.

- - - - -

So, here's my issue...

I know how to use create a landing page, but I'm running into issues trying to use that process to insert a single image, a single line of text and a line with two buttons in it (FYI: The buttons are CSS, not FLASH - in case that matters). The image is not a background image for the whole page, just the background image of a single div.

<code>

<div> <!-- outer div -->

<div id="image"> <!-- image div -->

<div class="left"> <!-- left content --> </div>

<div class="right"> <!-- right content --> </div>

</div> <!-- close image div -->

<div id="text"> <!-- line of text --> </div>

<div id="buttons"> <!-- buttons div -->

<span class="left-button"> <!-- left button --> </span>

<span class="right-button"> <!-- right button --> </span>

</div> <!-- close button div -->

</div> <!-- close outer div -->

<code>

This is essentially all I need on the root of the website (I.E. http://www.MyWebsite.com/). No header. No Footer. No Widgets. No Menu. No Sidebar. No Posts.

- - - - -

The Flash page will basically be laid out the same way, only without the text and buttons.

<code>

<div> <!-- outer div -->

<embed> <!-- embed flash .SWF file -->

<code>

The Flash Movie is the same size as the image from the root.

- - - - -

Does this make sense to anyone other than me?

[Chris Cree]

I'm not quite sure what your question is here. But you can create a home.php file, put all the remove_action statements you need to remove the items like with a landing page. Then you can add in the HTML with your image and links.

For the flash page you can create another page template that also strips out the unwanted elements. Make sure you remove the genesis loop on this page template with

remove_action( 'genesis_loop', 'genesis_do_loop' );

Then add the script to your flash video. You can make any page URL you want show the flash video then by adding a new page using that page template.

[bamajr]

Thanks for your response Chris...

I must be doing something, little or big, wrong. This is exactly what I've been doing and I'm not quite getting what I want. I'm going to look over my work again to see if I can find what ever it is I'm missing.

[bamajr]

So, here is what I've put together, based of the afore mentioned articles/tutorials:


<?php
/**
* This file adds the Landing template to the BamajrEFM Child Theme.
*
* @author Bamajr
* @package BamajrEFM
* @subpackage Customizations
*/
 
// Add custom body class to the head
add_filter( 'body_class', 'add_body_class' );
function add_body_class( $classes ) {
$classes[] = 'bamajrnhcc-splash';
return $classes;
}
 
// Remove header, navigation, breadcrumbs, footer widgets, footer
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
remove_action( 'genesis_after_header', 'genesis_do_nav' );
remove_action( 'genesis_after_header', 'genesis_do_subnav', 15 );
remove_action( 'genesis_before_content_sidebar_wrap', 'genesis_do_breadcrumbs');
remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
 
genesis();


It produces a white box with the generic first post in it, which I do not want on the home page.

At what point do I add the suggested HTML?

I realize I need to add something similar to:

Old Flash Site Enter New Website

But, I guess I'm unsure of where to add this, in the code I've shown, above. I need to ensure blog posts are not part of this page.

[bamajr]

FYI: Forum Admins and Moderators, the CODE tag isn't working correctly!

[bamajr]

FYI: Forum Admins and Moderators, the CODE tag isn't working correctly! When the CODE tag is being used, some HTML is still being rendered instead of printed to the screen, as you can see above!

Also, the option to edit posts goes away after a specific amount of time, right? Well, if you use your browser's BACK BUTTON, you can edit the post as many times as you want, even without the presence of the BACK BUTTON - as I'm doing now.

[rbrown08]

Hi, I'm wondering if you got this figured out as I've been asked to do the same thing.  I can make the landing page, but I don't know how I'm to add the flash animation to it.

---

@Roxann3Brown

[tomarob]

I'm kinda' new at this, - - but can't you just 'iframe' if in??Create a folder with the necesssary files and folders inside it to achieve what you need, drop (ftp) it into your root, - - and then just use the little iframe shortcode to insert it right onto/into your (any) page.  The plug-in I use to do this very thing can be downloaded from here . . . http://wordpress.org/extend/plugins/iframe/

In other words, what your calling in should work independantly on it's own if your were to type in 'yoursite.com/newfolder', - - as long as it works like that, - - your iframe shortcode will show the results exactly like that right on your page . . .

[rbrown08]

I couldn't just iframe the video in because the whole idea is that the page will not have the header and footer sections like the entire website has.  What I need is an intro page that strictly has the video running and then the user clicks a link to enter the site.

I've tried iframes in the past for other types of projects and IE doesn't read iframes; I don't know if that is still the case.

---

@Roxann3Brown

[bamajr]

@rbrown08 - I'm not sure what version of IE you are using, but I've not had a problem with IE and iFrames, for a while. As best as I can remember, iFrames have worked with IE, all the way back to at least 2005. I know there have been some issues reported, but of the issues I'm aware of, just about all of them were due to restrictive settings in IE, which I don't think can be avoided, even today. Similar to disabling JavaScript, if iFrames are not allowed, they wont work.

That being said, @tomarob I'm not sure iFrame-ing is a good idea for a flash movie, or any media object for that matter.

The HTML iFrame Element (or HTML inline frame element) represents a nested browsing context, effectively embedding another HTML page into the current page. - Mozilla

While I'm sure there is a way to use iFrames, displaying a Flash video on a page, does not require access to another HTML Page. The Flash .SWF file simply needs to be embedded. This can be done by uploading the Flash .SWF file, in the WordPress Media Manager and using the .SWF file's path (URL) to embed it with the traditional Flash embed script.

In the end, I usually recommend against using Flash on a website's home page or on priority landing pages. There are so many things which can keep Flash from working correctly, if at all.

In the case of my client, their old website was built entirely in Flash. The client wanted to embed the old Flash website (one .SWF file) on a single page, so it was accessible by those who want to continue using it. The main home page though, was not ever going to contain an embedded flash video. The home page would have had two links on it - one for the old flash website and one for the new website.

[tomarob]

@bamajr

I'm not sure if I'm understanding exactly what you're looking for, - - do you mean a completely blank page and then just the two 'text-buttons'??

Anyway, - - I experimented a little with that in mind, - - and came up with this , - - (and put it very temporarily on a site I just made for a friend).

And although I couldn't use the 'exact' paging you want here for the obvious reasons that it's a working site, - - if you click on each block of menu-text, - - you'll at least see the differences up in the address bar of each  . . .

http://www.chesterfieldremodeler.com/button-page/

I didn't bother with much styling or any of that, - - just kept it bare bones.

Lemme know if this is even close to what you're looking for?? . . .

P.S.  Didn't use any 'iframing', - - bein's you don't seem to like that approach . . .

[tomarob]

OK, - - I even created an 'image-page' with a more designed look, - - and all seems to be workable . . .

http://www.chesterfieldremodeler.com/testee/

 

[rbrown08]

@bamajr,

Here's the code I used on a template page and you I've put in BOLD where the html code would go.  This worked for me...

<code>

<?php
/**
* This file adds the For Women template to our Child Theme.
*
* @author Roxanne Brown
* @package Child
* @subpackage Customizations
*/

/*
Template Name: For Women
*/

// Add custom body class to the head
add_filter( 'body_class', 'add_body_class' );
function add_body_class( $classes ) {
$classes[] = 'forwomen';
return $classes;
}

add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); // Force Full-Width Layout
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' ); // Removes breadcrumbs
remove_action( 'genesis_post_title','genesis_do_post_title' ); // Removes post title
remove_action( 'genesis_post_content', 'genesis_do_post_content' ); // Removes content
add_action( 'genesis_post_content', 'child_do_content' ); // Adds your custom page code/content

// Do Custom Content
function child_do_content() { ?>

THIS IS WHERE YOU CAN PUT IN YOUR HTML CODE.

<?php }
genesis();

---

@Roxann3Brown

[tomarob]

Very good stuff there, rbrown08, - - I did it in kind of a 'back-door-cheater' fashion.

I made up a new html page and named it php, - - dropped it into the theme file, - - and let it automatically show up on my page edits right on my templates list. Then I just chose it instead of say, 'default', - - and I can then name any page I want to have that template.  It just needed one short paragraph of php to 'title' it.

Just a one-shot solution, - - but I would think that's all that would be needed. Any changes later, - - I would just re-code the php page itself.

[rbrown08]

@tomarob,  That's a good way too because you can use that template for several pages if you like.

For creating CSS buttons for your site, I love this:  http://css-tricks.com/examples/ButtonMaker/.

---

@Roxann3Brown

[tomarob]

That is really cool, thanks for that!!  I'm a css-tricks lurker myself, - - but I didn't even know that was there!

[rbrown08]

You're welcome.  I'm glad someone else thinks it's as cool as I think it is, lol.

---

@Roxann3Brown

[rbrown08]

Somehow my post was sent twice and I couldn't delete....

---

@Roxann3Brown

[Author]

Posts