Is_single not working properly in genesis - wordpress-theming

I am currently creating a child theme for my website which uses genesis as a parent theme.
Now i am making single pages as per my choosing.
So, I am removing the entry header from within html main and posting it after entry-header.
my code looks like this.
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
add_action( 'genesis_after_header', 'gp_page_header');
function gp_page_header(){
$image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail' );
?>
<div class="post-hero" style="background-repeat: no-repeat;background-size:cover;background-image: -webkit-radial-gradient(left top, circle cover, rgba(100, 66, 255, 0.9) 15%, rgba(0, 108, 255, 0.9) 50%, rgba(12, 180, 206, 0.9) 85%), url('<?php echo $image[0]; ?>')">
<div class="wrap">
<?php
the_title( '<h1 class="entry-title" itemprop="headline">', '</h1>' );
genesis_post_info();
?>
</div>
</div>
<?php
}
If didn't want to create this style for homepage and should be only applied to single pages.
Here is what i am doing now.
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
if(is_single()) {
add_action( 'genesis_after_header', 'gp_page_header');
function gp_page_header(){
$image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail' );
?>
<div class="post-hero" style="background-repeat: no-repeat;background-size:cover;background-image: -webkit-radial-gradient(left top, circle cover, rgba(100, 66, 255, 0.9) 15%, rgba(0, 108, 255, 0.9) 50%, rgba(12, 180, 206, 0.9) 85%), url('<?php echo $image[0]; ?>')">
<div class="wrap">
<?php
the_title( '<h1 class="entry-title" itemprop="headline">', '</h1>' );
genesis_post_info();
?>
</div>
</div>
<?php
}
}
But this way it doesn't work. If i use conditional tag, it isn't working.
I am confused at the moment.
Also, I am using front-page.php as template for home.
Any help will be appreciated. Thanks

Looks like you have the conditional tag in the wrong place. Needs to be added after the function like this :
add_action( 'genesis_after_header', 'gp_page_header');
function gp_page_header(){
if ( is_singular( 'post' ) ) {
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
$image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail' );
?>
<div class="post-hero" style="background-repeat: no-repeat;background-size:cover;background-image: -webkit-radial-gradient(left top, circle cover, rgba(100, 66, 255, 0.9) 15%, rgba(0, 108, 255, 0.9) 50%, rgba(12, 180, 206, 0.9) 85%), url('<?php echo $image[0]; ?>')">
<div class="wrap">
<?php
the_title( '<h1 class="entry-title" itemprop="headline">', '</h1>' );
genesis_post_info();
?>
</div>
</div>
<?php
}
}
Based on my testing, your code needs some work.

Related

simple inline css in blade not working properly

so this is the CSS:
.header-inner {
background: url(../images/inner_bg.png), linear-gradient(108deg, #001a30, rgba(0, 0, 0, 0)) no-repeat;
}
i want to inline it to make the background a dynamic value with the blade syntax later on, this is what i did but its not showing the image properly:
<div class="header-inner hi-about-us mb-0" style="background: url({{ asset('test-images/inner_bg.png') }}) linear-gradient(108deg, #001a30, rgba(0, 0, 0, 0)) no-repeat">
The correct code should be like this:
<div class="header-inner hi-about-us mb-0" style="background: url('{{ asset('test-images/inner_bg.png') }}') linear-gradient(108deg, #001a30, rgba(0, 0, 0, 0)) no-repeat">
The URL should be inside single quotes.
You can also try this:
#php
$bgUrl = asset('test-images/inner_bg.png');
#endphp
<div class="header-inner hi-about-us mb-0" style="background: url('{{ $bgUrl }}') linear-gradient(108deg, #001a30, rgba(0, 0, 0, 0)) no-repeat">
You can try this:
style="background: url('{{ asset('test-images/inner_bg.png') }}')

why does wordpress override bootstrap?

I'm trying to put a theme I made with bootstrap into WordPress. I have enqueued all style sheets and my console shows no errors. when I look at my page through WordPress i have a border around everything and my rounded circles with images inside are now square. how do i stop WordPress from changing that?
<?php
function load_stylesheets(){
wp_enqueue_style('bootstrap4', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap-grid.min.css');
wp_enqueue_style('fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');
wp_enqueue_style('magnificpopup', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css');
wp_register_style('custom', get_template_directory_uri() . '/css/bsite.css', array(), 1, 'all');
wp_enqueue_style('custom');
/*wp_register_style('custom', get_template_directory_uri() . '/custom.css', array(), 1, 'all');
wp_enqueue_style('custom');*/
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
function addjs(){
wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.5.1.slim.min.js', array( 'jquery' ),'3.5.1', true );
wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js', array( 'jquery' ),'2.6.0', true );
wp_enqueue_script( 'boot4','https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', array( 'jquery' ),'1.1.0', true );
wp_enqueue_script( 'boot3','https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js', array( 'jquery' ),'4.5.3', true );
}
add_action( 'wp_enqueue_scripts', 'addjs' );
?>
<?php get_header(); ?>
<body>
<nav class="navbar navbar-expand-lg px-3" id="navBar">
sites by bryan
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#myNav"
>
<span class="navbar-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<!-- -->
<div class="collapse navbar-collapse" id="myNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
home
</li>
<li class="nav-item">
skills
</li>
<li class="nav-item">
contact
</li>
</ul>
</div>
</nav>
<!-- end nav element -->
<!-- headder section -->
<header class="header" id="header">
<div class="container-fluid">
<div class="row height-max align-items-center">
<div class="col col-md-9 ml-auto text-right pr-5">
<h1 class="text-uppercase my-2 title">sites by bryan</h1>
<h3 class="text-uppercase">what can i do for you?</h3>
</div>
</div>
</div>
</header>
<!-- end headder section -->
<!-- skills section -->
<section class="skills py-5" id="skills">
<div class="container">
<!-- section title -->
<div class="row mb-5">
<div
class="col d-flex flex-wrap text-uppercase justify-content-center"
>
<h1 class="font-weight-bold align-self-center mx-1">my</h1>
<h1 class="section-title--special mx-1">skills</h1>
</div>
</div>
<!-- end of section title -->
<div class="row">
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<i class="fab fa-html5"></i>
</a>
<h6 class="text-uppercase font-weight-bold my-3">html</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
clean written code and layout that includes comments to ease the
process future updates
</p>
</div>
<!-- end of single skill -->
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<svg
width="1em"
height="1em"
viewBox="-1 0 18 18"
class="bi bi-bootstrap"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12 1H4a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3zM4 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4H4z"
/>
<path
fill-rule="evenodd"
d="M8.537 12H5.062V3.545h3.399c1.587 0 2.543.809 2.543 2.11 0 .884-.65 1.675-1.483 1.816v.1c1.143.117 1.904.931 1.904 2.033 0 1.488-1.084 2.396-2.888 2.396zM6.375 4.658v2.467h1.558c1.16 0 1.764-.428 1.764-1.23 0-.78-.569-1.237-1.541-1.237H6.375zm1.898 6.229H6.375V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377z"
/>
</svg>
</a>
<h6 class="text-uppercase font-weight-bold my-3">bootstrap</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
used for quick production to make scaleable sites that view on any
device
</p>
</div>
<!-- end of single skill -->
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<i class="fab fa-css3-alt"></i>
</a>
<h6 class="text-uppercase font-weight-bold my-3">css</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
written to match the layout of the page from top to bottom in
order with coments to ease the process for future updates
</p>
</div>
<!-- end of single skill -->
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<i class="fab fa-js"></i>
</a>
<h6 class="text-uppercase font-weight-bold my-3">js</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
front-end javascript to bring a site to life and give the viewer a
pleasent and smooth experience
</p>
</div>
<!-- end of single skill -->
</div>
</div>
</section>
<!-- end of skills section -->
<!-- contact section-->
<section class="contact py-5" id="contact">
<div class="container">
<div class="row">
<div class="col-8 mx-auto col-md-6">
<form>
<div class="form-group">
<input
type="email"
class="form-control contact-input p-3"
placeholder="Enter Email"
/>
</div>
<button
type="submit"
class="btn btn-outline-secondary btn-block contact-btn"
>
submit
</button>
</form>
</div>
</div>
</div>
</section>
<!-- end of contact section-->
<?php get_footer(); ?>
#import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
:root {
--mainBlue: #40acf1;
--transparentBlue: rgba(64, 172, 241, 0.7);
--mainWhite: #ffffff;
--mainBlack: #292f36;
--mainGrey: rgb(216, 214, 214);
--mainYellow: #e3b505;
}
body {
font-family: "Roboto", sans-serif;
color: var(--mainBlack);
background: var(--mainWhite);
}
/* navbar */
.navbar {
background: var(--mainGrey);
}
.navbar-icon {
font-size: 2rem;
color: var(--mainBlue);
}
.navbar-toggler {
outline-color: var(--mainBlue) !important;
}
.nav-link {
color: var(--mainBlack);
text-transform: capitalize;
}
.nav-link:hover {
color: var(--mainBlue);
}
/* header */
.header {
clip-path: polygon(50% 0%, 100% 0, 100% 90%, 75% 100%, 25% 100%, 0 90%, 0 0);
color: var(--mainWhite);
overflow: hidden;
}
.height-max {
min-height: calc(100vh - 76px);
background: url(../img/openbridge.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
animation-name: zoom;
animation-duration: 20s;
animation-delay: 5s;
animation-iteration-count: infinite;
}
#keyframes zoom {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2) translate(-5%);
}
100% {
transform: scale(1);
}
}
/* skills section*/
.skills-icon {
font-size: 3rem;
color: var(--mainYellow);
background: var(--mainGrey);
}
.skills-icon:hover {
color: var(--mainYellow);
}
.skills-underline {
width: 4rem;
height: 0.3rem;
background: var(--mainBlue);
margin: 1rem auto;
}
/*contact section*/
.contact {
clip-path: polygon(25% 15%, 75% 15%, 100% 0, 100% 100%, 0 100%, 0 0);
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("../img/trainstation.jpg") center/cover fixed no-repeat;
}
.contact-input {
font-size: 1.5rem;
text-transform: capitalize;
background: transparent;
border-color: var(--mainYellow);
color: var(--mainYellow) !important;
}
.contact-input::placeholder {
color: var(--mainYellow);
}
.contact-input:focus {
background: transparent;
border-color: var(--mainYellow);
}
.contact-btn {
text-transform: uppercase;
color: var(--mainYellow);
border-color: var(--mainYellow);
}
.contact-btn:hover {
background: var(--mainYellow);
color: var(--mainBlack);
}
/* footer icons */
.footer {
background: var(--mainGrey);
}
.footer-icon {
font-size: 1.5rem;
text-decoration: none;
color: var(--mainYellow);
transition: all 1s ease-in-out;
}
.footer-icon:hover {
color: var(--mainBlue);
}
The following should be working, I've jus tested it. I've added a CDN check, a fallback and a the proper required attributes (integrity and crossorigin). You must place that in your function.php file. You can't enqueue file on the front end, like in your example.
Just make sure you update the fallback path.
<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if( ! is_admin() ) {
/**
* Deregister Wordpress jquery core version
* #link https://developer.wordpress.org/reference/functions/wp_deregister_script/
*/
wp_deregister_script( 'jquery' );
/**
* Register then enqueue jquery_js
* #link https://developer.wordpress.org/reference/functions/wp_register_script/
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*
* Check if CDN's url is valid, if not return fallback
* #link https://www.php.net/manual/en/function.fopen.php
*
* Add rel='preload prefetch' <link> and required attributes to jquery_js
* Filters the HTML link tag of an enqueued style & add required attributes
* #link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$test_jquery_js = #fopen( 'https://code.jquery.com/jquery-3.5.1.min.js', 'r' );
if( $test_jquery_js !== false ) {
wp_register_script( 'jquery_js', '//code.jquery.com/jquery-3.5.1.min.js', array(), '3.5.1', false );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_script( 'jquery_js', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/jquery-3.5.1.min.js', array(), '3.5.1', false );
};
wp_enqueue_script( 'jquery_js' );
add_filter( 'script_loader_tag', 'data_jquery_js', 10, 3 );
function data_jquery_js( $tag, $handle, $src ) {
if( $handle === 'jquery_js' ) {
$integrity = 'sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0='; // ... integrity key #link https://code.jquery.com/
$tag = str_replace(
array(
"<script",
"></script>",
),
array(
"<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='script' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<script",
"integrity='" . $integrity . "' crossorigin='anonymous' async></script>",
),
$tag
);
};
return $tag;
};
/**
* Register then enqueue bootstrap_bundle_js
* Dependency to jquery_js
* #link https://developer.wordpress.org/reference/functions/wp_register_script/
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*
* Check if CDN's url is valid, if not return fallback
* #link https://www.php.net/manual/en/function.fopen.php
*
* Add a rel='preload prefetch' <link> element and required attributes to bootstrap_bundle_js
* Filters the HTML link tag of an enqueued style & add required attributes
* #link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$test_bootstrap_bundle_js = #fopen( 'https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js', 'r' );
if( $test_bootstrap_bundle_js !== false ) {
wp_register_script( 'bootstrap_bundle_js', '//cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js', array( 'jquery_js' ), '4.5.3', true );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_script( 'bootstrap_bundle_js', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/bootstrap.bundle.min.js', array( 'jquery_js' ), '4.5.3', true );
};
wp_enqueue_script( 'bootstrap_bundle_js' );
add_filter( 'script_loader_tag', 'data_bootstrap_bundle_js', 10, 3 );
function data_bootstrap_bundle_js( $tag, $handle, $src ) {
if( $handle === 'bootstrap_bundle_js' ) {
$integrity = 'sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx'; // ... integrity key #link https://getbootstrap.com/docs/4.5/getting-started/introduction/
$tag = str_replace(
array(
"<script",
"></script>",
),
array(
"<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='script' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<script",
"integrity='" . $integrity . "' crossorigin='anonymous'></script>",
),
$tag
);
};
return $tag;
};
/**
* Register then enqueue magnific_popup_js
* Dependency to jquery_js
* #link https://developer.wordpress.org/reference/functions/wp_register_script/
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*
* Check if CDN's url is valid, if not return fallback
* #link https://www.php.net/manual/en/function.fopen.php
*/
$test_magnific_popup_js = #fopen( 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', 'r' );
if( $test_magnific_popup_js !== false ) {
wp_register_script( 'magnific_popup_js', '//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', array( 'jquery_js' ), '1.1.0', true );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_script( 'magnific_popup_js', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/jquery.magnific-popup.min.js', array( 'jquery_js' ), '1.1.0', true );
};
wp_enqueue_script( 'magnific_popup_js' );
/**
* Register then enqueue bootstrap_css
* #link https://developer.wordpress.org/reference/functions/wp_register_style/
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*
* Check if CDN's url is valid, if not return fallback
* #link https://www.php.net/manual/en/function.fopen.php
*
* Add a rel='preload prefetch' <link> element and required attributes to bootstrap_css
* Filters the HTML link tag of an enqueued style & add required attributes
* #link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$test_bootstrap_css = #fopen( 'https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css', 'r' );
if( $test_bootstrap_css !== false ) {
wp_register_style( 'bootstrap_css', '//cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css', array(), '4.5.3', 'all' );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_style( 'bootstrap_css', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/bootstrap.min.css', array(), '4.5.3', 'all' );
};
wp_enqueue_style( 'bootstrap_css' );
add_filter( 'style_loader_tag', 'data_bootstrap_css', 10, 3 );
function data_bootstrap_css( $tag, $handle, $src ) {
if( $handle === 'bootstrap_css' ) {
$integrity = 'sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2'; // ... integrity key #link https://getbootstrap.com/docs/4.5/getting-started/introduction/
$tag = str_replace(
array(
"<link rel='stylesheet'",
"media='all' />",
),
array(
"<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='style' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<link rel='stylesheet'",
"integrity='" . $integrity . "' crossorigin='anonymous' type='text/css' media='all' />",
),
$tag
);
};
return $tag;
};
/**
* Register then enqueue fontawesome_css
* #link https://developer.wordpress.org/reference/functions/wp_register_style/
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*
* Check if CDN's url is valid, if not return fallback
* #link https://www.php.net/manual/en/function.fopen.php
*/
$test_fontawesome_css = #fopen( 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css', 'r' );
if( $test_fontawesome_css !== false ) {
wp_register_style( 'fontawesome_css', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css', array(), '5.15.1', 'all' );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_style( 'fontawesome_css', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/all.min.css', array(), '5.15.1', 'all' );
};
wp_enqueue_style( 'fontawesome_css' );
/**
* Register then enqueue magnificpopup_css
* Dependency to bootstrap_css
* #link https://developer.wordpress.org/reference/functions/wp_register_style/
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*
* Check if CDN's url is valid, if not return fallback
* #link https://www.php.net/manual/en/function.fopen.php
*/
$test_magnific_popup_css = #fopen( 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css', 'r' );
if( $test_magnific_popup_css !== false ) {
wp_register_style( 'magnific_popup_css', '//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css', array( 'bootstrap_css' ), '5.15.1', 'all' );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_style( 'magnific_popup_css', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/all.min.css', array( 'bootstrap_css' ), '5.15.1', 'all' );
};
wp_enqueue_style( 'magnificpopup_css' );
/**
* Register then enqueue bsite_css
* Dependency to bootstrap_css, magnificpopup_css
* #link https://developer.wordpress.org/reference/functions/wp_register_style/
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*/
wp_register_style( 'bsite_css', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/all.min.css', array( 'magnificpopup_css' ), '1.0.0', 'all' );
wp_enqueue_style( 'bsite_css' );
};
}; ?>

Trying to get DIVs to overlap correctly. Four quadrants with different, specific formatting and fifth overlaying those with the title graphic

Ok. So, I finally have my basic layout down. It's four quadrants, each with content pushed into the opposite corners. On top of all of this, I want to layout a DIV with the title image on it. The problem is to get the content of the lower quadrants to format correctly, I had to use relative/absolute positioning. This plays havoc with the overlapping DIV, which hides behind these lower quadrants. I've tried putting absolute and relative on the main DIV, moving it in and out of other DIV's and nothing I've tried so far has worked. Maybe I'm coming at this from the wrong angle, but that's where I'm at.
You can see how it looks here:
http://anniversary.cinemasight.com/
Here's the code. This is wordpress based, so some of it may look like gibberish.
This is also contained within a single Container DIV that's not included. Further, I have my CSS in the HTML temporarily. I will move it to my stylesheet as soon as I can get everything worked out. Since this is a "live" installation, the stylesheet was archiving on the web and preventing me from seeing changes as I made them, so this was the only alternative I could get to work.
<div id="Header Image" style="margin-left:-29px;margin-top:75px;"><img src="http://anniversary.cinemasight.com/wp-content/uploads/2017/05/Banner-Test-1.png" /></div>
<div id="Header_Container" style="margin-top:-325px;">
<?php
$cinemasight_header_query = new WP_Query( array(
'category_name' => 'academy-awards',
'posts_per_page' => 3
) );
if ($cinemasight_header_query->have_posts()) :
while($cinemasight_header_query->have_posts()) :
$cinemasight_header_query->the_post();
if( 0 == $cinemasight_header_query->current_post ) :
$thumbnail_id = get_post_thumbnail_id();
$image_src = wp_get_attachment_image_src( $thumbnail_id, $size = 'full' );?>
<div class="Header_Section_Left" style="background-image: url( '<?php echo $image_src[0]; ?>');background-clip: padding-box;background-repeat: no-repeat;background-size: cover;height: 200px;"><span class="Category_Header_Title" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;">ACADEMY AWARDS<br /></span><div class="Header_Upper_Left" >
<div class="Categories_Upper_Left">
<?php echo the_title(); ?>
</div>
<?php continue;
endif;?>
<span class="Categories_Upper_Left">
<?php the_title(); ?><br />
</span>
<?php endwhile;
endif;
wp_reset_postdata();?>
</div>
</div>
<?php
$cinemasight_header_query = new WP_Query( array(
'category_name' => 'reviews',
'posts_per_page' => 3
) );
if ($cinemasight_header_query->have_posts()) :
while($cinemasight_header_query->have_posts()) :
$cinemasight_header_query->the_post();
if( 0 == $cinemasight_header_query->current_post ) :
$thumbnail_id = get_post_thumbnail_id();
$image_src = wp_get_attachment_image_src( $thumbnail_id, $size = 'full' );?>
<div class="Header_Section_Right" style="background-image: url( '<?php echo $image_src[0]; ?>');background-clip: padding-box;background-repeat: no-repeat;background-size: cover;height: 200px;"><span class="Category_Header_Title" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;">REVIEWS<br /></span><div class="Header_Upper_Right">
<div class="Categories_Upper_Right">
<?php echo the_title(); ?>
</div>
<?php continue;
endif;?>
<span class="Categories_Upper_Right">
<?php the_title(); ?><br />
</span>
<?php endwhile;
endif;
wp_reset_postdata();?>
</div>
</div>
<div id="Header_Container">
<?php
$cinemasight_header_query = new WP_Query( array(
'category_name' => 'previews',
'posts_per_page' => 3,
) );
if ($cinemasight_header_query->have_posts()) :
while($cinemasight_header_query->have_posts()) :
$cinemasight_header_query->the_post();
if( 0 == $cinemasight_header_query->current_post ) :
$thumbnail_id = get_post_thumbnail_id();
$image_src = wp_get_attachment_image_src( $thumbnail_id, $size = 'full' );?>
<div class="Header_Section_Left" style="background-image: url( '<?php echo $image_src[0]; ?>');background-clip: padding-box;background-repeat: no-repeat;background-size: cover;height: 200px;position:relative;"><div class="Header_Section_Container" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;bottom:0;left:5px;position:absolute;"><span class="Category_Header_Title" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;">PREVIEWS</span><div class="Header_Lower_Left">
<div class="Categories_Lower_Left">
<?php echo the_title(); ?>
</div>
<?php continue;
endif;?>
<span class="Categories_Lower_Left">
<?php the_title(); ?><br />
</span>
<?php endwhile;
endif;
wp_reset_postdata();?>
</div></div></div>
<?php
$cinemasight_header_query = new WP_Query( array(
'category_name' => 'dvd-report',
'posts_per_page' => 3,
) );
if ($cinemasight_header_query->have_posts()) :
while($cinemasight_header_query->have_posts()) :
$cinemasight_header_query->the_post();
if( 0 == $cinemasight_header_query->current_post ) :
$thumbnail_id = get_post_thumbnail_id();
$image_src = wp_get_attachment_image_src( $thumbnail_id, $size = 'full' );?>
<div class="Header_Section_Right" style="background-image: url( '<?php echo $image_src[0]; ?>');background-clip: padding-box;background-repeat: no-repeat;background-size: cover;height: 200px;position:relative;"><div class="Header_Section_Container" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;position:absolute;bottom:0;right:3px;"><span class="Category_Header_Title" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;">DVD REPORT</span><div class="Header_Lower_Right">
<div class="Categories_Lower_Right">
<?php echo the_title(); ?>
</div>
<?php continue;
endif;?>
<span class="Categories_Lower_Right">
<?php the_title(); ?><br />
</span>
<?php endwhile;
endif;
wp_reset_postdata();?>
</div>
</div>
</div>
You can give your title image a position: relative with a z-index: 1, That should put your title right up front.

Make featured image background image

On my wordpress posts I want to add the post thumbnail at the top of the page to be full width. I want it to cover the full width of the page, and when the page gets bigger the image crops or zooms in.(similar to this https://www.inthefrow.com/2016/10/3-amazing-places-eat-mykonos.html) My code below is a work in process. It works in making the picture a background image, but it is not full width. It will only be the width of the picture. I would appreciate any help. Thanks in advance.
style.php
<?php
get_header();
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">
<?php $featuredImage = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'full' ); ?>
<div class="banner" style="background:url(<?php echo $featuredImage; ?>) no-repeat;"></div>
<?php wpb_set_post_views(get_the_ID()); ?>
<div class="post-info">
<h1 class="post-title"><?php the_title(); ?></h1>
<h2 class="post-date"><?php echo strip_tags(get_the_term_list( $post->ID, 'location', 'Location: ', ', ', ' • ' ));?><?php the_date('F m, Y'); ?></h2>
</div>
<div class="post-content"><?php the_content(); ?></div>
<div id="wrapper-footer"><div class="post-footer"><h1 class="post-footer-comment"><?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'post-footer-comment-count', 'none'); ?></h1><div class="share"><span>share</span> <?php get_template_part( 'share-buttons-post' ); ?></div></div>
<div class="post-footer-bloglovin"><h1>never miss a post</h1><h2>follow by email'</h2></div></div>
<?php get_template_part( 'prevandnextpost' ); ?>
<?php get_template_part( 'related-posts' ); ?>
<?php comments_template(); ?>
</article>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
get_footer();
?>
css
.banner {
max-width: 100%;
width:100%;
height:700px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
background-size: cover;
would do
Please ensure that wordpress is retrieving full width image path.
Post thumbnail should be full sized.
Check the same thorugh inspect element image url 'Open in new tab'.

Issue with height for outside container/content images

Hi I'm modifying a Wordpress theme and I'm having some trouble positioning the outside container images that provide the border for the middle section of content. The problem is that the background images are not extending with the content, instead it stops at the bottom of the browser screen. The site is located here: http://www.richmindonline.com/test
I've never structured background images in this way before, so I apologize for my being naive to this issue.
Here's the CSS id's for the background image structure:
#main {border:1px solid blue; width:900px; display:block; margin:0px auto;}
#container {
width: 600px;
float:left;
border:0px solid red;
}
#content-before {
border:0px solid yellow;
content:"";
position:absolute;
display:block;
top:150px;
left:185px;
bottom:0px;
width:20px;
height:auto;
background:url('/test/wp-content/themes/basic/assets/images/main-boxed-light.png') 0px 0px repeat-y;
}
#content {
width:590px;
border:0px solid green;
}
#primary {
float:right;
overflow: hidden;
width: 250px;
border:1px solid brown;
}
#content-after {
border:0px solid yellow;
content:"";
float:left;
position:absolute;
display:block;
top:150px;
left:1145px;
bottom:0px;
width:20px;
height:auto;
background:url('/test/wp-content/themes/basic/assets/images/main-boxed-light.png') -20px 0px repeat-y;
}
#footer {
clear: both;
width: 100%;
}
Here is my index.php HTML div structure:
<?php get_header(); ?>
<div id="container">
<div id="content-before"></div><!-- #content-before-->
<div id="content">
<?php /* Top post navigation */ ?>
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
<div id="nav-above" class="navigation">
<div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">«</span> Older posts', 'your-theme' )) ?></div>
<div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">»</span>', 'your-theme' )) ?></div>
</div><!-- #nav-above --><?php } ?>
<?php /* The Loop — with comments! */ ?>
<?php while ( have_posts() ) : the_post() ?>
<?php /* Create a div with a unique ID thanks to the_ID() and semantic classes with post_class() */ ?>
<div id="post-<?php the_ID(); ?>"
<?php post_class(); ?>>
<?php /* an h2 title */ ?>
<h2 class="entry-title">
<?php the_title(); ?>
</h2>
<?php /* Microformatted, translatable post meta */ ?>
<div class="entry-meta">
<span class="meta-prep meta-prep-author"><?php _e('By ', 'your-theme'); ?></span>
<span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'your-theme' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
<span class="meta-sep"> | </span>
<span class="meta-prep meta-prep-entry-date">
<?php _e('Published ', 'your-theme'); ?></span>
<span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>
<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>
</div><!-- .entry-meta -->
<?php /* The entry content */ ?>
<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">»</span>', 'your-theme' ) ); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&after=</div>');?> </div><!-- .entry-content -->
<?php /* Microformatted category and tag links along with a comments link */ ?>
<div class="entry-utility">
<span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links">
<?php _e( 'Posted in ', 'your-theme' ); ?></span><?php echo get_the_category_list(', '); ?>
</span>
<span class="meta-sep"> | </span>
<?php the_tags( '<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>
<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'your-theme' ), __( '1 Comment', 'your-theme' ), __( '% Comments', 'your-theme' ) ) ?></span>
<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t\n" ) ?>
</div><!-- #entry-utility -->
</div><!-- #post-<?php the_ID(); ?> --> <?php /* Close up the post div and then end the loop with endwhile */ ?>
<?php endwhile; ?>
<?php /* Bottom post navigation */ ?>
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">«</span> Older posts', 'your-theme' )) ?></div>
<div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">»</span>', 'your-theme' )) ?></div>
</div><!-- #nav-below --><?php } ?>
</div><!-- #content -->
<div id="content-after"></div>
</div><!-- #container -->
<div id="primary" class="widget-area">
</div><!-- #primary .widget-area -->
<?php get_sidebar(); ?>
<div style="clear:both"></div>
<?php get_footer(); ?>
The min-height value of 100% that you are using to try to stretch the outer columns to the full length of the page isn't working because it returns the browser window height.
Perhaps posting the code for your template file so we can easily see your div structure would help in providing a resolution.