Create Landing Page With Custom Fields
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) { | |
$meta_boxes[] = array( | |
'title' => 'Section Hero', | |
'post_types' => 'page', | |
'fields' => array( | |
array( | |
'id' => 'hero_title', | |
'name' => 'Title', | |
'type' => 'text', | |
), | |
array( | |
'id' => 'hero_desc', | |
'name' => 'Description', | |
'type' => 'wysiwyg', | |
'options' => array( | |
'teeny' => true, | |
'media_buttons' => false, | |
'quicktags' => false, | |
), | |
), | |
array( | |
'id' => 'hero_button_link', | |
'name' => 'Button Link', | |
'type' => 'text', | |
), | |
array( | |
'id' => 'hero_button_text', | |
'name' => 'Button Text', | |
'type' => 'text', | |
), | |
), | |
); | |
$meta_boxes[] = array( | |
'title' => 'Section Intro', | |
'post_types' => 'page', | |
'fields' => array( | |
array( | |
'id' => 'intro_title', | |
'name' => 'Title', | |
'type' => 'text', | |
), | |
array( | |
'id' => 'intro_desc', | |
'name' => 'Description', | |
'type' => 'wysiwyg', | |
'options' => array( | |
'teeny' => true, | |
'media_buttons' => false, | |
'quicktags' => false, | |
), | |
), | |
array( | |
'id' => 'intro_icons', | |
'name' => 'Icon', | |
'desc' => 'Enter Font-Awesome Icon Class', | |
'type' => 'text', | |
'clone' => true, | |
), | |
), | |
); | |
$meta_boxes[] = array( | |
'title' => 'Section Services', | |
'post_types' => 'page', | |
'fields' => array( | |
array( | |
'type' => 'group', | |
'id' => 'services', | |
'collapsible' => true, | |
'group_title' => 'Section {#}', | |
'clone' => true, | |
'fields' => array( | |
array( | |
'id' => 'image', | |
'name' => 'Image', | |
'type' => 'image_advanced', | |
'max_file_uploads' => 1, | |
'max_status' => false, | |
), | |
array( | |
'id' => 'title', | |
'name' => 'Title', | |
'type' => 'text', | |
), | |
array( | |
'id' => 'desc', | |
'name' => 'Description', | |
'type' => 'wysiwyg', | |
'options' => array( | |
'teeny' => true, | |
'media_buttons' => false, | |
'quicktags' => false, | |
), | |
), | |
), | |
), | |
), | |
); | |
$meta_boxes[] = array( | |
'title' => 'Section Features', | |
'post_types' => 'page', | |
'fields' => array( | |
array( | |
'id' => 'features_title', | |
'name' => 'Title', | |
'type' => 'text', | |
), | |
array( | |
'id' => 'features_desc', | |
'name' => 'Description', | |
'type' => 'wysiwyg', | |
'options' => array( | |
'teeny' => true, | |
'media_buttons' => false, | |
'quicktags' => false, | |
), | |
), | |
array( | |
'type' => 'group', | |
'id' => 'features', | |
'clone' => true, | |
'collapsible' => true, | |
'group_title' => 'Feature {#}', | |
'fields' => array( | |
array( | |
'id' => 'icon', | |
'name' => 'Icon', | |
'type' => 'text', | |
'desc' => 'Enter Font-Awesome Icon Class', | |
), | |
array( | |
'id' => 'title', | |
'name' => 'Title', | |
'type' => 'text', | |
), | |
array( | |
'id' => 'feature_desc', | |
'name' => 'Description', | |
'type' => 'wysiwyg', | |
'options' => array( | |
'teeny' => true, | |
'media_buttons' => false, | |
'quicktags' => false, | |
), | |
), | |
), | |
), | |
), | |
); | |
$meta_boxes[] = array( | |
'title' => 'Section Call To Action', | |
'post_types' => 'page', | |
'fields' => array( | |
array( | |
'id' => 'cta_title', | |
'name' => 'Title', | |
'type' => 'text', | |
), | |
array( | |
'id' => 'cta_desc', | |
'name' => 'Description', | |
'type' => 'wysiwyg', | |
'options' => array( | |
'teeny' => true, | |
'media_buttons' => false, | |
'quicktags' => false, | |
), | |
), | |
array( | |
'id' => 'cta_button_1_link', | |
'name' => 'Button 1 Link', | |
'type' => 'text', | |
), | |
array( | |
'id' => 'cta_button_1_text', | |
'name' => 'Button 1 Text', | |
'type' => 'text', | |
), | |
array( | |
'id' => 'cta_button_2_link', | |
'name' => 'Button 2 Link', | |
'type' => 'text', | |
), | |
array( | |
'id' => 'cta_button_2_text', | |
'name' => 'Button 2 Text', | |
'type' => 'text', | |
), | |
), | |
); | |
return $meta_boxes; | |
} ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<!-- | |
Spectral by HTML5 UP | |
html5up.net | @ajlkn | |
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) | |
--> | |
<html> | |
<head> | |
<title>Spectral by HTML5 UP</title> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]--> | |
<link rel="stylesheet" href="assets/css/main.css" /> | |
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]--> | |
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]--> | |
</head> | |
<body class="landing"> | |
<!-- Page Wrapper --> | |
<div id="page-wrapper"> | |
<!-- Header --> | |
<header id="header" class="alt"> | |
<h1><a href="index.html">Spectral</a></h1> | |
<nav id="nav"> | |
<ul> | |
<li class="special"> | |
<a href="#menu" class="menuToggle"><span>Menu</span></a> | |
<div id="menu"> | |
<ul> | |
<li><a href="index.html">Home</a></li> | |
<li><a href="generic.html">Generic</a></li> | |
<li><a href="elements.html">Elements</a></li> | |
<li><a href="#">Sign Up</a></li> | |
<li><a href="#">Log In</a></li> | |
</ul> | |
</div> | |
</li> | |
</ul> | |
</nav> | |
</header> | |
<!-- Banner --> | |
<section id="banner"> | |
<div class="inner"> | |
<h2>Spectral</h2> | |
<p>Another fine responsive<br /> | |
site template freebie<br /> | |
crafted by <a href="http://html5up.net">HTML5 UP</a>.</p> | |
<ul class="actions"> | |
<li><a href="#" class="button special">Activate</a></li> | |
</ul> | |
</div> | |
<a href="#one" class="more scrolly">Learn More</a> | |
</section> | |
<!-- One --> | |
<section id="one" class="wrapper style1 special"> | |
<div class="inner"> | |
<header class="major"> | |
<h2>Arcu aliquet vel lobortis ata nisl<br /> | |
eget augue amet aliquet nisl cep donec</h2> | |
<p>Aliquam ut ex ut augue consectetur interdum. Donec amet imperdiet eleifend<br /> | |
fringilla tincidunt. Nullam dui leo Aenean mi ligula, rhoncus ullamcorper.</p> | |
</header> | |
<ul class="icons major"> | |
<li><span class="icon fa-diamond major style1"><span class="label">Lorem</span></span></li> | |
<li><span class="icon fa-heart-o major style2"><span class="label">Ipsum</span></span></li> | |
<li><span class="icon fa-code major style3"><span class="label">Dolor</span></span></li> | |
</ul> | |
</div> | |
</section> | |
<!-- Two --> | |
<section id="two" class="wrapper alt style2"> | |
<section class="spotlight"> | |
<div class="image"><img src="images/pic01.jpg" alt="" /></div><div class="content"> | |
<h2>Magna primis lobortis<br /> | |
sed ullamcorper</h2> | |
<p>Aliquam ut ex ut augue consectetur interdum. Donec hendrerit imperdiet. Mauris eleifend fringilla nullam aenean mi ligula.</p> | |
</div> | |
</section> | |
<section class="spotlight"> | |
<div class="image"><img src="images/pic02.jpg" alt="" /></div><div class="content"> | |
<h2>Tortor dolore feugiat<br /> | |
elementum magna</h2> | |
<p>Aliquam ut ex ut augue consectetur interdum. Donec hendrerit imperdiet. Mauris eleifend fringilla nullam aenean mi ligula.</p> | |
</div> | |
</section> | |
<section class="spotlight"> | |
<div class="image"><img src="images/pic03.jpg" alt="" /></div><div class="content"> | |
<h2>Augue eleifend aliquet<br /> | |
sed condimentum</h2> | |
<p>Aliquam ut ex ut augue consectetur interdum. Donec hendrerit imperdiet. Mauris eleifend fringilla nullam aenean mi ligula.</p> | |
</div> | |
</section> | |
</section> | |
<!-- Three --> | |
<section id="three" class="wrapper style3 special"> | |
<div class="inner"> | |
<header class="major"> | |
<h2>Accumsan mus tortor nunc aliquet</h2> | |
<p>Aliquam ut ex ut augue consectetur interdum. Donec amet imperdiet eleifend<br /> | |
fringilla tincidunt. Nullam dui leo Aenean mi ligula, rhoncus ullamcorper.</p> | |
</header> | |
<ul class="features"> | |
<li class="icon fa-paper-plane-o"> | |
<h3>Arcu accumsan</h3> | |
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p> | |
</li> | |
<li class="icon fa-laptop"> | |
<h3>Ac Augue Eget</h3> | |
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p> | |
</li> | |
<li class="icon fa-code"> | |
<h3>Mus Scelerisque</h3> | |
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p> | |
</li> | |
<li class="icon fa-headphones"> | |
<h3>Mauris Imperdiet</h3> | |
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p> | |
</li> | |
<li class="icon fa-heart-o"> | |
<h3>Aenean Primis</h3> | |
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p> | |
</li> | |
<li class="icon fa-flag-o"> | |
<h3>Tortor Ut</h3> | |
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p> | |
</li> | |
</ul> | |
</div> | |
</section> | |
<!-- CTA --> | |
<section id="cta" class="wrapper style4"> | |
<div class="inner"> | |
<header> | |
<h2>Arcue ut vel commodo</h2> | |
<p>Aliquam ut ex ut augue consectetur interdum endrerit imperdiet amet eleifend fringilla.</p> | |
</header> | |
<ul class="actions vertical"> | |
<li><a href="#" class="button fit special">Activate</a></li> | |
<li><a href="#" class="button fit">Learn More</a></li> | |
</ul> | |
</div> | |
</section> | |
<!-- Footer --> | |
<footer id="footer"> | |
<ul class="icons"> | |
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li> | |
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li> | |
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li> | |
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li> | |
<li><a href="#" class="icon fa-envelope-o"><span class="label">Email</span></a></li> | |
</ul> | |
<ul class="copyright"> | |
<li>© Untitled</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li> | |
</ul> | |
</footer> | |
</div> | |
<!-- Scripts --> | |
<script src="assets/js/jquery.min.js"></script> | |
<script src="assets/js/jquery.scrollex.min.js"></script> | |
<script src="assets/js/jquery.scrolly.min.js"></script> | |
<script src="assets/js/skel.min.js"></script> | |
<script src="assets/js/util.js"></script> | |
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]--> | |
<script src="assets/js/main.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Template Name: Homepage Template | |
*/ | |
get_header(); | |
?> | |
<div id="primary" class="content-area"> | |
<main class="site-main" role="main"> | |
<!-- Banner --> | |
<section id="banner"> | |
<div class="inner"> | |
<h2><?php rwmb_the_value( 'hero_title' ); ?></h2> | |
<?php rwmb_the_value( 'hero_desc' ); ?> | |
<ul class="actions"> | |
<li><a href="<?php rwmb_the_value( 'hero_button_link' ); ?>" class="button special"><?php rwmb_the_value( 'hero_button_text' ); ?></a></li> | |
</ul> | |
</div> | |
<a href="#one" class="more scrolly">Learn More</a> | |
</section> | |
<!-- One --> | |
<section id="one" class="wrapper style1 special"> | |
<div class="inner"> | |
<header class="major"> | |
<h2><?php rwmb_the_value( 'intro_title' ); ?></h2> | |
<?php rwmb_the_value( 'intro_desc' ); ?> | |
</header> | |
<ul class="icons major"> | |
<?php | |
$icons = rwmb_meta( 'intro_icons' ); | |
foreach ( $icons as $icon ) : | |
?> | |
<li><span class="icon <?php echo $icon; ?> major style1"><span class="label"></span></span></li> | |
<?php endforeach; ?> | |
</ul> | |
</div> | |
</section> | |
<!-- Two --> | |
<section id="two" class="wrapper alt style2"> | |
<?php | |
$services = rwmb_meta( 'services' ); | |
foreach ( $services as $service ) : | |
$image = isset( $service['image'] ) && is_array( $service['image'] ) ? reset( $service['image'] ) : ''; | |
$image = wp_get_attachment_image_url( $image, 'full' ); | |
$title = isset( $service['title'] ) ? $service['title'] : ''; | |
$desc = isset( $service['desc'] ) ? $service['desc'] : ''; | |
?> | |
<section class="spotlight"> | |
<div class="image"><img src="<?php echo $image; ?>" alt="" /></div> | |
<div class="content"> | |
<h2><?php echo $title; ?></h2> | |
<?php echo $desc; ?> | |
</div> | |
</section> | |
<?php endforeach; ?> | |
</section> | |
<!-- Three --> | |
<section id="three" class="wrapper style3 special"> | |
<div class="inner"> | |
<header class="major"> | |
<h2><?php rwmb_the_value( 'features_title' ); ?></h2> | |
<?php rwmb_the_value( 'features_desc' ); ?> | |
</header> | |
<ul class="features"> | |
<?php | |
$features = rwmb_meta( 'features' ); | |
foreach ( $features as $feature ) : | |
$icon = isset( $feature['icon'] ) ? $feature['icon'] : ''; | |
$title = isset( $feature['title'] ) ? $feature['title'] : ''; | |
$desc = isset( $feature['feature_desc'] ) ? $feature['feature_desc'] : ''; | |
?> | |
<li class="icon <?php echo $icon; ?>"> | |
<h3><?php echo $title; ?></h3> | |
<?php echo $desc; ?> | |
</li> | |
<?php endforeach; ?> | |
</ul> | |
</div> | |
</section> | |
<!-- CTA --> | |
<section id="cta" class="wrapper style4"> | |
<div class="inner"> | |
<header> | |
<h2><?php rwmb_the_value( 'cta_title' ); ?></h2> | |
<?php rwmb_the_value( 'cta_desc' ); ?> | |
</header> | |
<ul class="actions vertical"> | |
<li><a href="<?php rwmb_the_value( 'cta_button_1_link' ); ?>" class="button fit special"><?php rwmb_the_value( 'cta_button_1_text' ); ?></a></li> | |
<li><a href="<?php rwmb_the_value( 'cta_button_2_link' ); ?>" class="button fit special"><?php rwmb_the_value( 'cta_button_2_text' ); ?></a></li> | |
</ul> | |
</div> | |
</section> | |
</main> | |
</div> | |
<?php get_footer(); ?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Template Name: Homepage Template | |
*/ | |
get_header(); | |
?> | |
<div id="primary" class="content-area"> | |
<main class="site-main" role="main"> | |
<!-- Banner --> | |
<section id="banner"> | |
<div class="inner"> | |
<h2>Spectral</h2> | |
<p>Another fine responsive<br /> | |
site template freebie<br /> | |
crafted by <a href="http://html5up.net">HTML5 UP</a>.</p> | |
<ul class="actions"> | |
<li><a href="#" class="button special">Activate</a></li> | |
</ul> | |
</div> | |
<a href="#one" class="more scrolly">Learn More</a> | |
</section> | |
<!-- One --> | |
<section id="one" class="wrapper style1 special"> | |
<div class="inner"> | |
<header class="major"> | |
<h2>Arcu aliquet vel lobortis ata nisl<br /> | |
eget augue amet aliquet nisl cep donec</h2> | |
<p>Aliquam ut ex ut augue consectetur interdum. Donec amet imperdiet eleifend<br /> | |
fringilla tincidunt. Nullam dui leo Aenean mi ligula, rhoncus ullamcorper.</p> | |
</header> | |
<ul class="icons major"> | |
<li><span class="icon fa-diamond major style1"><span class="label">Lorem</span></span></li> | |
<li><span class="icon fa-heart-o major style2"><span class="label">Ipsum</span></span></li> | |
<li><span class="icon fa-code major style3"><span class="label">Dolor</span></span></li> | |
</ul> | |
</div> | |
</section> | |
<!-- Two --> | |
<section id="two" class="wrapper alt style2"> | |
<section class="spotlight"> | |
<div class="image"><img src="images/pic01.jpg" alt="" /></div><div class="content"> | |
<h2>Magna primis lobortis<br /> | |
sed ullamcorper</h2> | |
<p>Aliquam ut ex ut augue consectetur interdum. Donec hendrerit imperdiet. Mauris eleifend fringilla nullam aenean mi ligula.</p> | |
</div> | |
</section> | |
<section class="spotlight"> | |
<div class="image"><img src="images/pic02.jpg" alt="" /></div><div class="content"> | |
<h2>Tortor dolore feugiat<br /> | |
elementum magna</h2> | |
<p>Aliquam ut ex ut augue consectetur interdum. Donec hendrerit imperdiet. Mauris eleifend fringilla nullam aenean mi ligula.</p> | |
</div> | |
</section> | |
<section class="spotlight"> | |
<div class="image"><img src="images/pic03.jpg" alt="" /></div><div class="content"> | |
<h2>Augue eleifend aliquet<br /> | |
sed condimentum</h2> | |
<p>Aliquam ut ex ut augue consectetur interdum. Donec hendrerit imperdiet. Mauris eleifend fringilla nullam aenean mi ligula.</p> | |
</div> | |
</section> | |
</section> | |
<!-- Three --> | |
<section id="three" class="wrapper style3 special"> | |
<div class="inner"> | |
<header class="major"> | |
<h2>Accumsan mus tortor nunc aliquet</h2> | |
<p>Aliquam ut ex ut augue consectetur interdum. Donec amet imperdiet eleifend<br /> | |
fringilla tincidunt. Nullam dui leo Aenean mi ligula, rhoncus ullamcorper.</p> | |
</header> | |
<ul class="features"> | |
<li class="icon fa-paper-plane-o"> | |
<h3>Arcu accumsan</h3> | |
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p> | |
</li> | |
<li class="icon fa-laptop"> | |
<h3>Ac Augue Eget</h3> | |
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p> | |
</li> | |
<li class="icon fa-code"> | |
<h3>Mus Scelerisque</h3> | |
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p> | |
</li> | |
<li class="icon fa-headphones"> | |
<h3>Mauris Imperdiet</h3> | |
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p> | |
</li> | |
<li class="icon fa-heart-o"> | |
<h3>Aenean Primis</h3> | |
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p> | |
</li> | |
<li class="icon fa-flag-o"> | |
<h3>Tortor Ut</h3> | |
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p> | |
</li> | |
</ul> | |
</div> | |
</section> | |
<!-- CTA --> | |
<section id="cta" class="wrapper style4"> | |
<div class="inner"> | |
<header> | |
<h2>Arcue ut vel commodo</h2> | |
<p>Aliquam ut ex ut augue consectetur interdum endrerit imperdiet amet eleifend fringilla.</p> | |
</header> | |
<ul class="actions vertical"> | |
<li><a href="#" class="button fit special">Activate</a></li> | |
<li><a href="#" class="button fit">Learn More</a></li> | |
</ul> | |
</div> | |
</section> | |
</main> | |
</div> | |
<?php get_footer(); ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment