[Request] The Boss should have a Landing Page in parallax • BuddyBoss

Tagged: landing page, parallax

This topic has 9 replies, 4 contibutors, and was last updated 9 years, 5 months ago by Anonymous.

Viewing 10 posts - 1 through 10 (of 10 total)

Question

June 5, 2015 at 2:55 pm #40985

Cristiano
@cristiano

The Boss should have a Landing Page in parallax, could be a plugin or a custom page.

Answers

June 5, 2015 at 3:44 pm #40988

Alyssa
Participant
@alyssa-buddyboss

@cristiano I’ll pass this along to the developers but aren’t there any plugin that can help you accomplish this?

September 1, 2015 at 5:43 pm #45558

Shizuka
@localp

Hi @tjchester, am I correct in my understanding that in order to build a landing page, I will have to set a static front page and alter the child theme’s style.css? Or is there a CSS file that is specifically applied to the default Front Page that I am not aware of?

My goal is to have a landing page similar to this: http://demos.bavotasan.com/arcade/
From the login page and beyond would be the default Boss. theme.

Also, is it not better to cut down on the number of plugins used to avoid potential future conflicts with the theme upgrades? I feel that providing a parallax scrolling option for a landing page is a reasonable request.

September 2, 2015 at 9:48 am #45601

Anonymous
@

Hi @localp, It is already added as suggestion for our theme, You can easily create landing pages using any page builder plugin, like
https://wordpress.org/plugins/siteorigin-panels/
http://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431

Regards
Varun Dubey

September 2, 2015 at 8:19 pm #45631

Shizuka
@localp

Hi @vapvarun, thank you so much for your reply!

What is the best-practice way to create a landing page without using a plugin?
I actually prefer to learn the nitty-gritty parts of WordPress, and would love to have input from the pros 🙂

September 3, 2015 at 12:11 am #45646

Anonymous
@

Hi @localp, other themes are also using page builder or their inbuilt page builder. Our theme do not come with any page builder.
Regards

September 3, 2015 at 11:01 am #45698

Alyssa
Participant
@alyssa-buddyboss

@localp best practices you may want to create a custom page template in WordPress, see codex here: http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates

September 26, 2015 at 10:12 am #47163
Shizuka
@localp
Is there any way that I can edit my replies?

In any case, I’ve changed the code above (after line 57 in functions.php) to this, without deregistering anything BoddyBoss-related:
```
if ( !is_admin() ) {
	function register_fullpagejs_scripts_styles() {
		wp_register_script('fullpagejs_js', get_stylesheet_directory_uri().'/js/jquery.fullPage.min.js', array('jquery','jquery-ui-core') );
		wp_register_style('fullpagejs_css', get_stylesheet_directory_uri().'/css/jquery.fullPage.css');
	}
	function run_fullpagejs_front_page() {
		register_script();
		if( is_page('front-page') ) {
			wp_enqueue_script('fullpagejs_js');
			wp_enqueue_script('fullpagejs_css');
		}
	}
	add_action('wp_enqueue_scripts','run_fullpagejs_front_page');
}
```
My front-page.php is this, a cut-and-paste to test out the sample code included in the fullPage.js plugin:
```
<?php
/**
 * Template Name: Front Page Template
 *
 * Description: A page template that provides a key component of WordPress as a CMS
 * by meeting the need for a carefully crafted introductory page. The front page template
 * in BuddyBoss consists of a page content area for adding text, images, video --
 * anything you'd like -- followed by front-page-only widgets in one or two columns.
 *
 * @package WordPress
 * @subpackage Boss
 * @since Boss 1.0.0
 */

get_header(); ?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>No Anchor links - fullPage.js</title>

	

	<script type="text/javascript">
		jQuery(document).ready(function() {
			jQuery('#fullpage').fullpage({
				sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE']
			});
		});
	</script>

</head>
<body>

<div id="fullpage">
	<div class="section " id="section0">
		<h1>fullPage.js</h1>
		<p>No Anchor Links (#)</p>
		<img src="imgs/fullPage.png" alt="fullPage" />
	</div>
	<div class="section" id="section1">
		<div class="intro">
			<h1>More Simple yet</h1>
			<p>Sections won't contain anchor links. It's more simple to configure but a bit more restrictive.</p>
		</div>
	</div>
	<div class="section" id="section2">
		<div class="intro">
			<h1>URL without /#</h1>
			<p>But back button won't work!</p>
		</div>
	</div>
</div>

</body>
</html>
```
After all this, I am getting a blank white page.

Here are my current questions:

1. What happened to the BuddyBoss header and footer? Is there some kind of conflict that I need to resolve?

2. Do I need this in my HTML for the fullPage.js to work?
```
<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('#fullpage').fullpage({
			sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE']
		});
	});
</script>
```
Thank you!
September 26, 2015 at 2:09 pm #47193
Shizuka
@localp
Sorry @vapvarun and @tjchester, there was an error in the functions.php code that I posted earlier… I’ve also modified it to deregister the WordPress default jQuery to avoid the noConflict error.
```
function load_cdn() {
	if ( !is_admin() ) {
		wp_deregister_script('jquery');
		wp_deregister_script('jquery-ui-core');
		wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', array(), '1.11.3');
		wp_enqueue_script('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js', array(), '1.11.4');
	}
}
add_action('init', 'load_cdn');

function register_fullpagejs_scripts_styles() {
	if ( !is_admin() ) {
		wp_register_script('fullpagejs_js', get_stylesheet_directory_uri() . '/js/jquery.fullPage.min.js', array('jquery','jquery-ui') );
		wp_register_style('fullpagejs_css', get_stylesheet_directory_uri() . '/css/jquery.fullPage.css');
	}
}
add_action('init', 'register_fullpagejs_scripts_styles');

function run_fullpagejs_front_page() {
	if( is_page('front-page') ) {
		wp_enqueue_script('fullpagejs_js');
		wp_enqueue_script('fullpagejs_css');
	}
}
add_action('wp_enqueue_scripts','run_fullpagejs_front_page');
```
The snippet in my second question above is now:
```
<script type="text/javascript">
	$(document).ready(function() {
		$('#fullpage').fullpage({
			sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE']
		});
	});
</script>
```
Attached is what I see now (the header and footer is back!), but it looks like the jQuery plugin/CSS aren’t kicking in. Am I doing something wrong, or is there a child theme behavior that I’m not aware of?

Thank you again!
September 27, 2015 at 3:45 am #47226

Anonymous
@

Hi @localp
instead of
if( is_page(‘front-page’) ) this will only work if your page slug is front-page

use
https://codex.wordpress.org/Function_Reference/is_page_template
or
https://codex.wordpress.org/Function_Reference/is_front_page

Regards
Varun Dubey

Viewing 10 posts - 1 through 10 (of 10 total)

The question ‘[Request] The Boss should have a Landing Page in parallax’ is closed to new replies.

Support Forums

Question

Answers