ThemeDivs BareBones Theme Contents
File Downloads and Website Selection
Auto scroll to your selected theme file:
STYLE.PHP | FUNCTIONS.PHP | INDEX.PHP | HEADER.PHP | FRONT-PAGE.PHP | HOME.PHP
PAGE.PHP | SINGLE.PHP | PAGE-LANDING.PHP | SINGLE-LANDING.PHP | FOOTER.PHP
Theme File – style.css
/* * Theme Name: Bare Bones Theme Divs Template * Author: Greg Hixon * URI: https://themedivs.com/site-1/ * Author URI: https://hixonic.com * Description: Theme Divs starting content * Version: 1.00 */
/* HTML5 Reset | normalize.css v8.0.1 | MIT License ** github.com/necolas/normalize.css ************************************** CSS */ html{line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;-moz-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;-moz-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}
/* WordPress Adjustments ************************************** CSS */ /* Hide WP Admin Top Bar ******************* CSS */ #wpadminbar{position:absolute;top:0;opacity:0;transition:.2s ease;}#wpadminbar:hover{opacity:1;transition:.2s ease;} /* Undo WP index.html margin ******************* CSS */ html,* html body {margin-top:0!important;}
/* Float Clearing & Box Sizing ************************************** CSS */ .author-box::before, .clearfix::before, .entry::before, .entry-content::before, .footer-widgets::before, .nav-primary::before, .nav-secondary::before, .pagination::before, .site-container::before, .site-footer::before, .site-header::before, .site-inner::before, .widget::before, .wrap::before {content: " "; display: table;} .author-box::after, .clearfix::after, .entry::after, .entry-content::after, .footer-widgets::after, .nav-primary::after, .nav-secondary::after, .pagination::after, .site-container::after, .site-footer::after, .site-header::after, .site-inner::after, .widget::after, .wrap::after {clear: both; content: " "; display: table;} html {box-sizing:border-box;} *,*::before,*::after {box-sizing:inherit;}
/* Default styles ************************************** CSS */ /* * Anything not defined here is displayed in * the browser using browser default CSS styles */ /* Theme Div sections ******************* CSS */ section { padding:40px; color:white; text-align:center; } /* Section partition ******************* CSS */
/* Header Section ************************************** CSS */ /* Section partition ******************* CSS */ /* Front Page Section ************************************** CSS */ /* Section partition ******************* CSS */ /* Page Section ************************************** CSS */ /* Section partition ******************* CSS */ /* Home Section - Blog Page ************************************** CSS */ /* Section partition ******************* CSS */ /* Single Section - Single Blog Post ************************************** CSS */ /* Section partition ******************* CSS */ /* Landing Page Section ************************************** CSS */ /* Section partition ******************* CSS */ /* Footer Section ************************************** CSS */ /* Section partition ******************* CSS */
Auto scroll to your selected theme file:
STYLE.PHP | FUNCTIONS.PHP | INDEX.PHP | HEADER.PHP | FRONT-PAGE.PHP | HOME.PHP
PAGE.PHP | SINGLE.PHP | PAGE-LANDING.PHP | SINGLE-LANDING.PHP | FOOTER.PHP
Theme File – functions.php
<?php // FUNCTIONS.PHP /* * Bare Bones Theme Divs functions and definitions * @package bare-bones-theme-divs * @since bare-bones-theme-divs 1.0 */
// Enqueue (add) styles and scripts function theme_files() { wp_enqueue_style('main_styles',get_stylesheet_uri()); // Invokes styles.css wp_enqueue_style('font-awesome','//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); } add_action('wp_enqueue_scripts','theme_files'); // Add theme_files function
// Information stored in $info used throughout the site - much faster than dBase or global variables function page_info() { $info = array( 'name' => get_bloginfo('name'), 'desc' => get_bloginfo('description'), 'uri' => get_template_directory_uri(), 'url' => site_url(), 'email' => 'greg@hixonic.com', 'phn' => '520-414-4425', 'street' => '110 Moody Circle', 'city' => 'Harker Heights', 'state' => 'TX', 'zip' => '76548', 'yt-url' => 'https://www.youtube.com/@ThemeDivs', 'fb-url' => 'https://facebook.com/greg.p.hixon', 'li-url' => 'https://linkedin.com/in/ghixon', 'last' => 'last element - no comma after' // Modify & use this & insert more above with commas as desired ); return $info; }
// Filter WordPress dashboard side menu order function new_admin_menu_order($menu_order) { // define your new desired menu positions here $new_positions = array( 'index.php' => 0, // Dashboard 'edit.php' => 1, // Posts 'edit.php?post_type=page' => 3, // Pages 'upload.php' => 4, // Media ); function move_element(&$array, $a, $b) { // Move an element inside an array $out = array_splice($array, $a, 1); array_splice($array, $b, 0, $out); } foreach($new_positions as $value => $new_index) { // Go through new positions & move found items in $menu_positions if($current_index = array_search( $value, $menu_order)) { move_element($menu_order, $current_index, $new_index); } } return $menu_order; }; // Activate 'menu_order' filter & hooks into 'menu_order' add_filter('custom_menu_order', function() {return true;}); add_filter('menu_order', 'new_admin_menu_order');
/*** THEME ADJUSTMENTS ***/ // Remove useless code generated by WordPress remove_action('wp_head', 'rsd_link'); remove_action('wp_head', 'wlwmanifest_link'); remove_action('wp_head', 'wp_generator'); remove_action('wp_head', 'start_post_rel_link'); remove_action('wp_head', 'index_rel_link'); remove_action('wp_head', 'adjacent_posts_rel_link'); // Add theme support add_theme_support('title-tag'); // Allows title tag in <head> add_theme_support('post-thumbnails'); // Featured images add_post_type_support('page', 'excerpt'); // Page excerpts // Adds and defines featured image sizes add_image_size('small-entry-image', 360, 240, true); add_image_size('medium-entry-image', 450, 300, true); add_image_size('large-entry-image', 900, 600, true); add_image_size('landing-page-image', 570, 321, true); set_post_thumbnail_size( 180,120);
/*** CPT - CUSTOM POST TYPE *** *******************************/ // Create 'Landing Pages' post type function create_post_type() { register_post_type('landing-pages', // Custom post type options array( 'labels' => array( 'name' => __('Landing Pages'), 'singular_name' => __('Landing Page') ), 'public' => true, 'hierarchical' => true, 'has_archive' => true, 'rewrite' => array('slug' => 'landing-pages'), 'show_in_rest' => true, 'supports' => array('title','editor','thumbnail','revisions','custom-fields','page-attributes'), 'menu_position' => 1 ) ); } // Removes 'landing-pages' slug from URL function remove_cpt_slug($post_link, $post) { if ('landing-pages' === $post->post_type && 'publish' === $post->post_status) { $post_link = str_replace('/' . $post->post_type . '/', '/', $post_link); } return $post_link; } // Adds CPT post name to URL now that CPT post slug removed - URL/page-title/ not URL/landing-pages/page-title/ function add_cpt_post_name($query) { // Return if not the query if (!$query->is_main_query()) { return; } // Return if query doesn't match rewrite rule if (!isset($query->query['page']) || 2 !== count($query->query)) { return; } // Return if not querying based on post name if (empty($query->query['name'])) { return; } // Add CPT to list of post types to include when it queries based on post name $query->set('post_type', array('post', 'page', 'landing-pages')); } add_action( 'init', 'create_post_type'); // Add the create_post_type function add_filter('post_type_link', 'remove_cpt_slug', 10, 2); // Add the remove_cpt_slug function add_action('pre_get_posts', 'add_cpt_post_name'); // Add the add_cpt_post_name function
// Custom styles for WPIDE plugin add_action('admin_head', 'wpide_css'); function wpide_css() { echo "<style> /* Top Bar */.nk-header-wrap {height:0!important;}.nk-header-tools,.wpide-preview-nav {padding:0!important;}/* Remove PRO ad button */li.d-sm-block {display:none!important;}/* Allow Editor to slide over left folder tree */ .wpide-preview-items {min-width:0!important;}/* Tabs in front of Search Bar and redue width */.tabs-content {z-index:9;}.vue-tabs-chrome .tabs-favicon {margin:0!important;}/* Hide and reveal Search Bar */ .wpide-preview-nav {opacity:0!important;height:32px!important;margin-top:-25px!important;}.wpide-preview-nav:hover {opacity:1!important;margin:0!important;}/* Move the bottom down to the bottom */ .wpide-preview-main.bg-alt .wpide-editor[data-v-96f20f7c] {--wpide-editor-scroll-height: calc(100vh - var(--wpide-header-height, 0px) - var(--wpide-adminbar-height, 0px) - var(--wpide-tabs-height, 0px) - var(--wpide-toolbar-height, 0px) + 33px)!important;} .wpide-preview.bg2.d-flex {--wpide-tabs-height: -25px!important;}.wpide-preview-items.border-right {height:100%!important;}/* Move the left Folders icon down and remove label */.nk-header-app-name {margin-top:30px!important;} .nk-header-app-info {display:none;}/* File tabs height */.vue-tabs-chrome {padding-top:0!important;}/* Top right icons */.nk-quick-nav {position:absolute;width:250px;right:-180px;}.nk-quick-nav>li {padding:0!important;width:25px;} /* Top-right + - icons */.vue-tabs-chrome {padding-right:70px!important;} /* Move tabs right */span.tabs-after {margin:7px 10px 0 0!important;}span.slot-after-btn {margin:0!important;font-size:18px!important;} /* Move File Manager Search Bar above path bar in File Manager */.nk-fmg-body-head {top:60px!important;} </style>"; }
Auto scroll to your selected theme file:
STYLE.PHP | FUNCTIONS.PHP | INDEX.PHP | HEADER.PHP | FRONT-PAGE.PHP | HOME.PHP
PAGE.PHP | SINGLE.PHP | PAGE-LANDING.PHP | SINGLE-LANDING.PHP | FOOTER.PHP
Theme File – index.php
Theme Divs Outer Framework – index.php
<!DOCTYPE HTML> <!-- INDEX - DEFAULT PAGE --> <?php // Enter PHP $info = page_info(); // Website info defined in functions.php page_info function get_header(); // Calls the header and places its contents here ?> <!-- Exit PHP --> <!---------------------------------------------------------- THEME DIVS GO HERE --> <?php // Enter PHP get_footer(); // Calls the footer and places its contents here ?> <!-- Exit PHP -->
Theme Div Fillers – index.php
<!-- Index Hero Section ---------------------------------------------------------------- THEME DIV --> <section class="index-hero-section"> <h2>INDEX HERO SECTION</h2> <h1>Index Page Title: <?php echo $info['name']; ?></h1> <h2>Description: <?php echo $info['desc']; ?></h2> <style type="text/css"> .index-hero-section {background:#333;} </style> </section> <!-- Index Hero Section --------------------------------------------------------- CLOSE -->
<!-- Index Additional Section ---------------------------------------------------------------- THEME DIV --> <section class="index-additional-section"> <h2>INDEX ADDITIONAL SECTION</h2> <p>Any type of ThemeDivs section can go here</p> <style type="text/css"> .index-additional-section {background:#676767;} </style> </section> <!-- Index Additional Section --------------------------------------------------------- CLOSE -->
<!-- Index Additional Section ---------------------------------------------------------------- THEME DIV --> <section class="index-additional-2-section"> <h2>INDEX ADDITIONAL SECTION</h2> <p>Any type of ThemeDivs section can go here</p> <style type="text/css"> .index-additional-2-section {background:#555;} </style> </section> <!-- Index Additional Section --------------------------------------------------------- CLOSE -->
Auto scroll to your selected theme file:
STYLE.PHP | FUNCTIONS.PHP | INDEX.PHP | HEADER.PHP | FRONT-PAGE.PHP | HOME.PHP
PAGE.PHP | SINGLE.PHP | PAGE-LANDING.PHP | SINGLE-LANDING.PHP | FOOTER.PHP
Theme File – header.php
Theme Divs Outer Framework – header.php
<!-- HEADER --> <?php // Enter PHP $info = page_info(); // Website info defined in functions.php page_info function ?> <!-- Exit PHP --> <html lang="en-US"> <!-- Element opened in this tag but closed in footer to wrap entire website --> <head> <title><?php echo $info['name']; ?></title> <link rel="icon" type="image/x-icon" href="<?php echo $info['uri'].'/images/favicon.jpg'; ?>" /> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="<?php echo $info['desc']; ?>" /> <meta name="keywords" content="<?php echo $info['name']; ?>" /> <meta property="og:title" content="<?php echo $info['name']; ?>"/> <meta property="og:image" content="<?php echo $info['uri'].'/images/share-thumbnail.jpg'; ?>" /> <meta property="og:description" content="<?php echo $info['desc']; ?>" /> <meta property="og:url" content="https://hixonic.com" /> <meta property="og:image:width" content="900" /> <meta property="og:image:height" content="600" /> <meta property="og:type" content="website" /> <?php wp_head(); // WordPress & plugins use this to insert head elements like scripts, styles, & meta tags ?> </head> <body> <!-- Element opened in this tag but closed in footer to wrap entire body --> <!---------------------------------------------------------- THEME DIVS GO HERE -->
Theme Div Fillers – header.php
<!-- Header Top Section ---------------------------------------------------------------- THEME DIV --> <section class="header-top-section"> <h2>HEADER TOP SECTION</h2> <P>This can be a top bar, place to put your logo, or something else or remove it</P> <style type="text/css"> .header-top-section {background:#000;} </style> </section> <!-- Header Top Section --------------------------------------------------------- CLOSE -->
<!-- Header Menu Section ---------------------------------------------------------------- THEME DIV --> <section class="header-menu-section"> <h2>HEADER MENU SECTION</h2> <p> <a href="<?php echo $info['url']; ?>">HOME</a> | <!-- <a></a> is an in-line HTML element --> <a href="<?php echo $info['url'].'/blog'; ?>">BLOG</a> | <!-- is an HTML entity for non-breaking space --> <a href="<?php echo $info['url'].'/landing'; ?>">LANDING</a> | <a href="<?php echo $info['url'].'/about'; ?>">ABOUT</a> | <a href="#contact">CONTACT</a> </p> <style type="text/css"> .header-menu-section {background:#777;} </style> </section> <!-- Header Menu Section --------------------------------------------------------- CLOSE -->
Auto scroll to your selected theme file:
STYLE.PHP | FUNCTIONS.PHP | INDEX.PHP | HEADER.PHP | FRONT-PAGE.PHP | HOME.PHP
PAGE.PHP | SINGLE.PHP | PAGE-LANDING.PHP | SINGLE-LANDING.PHP | FOOTER.PHP
Theme File – front-page.php
Theme Divs Outer Framework – front-page.php
<!DOCTYPE HTML> <!-- FRONT PAGE --> <?php // Enter PHP $info = page_info(); // Website info defined in functions.php page_info function get_header(); // Calls the header and places its contents here ?> <!-- Exit PHP --> <!---------------------------------------------------------- THEME DIVS GO HERE --> <?php // Enter PHP get_footer(); // Calls the footer and places its contents here ?> <!-- Exit PHP -->
Theme Div Fillers – front-page.php
<!-- Front Page Hero Section ---------------------------------------------------------------- THEME DIV --> <section class="front-page-hero-section"> <h2>FRONT-PAGE HERO SECTION</h2> <h1>Front Page Title: <?php echo $info['name']; ?></h1> <h2>Description: <?php echo $info['desc']; ?></h2> <style type="text/css"> .front-page-hero-section {background:#333;} </style> </section> <!-- Front Page Hero Section --------------------------------------------------------- CLOSE -->
<!-- Front Page Additional Section ---------------------------------------------------------------- THEME DIV --> <section class="front-page-additional-section"> <h2>FRONT-PAGE ADDITIONAL SECTION</h2> <p>Any type of ThemeDivs section can go here</p> <style type="text/css"> .front-page-additional-section {background:#676767;} </style> </section> <!-- Front Page Additional Section --------------------------------------------------------- CLOSE -->
<!-- Front Page Additional Section ---------------------------------------------------------------- THEME DIV --> <section class="front-page-additional-2-section"> <h2>FRONT-PAGE ADDITIONAL SECTION</h2> <p>Any type of ThemeDivs section can go here</p> <style type="text/css"> .front-page-additional-2-section {background:#555;} </style> </section> <!-- Front Page Additional Section --------------------------------------------------------- CLOSE -->
Auto scroll to your selected theme file:
STYLE.PHP | FUNCTIONS.PHP | INDEX.PHP | HEADER.PHP | FRONT-PAGE.PHP | HOME.PHP
PAGE.PHP | SINGLE.PHP | PAGE-LANDING.PHP | SINGLE-LANDING.PHP | FOOTER.PHP
Theme File – home.php
Theme Divs Outer Framework – home.php
<!DOCTYPE HTML> <!-- BLOG LOOP PAGE --> <?php // Enter PHP $info = page_info(); // Website info defined in functions.php page_info function get_header(); // Calls the header and places its contents here ?> <!-- Exit PHP --> <!---------------------------------------------------------- THEME DIVS GO HERE --> <?php // Enter PHP get_footer(); // Calls the footer and places its contents here ?> <!-- Exit PHP -->
Theme Div Fillers – home.php
<!-- Blog Loop Hero Section ---------------------------------------------------------------- THEME DIV --> <section class="blog-loop-hero-section"> <h2>BLOG LOOP HERO SECTION</h2> <h1>Blog Title: <?php echo $info['name'] . 'Blog'; ?></h1> <h2>Description: <?php echo $info['desc']; ?></h2> <style type="text/css"> .blog-loop-hero-section {background:#333;} </style> </section> <!-- Blog Loop Hero Section --------------------------------------------------------- CLOSE -->
<!-- Blog Loop Posts Section ---------------------------------------------------------------- THEME DIV --> <section class="blog-loop-posts-section"> <h2>BLOG LOOP POSTS SECTION</h2> <article class="loop-wrap"> <?php $i=1;$wordCount=20;$topWordCount=27; // # of words in each excerpt while(have_posts()){ the_post(); if ($i==1) { ?><div class="post-row top-post"><?php }else { ?><div class="post-row"><?php } ?> <div class="post-img-col"> <a href="<?php the_permalink(); ?>"> <?php if ($i==1) {the_post_thumbnail('medium-entry-image');}else {the_post_thumbnail('small-entry-image');} ?> </a> </div> <ul class="post-col"> <li> <h2 class="blog-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <!-- Create excerpt from content --> <p><?php if ($i==1) {echo wp_trim_words(get_the_content(),$topWordCount,'...');}else {echo wp_trim_words(get_the_content(),$wordCount,'...');} ?> <a href="<?php echo the_permalink(); ?>">READ MORE</a></p> </li> </ul> </div><?php $i++; } ?> </article> <!-- WordPress paginate_links() function is automatic for blog loop --> <span class="loop-pagination"><?php echo paginate_links(); ?></span> <style type="text/css"> .blog-loop-posts-section {background:#676767;} .loop-wrap { display:flex; flex-wrap:wrap; justify-content:center; max-width:800px; margin:auto; margin:0 auto 20px; } .post-row { position:relative; background:white; width:360px; margin:10px; padding:0; color:black; } .top-post { width:450px; margin:10px auto; padding-bottom:10px; } .post-col { list-style-type:none; margin:0 8px; padding:0; } </style> </section> <!-- Blog Loop Posts Section --------------------------------------------------------- CLOSE -->
<!-- Blog Loop Additional Section ---------------------------------------------------------------- THEME DIV --> <section class="blog-loop-additional-section"> <h2>BLOG LOOP ADDITIONAL SECTION</h2> <p>Any type of ThemeDivs section can go here</p> <style type="text/css"> .blog-loop-additional-section {background:#676767;} </style> </section> <!-- Blog Loop Additional Section --------------------------------------------------------- CLOSE -->
<!-- Blog Loop Additional Section ---------------------------------------------------------------- THEME DIV --> <section class="blog-loop-additional-2-section"> <h2>BLOG LOOP ADDITIONAL SECTION</h2> <p>Any type of ThemeDivs section can go here</p> <style type="text/css"> .blog-loop-additional-2-section {background:#555;} </style> </section> <!-- Blog Loop Additional Section --------------------------------------------------------- CLOSE -->
Auto scroll to your selected theme file:
STYLE.PHP | FUNCTIONS.PHP | INDEX.PHP | HEADER.PHP | FRONT-PAGE.PHP | HOME.PHP
PAGE.PHP | SINGLE.PHP | PAGE-LANDING.PHP | SINGLE-LANDING.PHP | FOOTER.PHP
Theme File – page.php
Theme Divs Outer Framework – page.php
<!DOCTYPE HTML> <!-- PAGE --> <?php // Enter PHP $info = page_info(); // Website info defined in functions.php page_info function get_header(); // Calls the header and places its contents here ?> <!-- Exit PHP --> <!-- Post Container Opening Tags - closing tags at the bottom --> <article class="page-wrap" id="post-<?php the_ID();echo'"';post_class(); ?>"> <!-- Page outer wrap --> <div class="page-content"> <!-- Page containe --> <!---------------------------------------------------------- THEME DIVS GO HERE --> <!-- Page Container closing Tags - opening tags at the top HTML--> </div> <!-- Close page-content --> <style type="text/css"> .page-wrap {background:black;} .page-content { width:900px; padding:40px; margin:auto; } </style> </article> <!-- Close page-wrap --> <?php // Enter PHP get_footer(); // Calls the footer and places its contents here ?> <!-- Exit PHP -->
Theme Div Fillers – page.php
<!-- Page Hero Section ---------------------------------------------------------------- THEME DIV --> <section class="page-hero-section"> <h2>PAGE HERO SECTION</h2> <h1>Post Title: <?php the_title(); ?></h1> <?php the_post_thumbnail('large-post-image'); ?> <style type="text/css"> .page-hero-section {background:#333;} </style> </section> <!-- Page Hero Section --------------------------------------------------------- CLOSE -->
<!-- Single Post Content Section ---------------------------------------------------------------- THEME DIV --> <section class="page-content-section"> <h2>PAGE CONTENT SECTION</h2> <?php the_content(); // Outputs page content ?> <style type="text/css"> .page-content-section {background:#222;} </style> </section> <!-- PAGE Content Section --------------------------------------------------------- CLOSE -->
<!-- Additional Section ---------------------------------------------------------------- THEME DIV --> <section class="page-additional-section"> <h2>PAGE ADDITIONAL SECTION</h2> <p>Any type of ThemeDivs section can go here</p> <style type="text/css"> .page-additional-section {background:#676767;} </style> </section> <!-- Page Additional Section --------------------------------------------------------- CLOSE -->
<!-- Additional Section ---------------------------------------------------------------- THEME DIV --> <section class="page-additional-2-section"> <h2>PAGE ADDITIONAL SECTION</h2> <p>Any type of ThemeDivs section can go here</p> <style type="text/css"> .page-additional-2-section {background:#555;} </style> </section> <!-- Page Additional Section --------------------------------------------------------- CLOSE -->
Auto scroll to your selected theme file:
STYLE.PHP | FUNCTIONS.PHP | INDEX.PHP | HEADER.PHP | FRONT-PAGE.PHP | HOME.PHP
PAGE.PHP | SINGLE.PHP | PAGE-LANDING.PHP | SINGLE-LANDING.PHP | FOOTER.PHP
Theme File – single.php
Theme Divs Outer Framework – single.php
<!DOCTYPE HTML> <!-- SINGLE POST --> <?php // Enter PHP $info = page_info(); // Website info defined in functions.php page_info function get_header(); // Calls the header and places its contents here ?> <!-- Exit PHP --> <!-- Post Container Opening Tags - closing tags at the bottom --> <article class="page-wrap" id="post-<?php the_ID();echo'"';post_class(); ?>"> <!-- Page outer wrap --> <div class="page-content"> <!-- Page containe --> <!---------------------------------------------------------- THEME DIVS GO HERE --> <!-- Page Container closing Tags - opening tags at the top HTML--> </div> <!-- Close page-content --> <style type="text/css"> .page-wrap {background:black;} .page-content { width:900px; padding:40px; margin:auto; } </style> </article> <!-- Close page-wrap --> <?php // Enter PHP get_footer(); // Calls the footer and places its contents here ?> <!-- Exit PHP -->
Theme Div Fillers – single.php
<!-- Single Post Hero Section ---------------------------------------------------------------- THEME DIV --> <section class="single-post-hero-section"> <h2>SINGLE BLOG POST HERO SECTION</h2> <h1>Post Title: <?php the_title(); ?></h1> <?php the_post_thumbnail('large-post-image'); ?> <style type="text/css"> .single-post-hero-section {background:#333;} </style> </section> <!-- Single Post Hero Section --------------------------------------------------------- CLOSE -->
<!-- Single Post Additional Section ---------------------------------------------------------------- THEME DIV --> <section class="single-post-additional-section"> <h2>SINGLE BLOG POST ADDITIONAL SECTION</h2> <p>Any type of ThemeDivs section can go here</p> <style type="text/css"> .single-post-additional-section {background:#676767;} </style> </section> <!-- Single Post Additional Section --------------------------------------------------------- CLOSE -->
<!-- Single Post Content Section ---------------------------------------------------------------- THEME DIV --> <section class="single-post-content-section"> <h2>SINGLE BLOG POST CONTENT SECTION</h2> <?php while(have_posts()) { // while() loop opens post from blog loop the_post(); the_content(); // Outputs post content } // Closes while() loop ?> <style type="text/css"> .single-post-content-section {background:#222;text-align:left;} </style> </section> <!-- Single Post Content Section --------------------------------------------------------- CLOSE -->
<!-- Single Post Additional Section ---------------------------------------------------------------- THEME DIV --> <section class="single-post-additional-2-section"> <h2>SINGLE BLOG POST ADDITIONAL SECTION</h2> <p>Any type of ThemeDivs section can go here</p> <style type="text/css"> .single-post-additional-2-section {background:#444;} </style> </section> <!-- Single Post Additional Section --------------------------------------------------------- CLOSE -->
Auto scroll to your selected theme file:
STYLE.PHP | FUNCTIONS.PHP | INDEX.PHP | HEADER.PHP | FRONT-PAGE.PHP | HOME.PHP
PAGE.PHP | SINGLE.PHP | PAGE-LANDING.PHP | SINGLE-LANDING.PHP | FOOTER.PHP
Theme File – page-landing.php
Theme Divs Outer Framework – page-landing.php
<!DOCTYPE HTML> <!-- LANDING LOOP PAGE --> <?php // Enter PHP $info = page_info(); // Website info defined in functions.php page_info function get_header(); // Calls the header and places its contents here ?> <!-- Exit PHP --> <!---------------------------------------------------------- THEME DIVS GO HERE --> <?php // Enter PHP get_footer(); // Calls the footer and places its contents here ?> <!-- Exit PHP -->
Theme Div Fillers – page-landing.php
<!-- Landing Loop Page Hero Section ---------------------------------------------------------------- THEME DIV --> <section class="landing-loop-page-hero-section"> <h2>LANDING LOOP PAGE HERO SECTION</h2> <h1>Title: <?php echo $info['name'] . ' Loop Page'; ?></h1> <h2>Description: <?php echo $info['desc']; ?></h2> <style type="text/css"> .landing-loop-page-hero-section {background:#333;} </style> </section> <!-- Landing Loop Page Hero Section --------------------------------------------------------- CLOSE -->
<!-- Landing Loop Posts Section ---------------------------------------------------------------- THEME DIV --> <section class="landing-loop-posts-section"> <h2>LANDING LOOP POSTS SECTION</h2> <article class="loop-wrap"> <?php $i=1;$wordCount=20;$topWordCount=27; // # of words in each excerpt // CPT set up manually - blog loop set up in Dashboard $args=array( 'post_type' => 'landing-pages', 'posts_per_page' => 3, 'paged' => $paged, 'order' => 'ASC' ); $query = new WP_Query($args); // Define the $query if ($query->have_posts()) { // Check if posts exist while ($query->have_posts()) { // While posts exist $query->the_post(); // Query the post in the iteration from 1 to 5 as set in $query if ($i==1) { ?><div class="post-row top-post"><?php }else { ?><div class="post-row"><?php } ?> <div class="post-img-col"> <a href="<?php the_permalink(); ?>"> <?php if ($i==1) {the_post_thumbnail('medium-entry-image');}else {the_post_thumbnail('small-entry-image');} ?> </a> </div> <ul class="post-col"> <li> <h2 class="blog-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <!-- Create excerpt from content --> <p><?php if ($i==1) {echo wp_trim_words(get_the_content(),$topWordCount,'...');}else {echo wp_trim_words(get_the_content(),$wordCount,'...');} ?> <a href="<?php echo the_permalink(); ?>">READ MORE</a></p> </li> </ul> </div><?php $i++; } } wp_reset_postdata(); // Restore original Post Data in the loop ?> </article> <?php $total_pages = $query->max_num_pages; if ($total_pages > 1){ $current_page = max(1, get_query_var('paged')); // CPT loop paginate_links() function must be set up manually - blog loop is automatic echo '<span class="loop-pagination">'.paginate_links(array( 'base' => get_pagenum_link(1).'%_%', 'format' => '/page/%#%', 'current' => $current_page, 'total' => $total_pages, 'prev_text' => __('« prev'), 'next_text' => __('next »') )).'</span>'; } ?> <style type="text/css"> .landing-loop-posts-section {background:#676767;} .loop-wrap { display:flex; flex-wrap:wrap; justify-content:center; max-width:800px; margin:0 auto 20px; } .post-row { position:relative; background:white; width:360px; margin:10px; padding:0; color:black; } .top-post { width:450px; margin:10px auto; padding-bottom:10px; } .post-col { list-style-type:none; margin:0 8px; padding:0; } </style> </section> <!-- Landing Loop Posts Section --------------------------------------------------------- CLOSE -->
<!-- Landing Loop Page Additional Section ---------------------------------------------------------------- THEME DIV --> <section class="landing-loop-page-additional-section"> <h2>LANDING LOOP PAGE ADDITIONAL SECTION</h2> <p>Any type of ThemeDivs section can go here</p> <style type="text/css"> .landing-loop-page-additional-section {background:#555;} </style> </section> <!-- Landing Loop Page Additional Section --------------------------------------------------------- CLOSE -->
Auto scroll to your selected theme file:
STYLE.PHP | FUNCTIONS.PHP | INDEX.PHP | HEADER.PHP | FRONT-PAGE.PHP | HOME.PHP
PAGE.PHP | SINGLE.PHP | PAGE-LANDING.PHP | SINGLE-LANDING.PHP | FOOTER.PHP
Theme File – single-landing.php
Theme Divs Outer Framework – single-landing.php
<!DOCTYPE HTML> <!-- SINGLE POST --> <?php // Enter PHP $info = page_info(); // Website info defined in functions.php page_info function get_header(); // Calls the header and places its contents here - only use the <head> & disable the menu section with CSS ?> <!-- Exit PHP --> <!-- Post Container Opening Tags - closing tags at the bottom --> <article class="page-wrap" id="post-<?php the_ID();echo'"';post_class(); ?>"> <!-- Page outer wrap --> <!---------------------------------------------------------- THEME DIVS GO HERE --> </article> <!-- Close page-wrap --> <?php // Enter PHP get_footer(); // Calls the footer and places its contents here ?> <!-- Exit PHP -->
Theme Div Fillers – single-landing.php
<!-- Single Landing Page Hero Section ---------------------------------------------------------------- THEME DIV --> <section class="single-landing-page-hero-section"> <h2>SINGLE LANDING PAGE HERO SECTION</h2> <h1>Post Title: <?php the_title(); ?></h1> <?php the_post_thumbnail('large-post-image'); ?> <style type="text/css"> .single-landing-page-hero-section {background:#333;} </style> </section> <!-- Single Landing Page Hero Section --------------------------------------------------------- CLOSE -->
<!-- Single Landing Page Additional Section ---------------------------------------------------------------- THEME DIV --> <section class="single-landing-page-additional-section"> <h2>SINGLE BLOG POST ADDITIONAL SECTION</h2> <p>Any type of ThemeDivs section can go here</p> <style type="text/css"> .single-landing-page-additional-section {background:#676767;} </style> </section> <!-- Single Landing Page Additional Section --------------------------------------------------------- CLOSE -->
<!-- Single Landing Page Content Section ---------------------------------------------------------------- THEME DIV --> <section class="single-landing-page-content-section"> <h2>SINGLE BLOG POST CONTENT SECTION</h2> <?php while(have_posts()) { // while() loop opens post from blog loop the_post(); the_content(); // Outputs post content } // Closes while() loop ?> <style type="text/css"> .single-landing-page-content-section {background:#222;} </style> </section> <!-- Single Landing Page Content Section --------------------------------------------------------- CLOSE -->
<!-- Single Landing Page Additional Section ---------------------------------------------------------------- THEME DIV --> <section class="single-landing-page-additional-2-section"> <h2>SINGLE BLOG POST ADDITIONAL SECTION</h2> <p>Any type of ThemeDivs section can go here</p> <style type="text/css"> .single-landing-page-additional-2-section { background:#444; text-align:left; } </style> </section> <!-- Single Landing Page Additional Section --------------------------------------------------------- CLOSE -->
Auto scroll to your selected theme file:
STYLE.PHP | FUNCTIONS.PHP | INDEX.PHP | HEADER.PHP | FRONT-PAGE.PHP | HOME.PHP
PAGE.PHP | SINGLE.PHP | PAGE-LANDING.PHP | SINGLE-LANDING.PHP | FOOTER.PHP
Theme File – footer.php
Theme Divs Outer Framework – footer.php
<!-- FOOTER --> <?php // Enter PHP $info = page_info(); // Website info defined in functions.php page_info function ?> <!-- Exit PHP --> <!---------------------------------------------------------- THEME DIVS GO HERE --> </body> <!-- Element closed in this tag but opened in header to wrap entire website --> </html> <!-- Element closed in this tag but opened in header to wrap entire body --> <?php // Enter PHP wp_footer(); // Enables the admin bar at the top when logged in to WordPress ?> <!-- Exit PHP -->
Theme Div Fillers – footer.php
<!-- Footer Top Section ---------------------------------------------------------------- THEME DIV --> <section id="contact" class="footer-top-section"> <h2>FOOTER MENU SECTION</h2> <p> <a href="<?php echo $info['url']; ?>">HOME</a> | <!-- <a></a> is an in-line HTML element joining horizontally --> <a href="<?php echo $info['url'].'/blog'; ?>">BLOG</a> | <!-- is an HTML entity for non-breaking space --> <a href="<?php echo $info['url'].'/about'; ?>">ABOUT</a> | <a href="#contact">CONTACT</a> </p> <style type="text/css"> .footer-top-section {background:#777;} </style> </section> <!-- Footer Top Section --------------------------------------------------------- CLOSE -->
<!-- Footer Address Section ---------------------------------------------------------------- THEME DIV --> <section class="footer-address-section"> <h2>FOOTER ADDRESS SECTION</h2> <p>Title: <?php echo $info['name']; ?></p> <p>Phone: <?php echo $info['phn']; ?></p> <p>Street: <?php echo $info['street']; ?></p> <p><?php echo $info['city'] . ', ' . $info['state'] . ', ' . $info['zip']; ?></p> <style type="text/css"> .footer-address-section {background:#333;} </style> </section> <!-- Footer Address Section --------------------------------------------------------- CLOSE -->
<!-- Footer Additional Section ---------------------------------------------------------------- THEME DIV --> <section class="footer-additional-section"> <h2>FOOTER ADDITIONAL SECTION</h2> <p>Any type of ThemeDivs section can go here</p> <style type="text/css"> .footer-additional-section {background:#222;} </style> </section> <!-- Footer Additional Section --------------------------------------------------------- CLOSE -->
<!-- Below Footer Section ---------------------------------------------------------------- THEME DIV --> <section class="below-footer-section"> <h2>BELOW FOOTER SECTION</h2> <p>Copyright © <script>document.write( new Date().getFullYear() );</script> · <?php if ($info["name"]){echo $info['name'];} else {echo get_bloginfo('name');} ?> · Website By: <a href="mailto:greg@hixonic.com" title="WordPress Website Designer-Developer and SEO Blogger">Greg Hixon</a> of <a href="https://hixonic.com/" class="img-link" title="WordPress Website Designer-Developer and SEO Blogger"><img src="https://hixonic.com/wp-content/themes/hixonic/images/logo-min.png" alt="hixonic,hixonic web services,WordPress Website Designer-Developer and SEO Blogger,greg hixon" width="70" class="hover-grow"></a></p> <style type="text/css"> .below-footer-section { position:relative; background:black; margin-bottom:-16px; padding:10px 20px; text-align:center; color:white; } .below-footer-section p {margin:0;} </style> </section> <!-- Close Below Footer Section --------------------------------------------------------- CLOSE -->