Skip to content

Instantly share code, notes, and snippets.

@gabelloyd

gabelloyd/front-page.php

Last active December 31, 2015 21:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gabelloyd/8050445 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gabelloyd/8050445 to your computer and use it in GitHub Desktop.
Download ZIP
This is a wordpress installation. Install to wordpress, ideally install Responsive Theme by CyberChimps and create child theme. From there, add these to your child theme. I also have Compass running via CodeKit for Sass support, but edit should be able to be made.
Raw
front-page.php
<?php
// Exit if accessed directly
if ( !defined('ABSPATH')) exit;
/**
* Site Front Page
* About:
* Author: Gabe Lloyd
* File started from Responsive Theme
* reference(s): * http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src
*/
/**
* Globalize Theme Options
*/
$responsive_options = responsive_get_options();
/**
* If front page is set to display the
* blog posts index, include home.php;
* otherwise, display static front page
* content
*/
if ( 'posts' == get_option( 'show_on_front' ) && $responsive_options['front_page'] != 1 ) {
get_template_part( 'home' );
} elseif ( 'page' == get_option( 'show_on_front' ) && $responsive_options['front_page'] != 1 ) {
$template = get_post_meta( get_option( 'page_on_front' ), '_wp_page_template', true );
$template = ( $template == 'default' ) ? 'index.php' : $template;
locate_template( $template, true );
} else {
get_header();
?>
<div class="grid-homepage col-940">
<?php
global $post;
$img = get_post(169);
$src = wp_get_attachment_image_src( get_post_thumbnail_id($img->ID), 'homepage-hero', false );
?>
<div style="background: url(<?php echo $src[0]; ?> ) !important;" class="grid col-460 featured-area-homepage">
<?php
$post_feature = get_post(169);
$title = $post_feature->post_title;?>
<h1 class="homepage-title-text clearfix"><?php echo $title;?></h1>
<br />
<div class="homepage-blurb-text"><?php echo apply_filters( 'the_content', $post_feature -> post_content); ?> </div>
?>
</div>
<?php
global $post;
$img = get_post(177);
$src = wp_get_attachment_image_src( get_post_thumbnail_id($img->ID), 'homepage-hero', true );
?>
<div style="background: url(<?php echo $src[0]; ?> ) !important;" class="grid col-460 custom-area-homepage fit">
<?php
$post_feature = get_post(177);
$title = $post_feature->post_title;?>
<h1 class="homepage-title-text clearfix"><?php echo $title;?></h1>
<br />
<div class="homepage-blurb-text"><?php echo apply_filters( 'the_content', $post_feature -> post_content); ?> </div>
?>
</div>
</div> <!-- ending grid col 940 -->
</div> <!-- end of panel1 -->
<?php
//test for first install no database
$db = get_option( 'responsive_theme_options' );
//test if all options are empty so we can display default text if they are
$empty = ( empty( $responsive_options['home_headline'] ) && empty( $responsive_options['home_subheadline'] ) && empty( $responsive_options['home_content_area'] ) ) ? false : true;
?>
<?php if ( isset( $responsive_options['home_headline'] ) && $db && $empty ) { ?>
<div class="grid col-940">
<div class="grid col-460">
<h1 class="featured-title">
<?php
if ( isset( $responsive_options['home_headline'] ) && $db && $empty )
echo $responsive_options['home_headline'];
else
_e( 'Veloguides', 'responsive' );
?>
</h1>
<h2 class="featured-subtitle">
<?php
if ( isset( $responsive_options['home_subheadline'] ) && $db && $empty )
echo $responsive_options['home_subheadline'];
else
_e( 'Your resource for finding cycling tours.', 'responsive' );
?>
</h2>
<p id="cta-p">
<?php
if ( isset( $responsive_options['home_content_area'] ) && $db && $empty )
echo do_shortcode( $responsive_options['home_content_area'] );
else
_e( 'Whether you\'re traveling to a new place or want some new roads to explore, Veloguides has you covered. With professional guides leading the way, you\'ll have peace of mind and a great adventure.','responsive' );
?>
</p>
<?php if ($responsive_options['cta_button'] == 0): ?>
<div class="call-to-action">
<a href="<?php echo get_bloginfo('url'); ?>/about/" class="blue button">
<?php
if( isset( $responsive_options['cta_text'] ) && $db && $empty )
echo $responsive_options['cta_text'];
else
_e('Find a Tour','responsive');
?>
</a>
</div><!-- end of .call-to-action -->
<?php endif; ?>
?>
</div><!-- end of .col-460 -->
<?php } ?>
<div class="grid col-940">
<?php
$post_why = get_post(96);
$title = $post_why->post_title;
echo apply_filters( 'the_content', $post_why -> post_content);
?>
</div><!-- end of #grid col 940 -->
<?php
get_sidebar('home');
get_footer();
}
?>
Raw
functions.php
// Reference: codex.wordpress.org/Function_Reference/add_image_size
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'sponsor-thumb', 220, 180, true ); //unlimited widthx180h, cropped
add_image_size( 'homepage-thumb', 220, 100 ); //(220wx180h, not cropped)
add_image_size( 'featured-thumb', 480, 200, true ); //(480wx200h, cropped)
add_image_size( 'homepage-hero', 640, 600 ); //(640wx600h, not cropped)
}
Raw
style.css
@import url("../responsive/style.css");
/*
Theme Name: Veloguides Responsive with SASS
Theme URI:
Description: Responsive child theme from Responsive by CyberChimps. Added SASS, FontAwesome support.
Template: responsive
Version: 2.0.0
Author: Gabe Lloyd
Tags: white, black, gray, light, custom-menu, custom-header, custom-background, one-column, two-columns, left-sidebar, right-sidebar, flexible-width, theme-options, threaded-comments, full-width-template, sticky-post, translation-ready, flexible-width, rtl-language-support
*/
/* =Import Styles
-------------------------------------------------------------- */
/* _reset.scss */
/* line 6, ../sass/reset.scss */
html,
body,
ul,
ol {
margin: 0;
padding: 0; }
/* =Start From Here
-------------------------------------------------------------- */
/* Set SCSS
-------------------------------------------------------------- */
/* line 31, ../sass/style.scss */
body {
color: #555555;
font: 100% "Helvetica Neue", Helvetica, Geneva, Arial, sans-serif;
font-smoothing: antialiased;
line-height: 1.5em;
text-rendering: optimizeLegibility;
background: white; }
/* line 40, ../sass/style.scss */
a:hover {
color: #ff0004; }
/* line 44, ../sass/style.scss */
.clearfix {
clear: both; }
/* Let's build a header file.
* On Veloguides, the header file is the same through-out.
* The header has the following order:
* - #masthead
* --------------------------- .top-menu -----------
* -- .logo-wrapper#sitelogo ----- .nav --- .search
* - close the masthead
* Menu items need: ul.menu, li.current_page_item, .menu li, ul.children
* build two submenus, though we may not use them.
* build menus to toggle menus for 480px and below
*/
/* == HEADER
* Make the loadable image on the admin a size we want for the upper nav --*/
/* line 63, ../sass/style.scss */
#masthead {
background: white; }
/* line 67, ../sass/style.scss */
.super-header-area {
background: #333;
border-bottom: 1px solid #ff0004;
height: auto;
width: 100%; }
/* line 74, ../sass/style.scss */
.top-menu {
display: flex;
-webkit-justify-content: flex-end;
-webkit-align-content: center; }
/* line 81, ../sass/style.scss */
.top-menu li a {
color: #FFF;
font-size: 14px; }
/* line 86, ../sass/style.scss */
.top-menu li a:hover {
color: #ff0004; }
/* .header-logo is in the functions file on line 45. It controls the logo. */
/* line 98, ../sass/style.scss */
.home-link {
padding-top: 5px;
padding: 0 20px;
text-decoration: none; }
/* -- We want to push the site-title and description off the screen, but keep it visibile for SEO --*/
/* line 107, ../sass/style.scss */
.site-title, .site-description {
text-indent: -999999px;
padding: 0; }
/* clears are set in parent stylesheet lines 2626 - 2654 */
/* Header */
/* line 117, ../sass/style.scss */
#hcontainer {
margin: 0 auto;
max-width: 960px;
padding: 0px; }
/* line 122, ../sass/style.scss */
#header {
background: white;
box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
width: 100%;
z-index: 100;
padding: 10px; }
/* line 131, ../sass/style.scss */
#logo {
max-width: 170px; }
/* line 139, ../sass/style.scss */
#wrapper.clearfix {
clear: both;
margin: 160px auto 0;
position: relative;
padding: 20px 20px 0; }
/* SEARCH FORM
/ trying to copy from twentythirteen theme and override Responsive theme styles.
/ resource: http://wordpress.org/support/topic/using-the-search-box-in-different-theme?replies=19 */
/* line 152, ../sass/style.scss */
input[type="search"] {
-webkit-appearance: textfield;
padding-right: 2px;
/* Don't cut off the webkit search cancel button */
width: 270px; }
/* line 158, ../sass/style.scss */
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/* line 162, ../sass/style.scss */
.search-form {
position: absolute;
right: -275px;
top: -15px; }
/* line 168, ../sass/style.scss */
.search-field {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 5px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0; }
/* line 184, ../sass/style.scss */
.search-field:focus {
background-color: #fff;
border: 2px solid #eee;
cursor: text;
outline: 0;
width: 230px; }
/* Search widget */
/* line 193, ../sass/style.scss */
.search-form .search-submit {
display: none; }
/* Assistive text */
/* line 198, ../sass/style.scss */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important; }
/* line 203, ../sass/style.scss */
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-weight: bold;
height: auto;
line-height: normal;
padding: 15px 23px 14px;
position: absolute;
left: 5px;
top: 5px;
text-decoration: none;
width: auto;
z-index: 100000;
/* Above WP toolbar */ }
/* line 223, ../sass/style.scss */
.site {
background-color: none; }
/* line 227, ../sass/style.scss */
.hentry {
background-color: none; }
/* MENUS */
/* =Header Menu (Primary)
-------------------------------------------------------------- */
/* line 234, ../sass/style.scss */
.menu-position {
position: relative;
padding-left: 3em;
float: left; }
/* line 241, ../sass/style.scss */
li.menu-item a {
font-size: 16px; }
/* line 245, ../sass/style.scss */
.menu ul {
min-width: 10em; }
/* line 249, ../sass/style.scss */
.main-nav {
clear: none;
/*sits menu items next to logo. Delete to have sit under logo */ }
/* line 253, ../sass/style.scss */
.menu {
clear: none !important;
margin: 0px auto;
margin-top: 0px;
height: auto;
float: right; }
/* line 266, ../sass/style.scss */
.menu,
.menu .current_page_item,
.menu .current_page_item a,
.menu .current-menu-item,
.menu .current-menu-item a {
background-color: #fff; }
/* line 271, ../sass/style.scss */
.menu .current_page_item a:hover,
.menu .current-menu-item a:hover {
background-color: #FFFFFF; }
/* line 275, ../sass/style.scss */
.home .menu .current_page_item a {
background: none !important;
background-color: none !important;
background-image: none;
filter: none; }
/* line 283, ../sass/style.scss */
.menu a {
background-color: #fff;
color: #FF0004;
text-shadow: none;
border: none;
margin: 0;
padding: 0 1em; }
/* line 294, ../sass/style.scss */
.menu .current_page_item a,
.menu .current-menu-item a {
background: white;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, white 0%, #e5e5e5 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #e5e5e5));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, white 0%, #e5e5e5 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, white 0%, #e5e5e5 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, white 0%, #e5e5e5 100%);
/* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
/* IE6-8 */ }
/* line 308, ../sass/style.scss */
.menu a:hover {
background: white;
color: #00B6FF;
-webkit-transition: color 0.2s ease-out;
/* Chrome 1-25, Safari 3.2+ */
-moz-transition: color 0.2s ease-out;
/* Firefox 4-15 */
-o-transition: color 0.2s ease-out;
/* Opera 10.50–12.00 */
transition: color 0.2s ease-out; }
/* line 321, ../sass/style.scss */
.menu ul li a:hover,
.menu li li a:hover {
color: #ff0004;
text-decoration: none; }
/* Panels on homepage */
/* line 331, ../sass/style.scss */
#panel1.clearfix {
position: relative;
min-height: 400px;
margin-left: auto;
margin-right: auto;
background: red;
clear: both; }
/* line 340, ../sass/style.scss */
.grid-homepage {
float: left;
margin-bottom: 0;
padding-top: 0; }
/* line 346, ../sass/style.scss */
.homepage-title-text {
color: white;
font-size: 3.2em;
padding-top: 2em;
margin-bottom: 0; }
/* line 353, ../sass/style.scss */
.homepage-blurb-text p {
color: white;
font-size: 24px;
margin: 0 10px; }
/* line 359, ../sass/style.scss */
.featured-area-homepage {
text-align: center;
height: 480px;
padding: 0px; }
/* line 365, ../sass/style.scss */
.custom-area-homepage {
text-align: center;
height: 470px;
padding: 0px; }
/* line 371, ../sass/style.scss */
#panel2 {
background-color: rgba(255, 255, 255, 0.5); }
/* line 375, ../sass/style.scss */
#aboutwrapper.clearfix {
max-width: 960px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
clear: both;
margin: 0 auto;
padding: 0 20px;
position: relative;
height: auto; }
/* line 388, ../sass/style.scss */
.widget-title-home {
display: -webkit-flex;
-webkit-justify-content: center;
-webkit-align-items: center;
-webkit-flex: 1 0 0; }
/* line 395, ../sass/style.scss */
.video-pad {
padding-top: 4em; }
/* =Social Icons
-------------------------------------------------------------- */
/* line 402, ../sass/style.scss */
#header .social-icons {
list-style: none;
line-height: normal;
margin: 12px 0 0 0;
text-align: right; }
/* line 409, ../sass/style.scss */
#header .twitter-icon, #header .youtube-icon, #header .facebook-icon, #header .linkedin-icon, #header .rss-feed-icon, #header .google-plus-icon, #header .stumble-upon-icon {
display: inline;
height: 24px;
margin: 1px;
padding-left: 3px;
width: 24px; }
/* =Buttons (Sizes)
-------------------------------------------------------------- */
/* line 422, ../sass/style.scss */
.circle {
height: 30px;
width: 40px;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #629a00;
/*matches theme color*/
font-size: 24px;
color: white;
font-weight: bold;
/* [disabled]margin: 5px auto; */
padding-right: 12px;
padding-left: 12px;
padding-bottom: 2px;
margin-right: 5px; }
/* Media Print
-------------------------------------------------------------- */
@media print {
/* line 445, ../sass/style.scss */
h1 {
page-break-before: always; }
/* line 449, ../sass/style.scss */
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid; }
/* line 453, ../sass/style.scss */
ul, ol, dl {
page-break-before: avoid; } }
/**
* 9.0 Print
* ----------------------------------------------------------------------------
*/
/* Retina-specific styles. */
@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
/* line 470, ../sass/style.scss */
.search-field {
background-image: url(images/search-icon-2x.png); }
/* Retina (HiDPI) Display
http://www.quirksmode.org/blog/archives/2013/06/devicepixelrati.html
-------------------------------------------------------------- */
/* =Responsive (Mobile) Design
-------------------------------------------------------------- */ }
@media screen and (-o-min-device-pixel-ratio: 5 / 4) and (max-width: 980px), screen and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 980px), screen and (min-resolution: 120dpi) and (max-width: 980px) {
/* line 493, ../sass/style.scss */
.grid,
.grid-right {
float: none; }
/* line 497, ../sass/style.scss */
#featured-image .fluid-width-video-wrapper {
margin: 20px 0 0 0; }
/* line 501, ../sass/style.scss */
.home #widgets {
margin-top: 40px; }
/* line 506, ../sass/style.scss */
.top-widget,
.home .top-widget {
margin-top: 0 !important; }
/* line 510, ../sass/style.scss */
.hide-980 {
display: none; }
/* line 514, ../sass/style.scss */
.show-980 {
display: block; } }
@media screen and (-o-min-device-pixel-ratio: 5 / 4) and (max-width: 650px), screen and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 650px), screen and (min-resolution: 120dpi) and (max-width: 650px) {
/* line 524, ../sass/style.scss */
#logo {
float: none;
margin: 0;
text-align: center; }
/* line 531, ../sass/style.scss */
.grid,
.grid-right {
float: none; }
/* line 535, ../sass/style.scss */
#featured-image .fluid-width-video-wrapper {
margin: 20px 0 0 0; }
/* line 539, ../sass/style.scss */
.top-widget {
float: none;
margin: 0 auto 10px auto;
position: relative;
text-align: center;
width: auto; }
/* line 547, ../sass/style.scss */
.top-widget .widget-title {
text-align: center; }
/* line 552, ../sass/style.scss */
.js .menu,
.js .sub-header-menu {
display: none; }
/* line 557, ../sass/style.scss */
.top-menu,
.footer-menu li {
float: none;
font-size: 11px;
text-align: center; }
/* line 563, ../sass/style.scss */
.tinynav {
display: block; }
/* line 567, ../sass/style.scss */
.sb-holder {
display: block; }
/* line 571, ../sass/style.scss */
#author-meta {
padding: 20px; }
/* line 575, ../sass/style.scss */
.hide-650 {
display: none; }
/* line 579, ../sass/style.scss */
.show-650 {
display: block; }
/* line 583, ../sass/style.scss */
#footer {
text-align: center; }
/* line 587, ../sass/style.scss */
#footer .social-icons {
padding-bottom: 10px;
text-align: center; } }
@media screen and (-o-min-device-pixel-ratio: 5 / 4) and (max-width: 480px), screen and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 480px), screen and (min-resolution: 120dpi) and (max-width: 480px) {
/* line 597, ../sass/style.scss */
#logo {
float: none;
text-align: center; }
/* line 603, ../sass/style.scss */
.grid,
.grid-right {
float: none; }
/* line 607, ../sass/style.scss */
#featured-image .fluid-width-video-wrapper {
margin: 20px 0 0 0; }
/* line 611, ../sass/style.scss */
.featured-title {
font-size: 40px;
padding: 40px 20px 0 20px; }
/* line 616, ../sass/style.scss */
.featured-subtitle {
font-size: 24px; }
/* line 621, ../sass/style.scss */
.navigation .next,
.navigation .previous {
display: block;
margin: 0 auto;
text-align: center; }
/* line 631, ../sass/style.scss */
.menu ul,
.menu li,
.top-menu,
.footer-menu li,
.sub-header-menu li {
float: none;
text-align: center;
text-rendering: optimizeSpeed; }
/* line 637, ../sass/style.scss */
.hide-480 {
display: none; }
/* line 641, ../sass/style.scss */
.show-480 {
display: block; }
/* line 645, ../sass/style.scss */
#footer {
text-align: center; }
/* line 649, ../sass/style.scss */
#footer .social-icons {
text-align: center; } }
@media screen and (-o-min-device-pixel-ratio: 5 / 4) and (max-width: 320px), screen and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 320px), screen and (min-resolution: 120dpi) and (max-width: 320px) {
/* line 658, ../sass/style.scss */
#featured p {
font-size: 12px;
line-height: 1.5em; }
/* line 663, ../sass/style.scss */
.featured-title {
font-size: 35px; }
/* line 667, ../sass/style.scss */
.featured-subtitle {
font-size: 15px; }
/* line 671, ../sass/style.scss */
.call-to-action a.button {
font-size: 14px;
padding: 7px 17px; }
/* line 676, ../sass/style.scss */
.hide-320 {
display: none; }
/* line 680, ../sass/style.scss */
.show-320 {
display: block; } }
@media screen and (-o-min-device-pixel-ratio: 5 / 4) and (max-width: 240px), screen and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 240px), screen and (min-resolution: 120dpi) and (max-width: 240px) {
/* line 689, ../sass/style.scss */
#featured p {
font-size: 11px;
line-height: 1.5em; }
/* line 694, ../sass/style.scss */
.featured-title {
font-size: 20px; }
/* line 698, ../sass/style.scss */
.featured-subtitle {
font-size: 11px; }
/* line 702, ../sass/style.scss */
.call-to-action a.button {
font-size: 12px;
padding: 5px 15px; }
/* line 711, ../sass/style.scss */
.top-widget area,
.top-widget select,
.top-widget textarea,
.top-widget input[type="text"],
.top-widget input[type="password"] {
width: 75%; }
/* line 716, ../sass/style.scss */
.widget-title,
.widget-title-home h3 {
font-size: 14px;
height: 13px;
line-height: 13px;
text-align: left; }
/* line 723, ../sass/style.scss */
.hide-240 {
display: none; }
/* line 727, ../sass/style.scss */
.show-240 {
display: block; } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment