Wordpress Content.php file - wordpress-theming

I'm trying to remove the featured image at the top of this blog post wordpress template. The author did a great job, but just left the blog pretty bad. I still need the featured images for thumbnails, however on this page it's a real mess. I'd like the video to sit right under the banner up top. I took out a bunch of stuff and messed it up. I researched about using the class functions, another solution talked about editing the single.php file. After looking through the single.php file, I concluded that everything that i wanted to remove appears to be located in a file called content.php.
so, here's the link: http://beautynetworkeffect.com/ground-zero-hong-kong-fashion-extravaganza-2015-fashion-one/
and here's the code:
<?php
/**
* The default template for displaying content
*
* Used for both single and index/archive/search.
*
* #package WordPress
* #subpackage Javo_Directory
* #since Javo Themes 1.0
*/
global $wp_query;
$javo_author = new WP_User( get_the_author_meta( 'ID' ) ); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> class="row">
<?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
<div class="featured-post">
<?php _e( 'Featured post', 'javo_fr' ); ?>
</div>
<?php endif; ?>
<div class="row">
<div class="col-md-12">
<header class="entry-header text-center">
<?php the_post_thumbnail('full', Array('class' => 'img-responsive')); ?>
<div class="label-ribbon-row {f}">
<div class="label-info-ribbon-row-wrapper">
<div class="label-info-ribbon-row">
<div class="ribbons" id="ribbon-15">
<div class="ribbon-wrap">
<div class="content">
<div class="ribbon">
<span class="ribbon-span">
<?php echo get_the_date( 'M d Y'); ?>
</span>
</div>
</div><!-- /.content -->
</div><!-- /.ribbon-wrap -->
</div><!-- /.ribbons -->
</div><!-- /.label-info-ribbon -->
</div><!-- /.ribbon-wrapper -->
</div><!-- /.label-ribbon -->
</header><!-- .entry-header -->
</div><!-- col-md-4 -->
</div>
<div class="row entry-author-info-wrap">
<div class="col-md-2 col-xs-2 entry-author-image">
<a>
<div class="javo-thb" style="width:80px; height:80px; background-image:url('<?php echo apply_filters( 'javo_load_attach_image', $javo_author->avatar );?>');"></div>
</a>
</div>
<div class="col-md-10 col-xs-10 entry-author-meta-wrap">
<div class="entry-author-name"><?php echo $javo_author->display_name; ?></div>
<div class="entry-author-social">
<div class="entry-author-category">
<i class="fa fa-bookmark-o"></i>
<?php the_category( ', ' ); ?>
</div>
<?php if( comments_open() ) : ?>
<div class="pull-left" style="margin:0 10px;">
<span class="separator">/</span>
</div>
<div class="entry-author-comment">
<i class="fa fa-comments-o"></i>
<?php
comments_popup_link(
__( '0 Comment', 'javo_fr' )
, __( '1 Comment', 'javo_fr' )
, __( '% Comments', 'javo_fr' )
); ?>
</div>
<?php endif; // comments_open() ?>
</div>
</div>
</div><!--row entry-author-info-wrap-->
<div class="row entry-description-wrap">
<div class="col-md-12 entry-description">
<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="single-post-meta row">
<div class="col-md-10 post-meta-infor">
</div> <!-- col-md-10 -->
<div class="col-md-2 text-right post-social">
<span class="javo-sns-wrap social-wrap">
<i class="sns-facebook" data-title="<?php the_title();?>" data-url="<?php the_permalink();?>">
<a class="facebook javo-tooltip" title="<?php _e('Share Facebook', 'javo_fr');?>"></a>
</i>
<i class="sns-twitter" data-title="<?php the_title();?>" data-url="<?php the_permalink();?>">
<a class="twitter javo-tooltip" title="<?php _e('Share Twitter', 'javo_fr');?>"></a>
</i>
</span>
</div> <!-- col-md-2-->
</div> <!-- single-post-meta -->
<?php else : ?>
<h1 class="entry-title">
<?php the_title(); ?>
</h1>
<?php endif; // is_single() ?>
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<?php
if( is_category() )
{
printf('%s', get_permalink(), javo_str_cut( get_the_excerpt(), 300));
}else{
the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'javo_fr' ) );
} ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'javo_fr' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>
</div><!-- 12 Columns Close -->
</div><!-- Row Close -->
<footer class="entry-meta">
<div class="inner-footer">
<div class="inner-footer-more">
<a href="<?php the_permalink(); ?>">
<?php _e( "more", 'javo_fr' ); ?>
</a>
</div>
<?php //javo_drt_entry_meta(); ?>
<?php edit_post_link( "<i class=\"fa fa-cog\"></i>" . __( 'Edit', 'javo_fr' ), '<span class="edit-link">', '</span>' ); ?>
<?php if ( is_singular() && get_the_author_meta( 'description' ) && is_multi_author() ) : // If a user has filled out their description and this is a multi-author blog, show a bio on their entries. ?>
<div class="author-info">
<div class="author-avatar">
<?php
/** This filter is documented in author.php */
$author_bio_avatar_size = apply_filters( 'javo_drt_author_bio_avatar_size', 68 );
echo get_avatar( get_the_author_meta( 'user_email' ), $author_bio_avatar_size );
?>
</div><!-- .author-avatar -->
<div class="author-description">
<h2><?php printf( __( 'About %s', 'javo_fr' ), get_the_author() ); ?></h2>
<p><?php the_author_meta( 'description' ); ?></p>
<div class="author-link">
<a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
<?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'javo_fr' ), get_the_author() ); ?>
</a>
</div><!-- .author-link -->
</div><!-- .author-description -->
</div><!-- .author-info -->
<?php endif; ?>
</div>
</footer><!-- .entry-meta -->
</article><!-- #post -->

To only remove the featured image you have to remove or comment the "the_post_thumbnail" line:
<?php // the_post_thumbnail('full', Array('class' => 'img-responsive')); ?>
To remove the featured image and the date ribbon remove all those lines:
<div class="row">
<div class="col-md-12">
<header class="entry-header text-center">
<?php the_post_thumbnail('full', Array('class' => 'img-responsive')); ?>
<div class="label-ribbon-row {f}">
<div class="label-info-ribbon-row-wrapper">
<div class="label-info-ribbon-row">
<div class="ribbons" id="ribbon-15">
<div class="ribbon-wrap">
<div class="content">
<div class="ribbon">
<span class="ribbon-span">
<?php echo get_the_date( 'M d Y'); ?>
</span>
</div>
</div><!-- /.content -->
</div><!-- /.ribbon-wrap -->
</div><!-- /.ribbons -->
</div><!-- /.label-info-ribbon -->
</div><!-- /.ribbon-wrapper -->
</div><!-- /.label-ribbon -->
</header><!-- .entry-header -->
</div><!-- col-md-4 -->
</div>
Remember that all changes will be overwritten when you update the theme to a new version. A good option to avoid this is to create a Child Theme, the recommended way of modifying an existing theme. More information can be found at: https://codex.wordpress.org/Child_Themes
Test it and let me know if you have any problem.
Regards.

I am gonna add something here since it can be helpful for those who are willing to learn about Wordpress file Content.php.
This file is how wordpress generates post content on wordpress.
It can easily be understood by this code
if ( is_single() ) {
the_title( '<h1 class="entry-title">', '</h1>' );
} elseif ( is_front_page() && is_home() ) {
the_title( '<h3 class="123123">', '</h3>' );
} else {
the_title( '<h2 class="entry-title">', '</h2>' );
}
?>
It shows different content on the base of the page that is being requested.

Related

Moving element over image?

The title of my featured article is positioned via css, but the results are not showing up properly in every screen.
I tried to place "mvp-feat2-main-text" element before "mvp-feat2-main left relative".
Problem: Text is shown behind the image. I need the text to show on top of the image.
Here is the relevant code:
<section id="mvp-feat2-wrap" class="left relative">
<?php global $do_not_duplicate; global $post; $recent = new WP_Query(array( 'tag' => get_option('mvp_feat_posts_tags'), 'posts_per_page' => '1' )); while($recent->have_posts()) : $recent->the_post(); $do_not_duplicate[] = $post->ID; ?>
<div class="mvp-feat2-main left relative">
<a href="<?php the_permalink(); ?>" rel="bookmark">
<div class="mvp-feat2-main-img left relative">
<?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { ?>
<?php the_post_thumbnail('mvp-post-thumb', array( 'class' => 'mvp-reg-img' )); ?>
<?php the_post_thumbnail('mvp-mid-thumb', array( 'class' => 'mvp-mob-img' )); ?>
<?php } ?>
<?php if ( has_post_format( 'video' )) { ?>
<div class="mvp-feat-vid-but">
<i class="fa fa-play fa-3"></i>
</div><!--mvpfeat-vid-but-->
<?php } else if ( has_post_format( 'gallery' )) { ?>
<div class="mvp-feat-gal-but">
<i class="fa fa-camera fa-3"></i>
</div><!--mvpfeat-gal-but-->
<?php } ?>
</div><!--mvp-feat2-main-img-->
<div class="mvp-feat2-main-text">
<h3 class="mvp-feat2-main-cat left"><span class="mvp-feat2-main-cat left"><?php $category = get_the_category(); echo esc_html( $category[0]->cat_name ); ?></span></h3>
<div class="mvp-feat2-main-title left relative">
<?php if(get_post_meta($post->ID, "mvp_featured_headline", true)): ?>
<h2><?php echo esc_html(get_post_meta($post->ID, "mvp_featured_headline", true)); ?></h2>
<?php else: ?>
<h2 class="mvp-stand-title"><?php the_title(); ?></h2>
<?php endif; ?>
</div><!--mvp-feat2-main-title-->
<div class="mvp-feat1-info">
<span class="mvp-blog-author"><?php esc_html_e( 'By', 'click-mag' ); ?> <?php the_author(); ?></span><span class="mvp-blog-date"><i class="fa fa-clock-o"></i><span class="mvp-blog-time"><?php the_time(get_option('date_format')); ?></span></span>
</div><!--mvp-feat1-info-->
</div><!--mvp-feat2-main-text-->
</a>
</div><!--mvp-feat2-main-->
Try to use
style="z-index:value">
on your html at then end where you want to have your element appear ontop of the image
Example:
<div class="mvp-feat2-main-text" style="z-index:99;">
the z-index value must larger then the z-index of the image so try to increase that value until it appears ontop.

What are these circles that keep appearing in online inspector?

Every time I inspect my code, there is a circle that appears. Does anyone know what this is?
Edit 1:
Thank you to Sam I now know that they are text nodes. I am having a little trouble identifying where they are in my code. If anyone can spot them and point them out to me it would be much appreciated.
<?php get_template_part( 'parts/shared/header' ); ?>
<?php
if(have_posts()) : ?>
<div id="main-content">
<div id="inside">
<div class="content">
<div class="container">
<div class="padding_30">
<h1 class="page_header_blog">Blog</h1><br>
<div class="blog_wrapper">
<?php while(have_posts()) : the_post(); ?>
<div class='post'>
<div class='thumbnail'>
<?php the_post_thumbnail(); ?>
<?php echo get_avatar( get_the_author_meta( 'ID' ) , 32 ); ?>
</div>
<h2 class='each_blog_info' id='post-<?php the_ID(); ?>'></h2>
<div class='blog_info'>
<small><i class='fa fa-calendar-o' aria-hidden='true'></i>
<?php the_time('F jS, Y') ?> ❘
<i class='fa fa-user' aria-hidden='true'></i>
<?php the_author() ?> ❘
<?php the_category( ', ' ); ?>
</small>
</div>
<h2 class='blog_title_link'><a href='<?php the_permalink() ?>' rel='bookmark' title='Permanent Link to <?php the_title_attribute(); ?>'>
<?php the_title(); ?></a></h2>
<div class='excerpt'>
<?php the_excerpt(); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif;?>
<div class="text-center"><?php
the_posts_pagination( array(
'prev_text' => __( 'Previous page', 'spafix' ),
'next_text' => __( 'Next page', 'spafix' ),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'spafix' ) . ' </span>',
) );
?></div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php get_template_part( 'parts/shared/footer' ); ?>
This is the code from my index.php page where the text nodes are apprearing in inspector. They appear after the loop with the div class of 'post'.
This is "text nodes", they are generated by not accurate PHP and contain " ".
These are due to white spaces... Generally when two or more nodes which inline-block property comes together

Logo Image float on a Image Slider Wordpress Theme CSS

DISCLAIMER : I did not code the theme. This was made by another developer who left the project and I am making adjustments based on the new requirements. I don't have experience in Wordpress Theming but I can understand codes.
I am making a design in a website and I want to make my logo to be like floating above the Slider layer. I am working on a wordpress theme:
As you can see the Logo 'Red Dela Cruz' is on the top occupying a separate space or div. I want it inside the slider and floating on it like a layer, whenever the slide changes image, logo should still be there. Here is my code:
<div class="slider">
<img src="<?php echo $template_path; ?>images/redlogo_website.png" alt="" class="web-logo"/>
<div id="one-by-one-slider" class="one-by-one-slider">
<ul class="one-by-one-slider-large">
<?php
$args = array(
'post_type' => 'rdc_home',
);
query_posts( $args );
// The Loop
if ( have_posts() ) :
while (have_posts()) :
//the post for declaration
the_post();
?>
<li>
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') ); ?>" alt="<?php the_title(); ?>"/>
<div class="slider-content text-center">
<div class="slider-heading shp-12 slides" data-animation="bounceInDown" data-duration=4 data-delay=1>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1><?php the_title(); ?></h1>
</div>
</div>
</div>
</div>
<div class="slider-heading shp-13 slides" data-animation="bounceInDown" data-duration=6 data-delay=2>
<div class=" container">
<div class="row">
<div class="col-md-12">
<h3><?php the_content(); ?></h3>
</div>
</div>
</div>
</div>
<!-- <div class="slider-heading shp-14 slides" data-animation="bounceInUp" data-duration=8 data-delay=4>
<div class=" container">
<div class="row">
<div class="col-md-12">
For Bookings
</div>
</div>
</div>
</div> -->
</div>
</li>
<?php
endwhile;
endif;
wp_reset_query();
?>
</ul>
<div class="one-by-one-slider-nav">
<ul class="one-by-one-slider-thumbs">
<li class="one-by-one-slider-element"></li>
<?php
$args = array(
'post_type' => 'rdc_home',
);
query_posts( $args );
// The Loop
if ( have_posts() ) :
while (have_posts()) :
//the post for declaration
the_post();
?>
<li></li>
<?php
endwhile;
endif;
wp_reset_query();
?>
</ul>
</div><!-- one-by-one-slider-nav -->
</div><!-- one-by-one-slider -->
</div><!-- slider -->
The logo is on the 2nd line and I haven't done any css on class
web-logo
This should work:
.web-logo {
position:absolute;
}
If the logo goes "behind" the slider, you should add a z-index, and make it higher, untill the image is showing:
.web-logo {
position:absolute;
z-index:2;
}
you can try this one:
.web-logo {
position: absolute;
right: 10px;
top: 10px;
z-index:2;
}

Wordpress Featured Image Link

I have 9 posts showing up on a page. I'm only showing the featured images from the post and the images are set to a background image. I want to be able to click the images and have the image show up in a new window. I'm having a little trouble figuring this out. I want to wrap the div in an link.
This is the code I have:
<article <?php post_class('col-md-4 site-content'); ?>>
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id(
$post->ID ), 'large' );
$image = $image[0]; ?>
<?php endif; ?>
<div class="coupons-post" style="background-image: url('<?php echo
$image; ?>')">
<?php /*?><div class="entry-thumbnail">
<a href="<?php the_permalink(); ?>"><?php
the_post_thumbnail('large' , array( 'class' => 'img-responsive') ); ?></a>
</div><?php */?>
<!-- <div class="post-content">
<div class="entry-meta">
<p class="date">News / <?php the_time('n.j.Y') ?></p>
</div>
<h2 class="entry-title">
<?php the_title(); ?>
</h2>
<div class="entry-summary">
<p></p><p><?php $excerpt = get_the_excerpt(); ?>
<?php echo substr($excerpt, 0, 100); ?>...</p>
<p></p>
<a class="read-more" href="<?php the_permalink(); ?>">Read More</a>
</div>
</div>-->
</div>
</article>
I want to wrap the div "coupons-post" with the link.
Like this?
<article <?php post_class('col-md-4 site-content'); ?>>
<?php
if (has_post_thumbnail( $post->ID ) ) {
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
$image = $image[0];
}
?>
<a href="<?= $image; ?>" target="_blank">
<div class="coupons-post" style="background-image: url('<?php echo $image; ?>')">
</div>
</a>
</article>

Div tag being prematurely closed

I'm working on a new webpage for my blog # http://bornsquishy.ca
I'm also trying to use a grid system by http://gridiculo.us/
The problem that I'm having is the div class "grid" is being closed off at the end of the header without a closing div tag, and I can't seem to figure out why this is happening.
Here is the code from the header.php after the closing head tag:
<body <?php body_class(); ?>>
<div id="main"><!-- this encompasses the entire Web site -->
<header id="header">
<div class="grid">
<div class="row">
<div class="c3">
<div class="logo">
<?php if(of_get_option('logo_type') == 'text_logo'){?>
<?php if( is_front_page() || is_home() || is_404() ) { ?>
<h1><?php bloginfo('name'); ?></h1>
<?php } else { ?>
<h2><?php bloginfo('name'); ?></h2>
<?php } ?>
<?php } else { ?>
<?php if(of_get_option('logo_url') != ''){ ?>
<img src="<?php echo of_get_option('logo_url', "" ); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('description'); ?>">
<?php } else { ?>
<img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('description'); ?>">
<?php } ?>
<?php } ?>
</div><!-- .logo -->
</div><!-- .c3 -->
<div class="c8">
<nav class="primary">
<div class="menu-holder">
<div class="menu-left">
<div class="menu-right">
<?php wp_nav_menu( array(
'container' => 'ul',
'menu_class' => 'sf-menu',
'menu_id' => 'topnav',
'depth' => 0,
'theme_location' => 'header_menu'
));
?>
</div><!--.menu-right-->
</div><!--.menu-left-->
</div><!--.menu-holder-->
</nav><!--.primary-->
</div><!--.c8-->
<div class="c1 end">
<div id="rss-feed">
<img src="/images/rss-logo.png">
</div><!--.rss-feed-->
</div><!-- .c1 end-->
</div><!-- .row -->
<div class="row">
<div class="c8">
<div class="title">
<img src="/images/title.png">
</div><!--.title-->
</div><!--.c8-->
<div class="c4 end">
<div id="widget-header">
<?php if ( ! dynamic_sidebar( 'Header' ) ) : ?>
<!-- Widgetized Header -->
<?php endif ?>
</div><!--#widget-header-->
</div><!-- .c4 end -->
</div><!-- .row -->
<!--.grid left open-->
</header>
<!--#main left open-->
Let me know if more code/info is needed to answer this question.
Your comments say <!--.grid left open-->, does this mean you want to close the div.grid element after the closing </header>? If so, you can't do that because the div was opened inside the header, so it must be closed before the header is closed. HTML elements can't "overlap" each other.
If you're using Chrome developer tools or similar to inspect the markup, the browser will have seen the error and "fixed" your HTML structure in order to display it.
You either need to put the opening div before or after the header, or close the div before the end of the header.