I am new to Understrap and I would like to add some margin-top to the blog page that displays all the posts. Unlike other blank wordpress theme starters I have used, I don't yet know the structure in order to add margin top to just the posts page. Between content.php single.php and content-single, I am a bit lost. If any one can orient me on this, I would be very thankful.
I found that I had to modify the index.php page.
I also wanted to add a header to my Resent posts page so I modified the index php as such:
<div class="wrapper" id="index-wrapper">
<div class="darkness"></div>
<div class="<?php echo esc_attr( $container ); ?>" id="content" tabindex="-1">
<div class="row">
<!-- Do the left sidebar check and opens the primary div -->
<?php get_template_part( 'global-templates/left-sidebar-check' ); ?>
<main class="site-main" id="main">
<h1 class="mb-3">Recent Posts</h1>
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
The div with the class darkness was to add some extra margin and color to the top of the page to go behind the transparent header. In the end, this is what I needed.
Related
Disclaimer:
My knowledge about coding and website development is basic and self-tought. I do not know what i am doing and will likely not understand your answer.
Situation:
I am developing a website (e-commerce) using WordPress (woocommerce) and am using a theme (Shopkeeper) which I am not willing to abandon given the amount of work put into it already. Nevertheless, I am stuck on a major layout problem with the website's main header.
Shopkeeper theme comes with 5 default main header layouts. None of which achieve what I want. I have selected the layout most closest to what I want (Layout 5).
The header consists of 2 parts:
Logo [Part_1]
Tool icons (whishlist, cart, account and search) [Part_2]
As of right now, [Part_1] and [Part_2] are one monolithic group that I cannot move independently. I want to achieve that Layout 5 goal and have them positioned in separate places.
Failed attempt:
My approach was to dig through the Theme files and find the source code for Layout 5 to change it (given that Shopkeeper Theme does not provide the user with the option to create or modify existing Layouts through the UI). I have found the code below which is contained in the header-centered-menu-under.php file:
Original code corresponding to Layout 5
<?php
$header_width = ( 'full' === Shopkeeper_Opt::getOption( 'header_width', 'custom' ) ) ? 'full-header-width' : 'custom-header-width';
$mobile_class = wp_is_mobile() ? 'is-mobile' : '';
?>
<header id="masthead" class="site-header menu-under <?php echo esc_attr($header_width); ?>" role="banner">
<div class="row">
<div class="site-header-wrapper <?php echo esc_attr($mobile_class); ?>">
<div class="site-branding">
<?php shopkeeper_get_logo(); ?>
</div>
<div class="menu-wrapper <?php echo esc_attr($mobile_class); ?>">
<?php if( !wp_is_mobile() ) { ?>
<?php shopkeeper_get_menu( 'show-for-large main-navigation default-navigation', 'main-navigation', 1 ); ?>
<?php } ?>
<div class="site-tools">
<?php echo shopkeeper_get_header_tool_icons(); ?>
</div>
</div>
</div>
</div>
</header>
I have proceeded to change the code as to have two "independent" Parts. This is what I came up with:
Modified code corresponding to Layout 5 modified
<?php
$header_width = ( 'full' === Shopkeeper_Opt::getOption( 'header_width', 'custom' ) ) ? 'full-header-width' : 'custom-header-width';
$mobile_class = wp_is_mobile() ? 'is-mobile' : '';
?>
<header id="masthead" class="site-header menu-under <?php echo esc_attr($header_width); ?>" role="banner">
<div class="site-header-wrapper <?php echo esc_attr($mobile_class); ?>">
<div class="site-branding">
<?php shopkeeper_get_logo(); ?>
</div>
</div>
</header>
<header id="masthead" class="site-header menu-under <?php echo esc_attr($header_width); ?>" role="banner">
<div class="menu-wrapper <?php echo esc_attr($mobile_class); ?>">
<?php if( !wp_is_mobile() ) { ?>
<?php shopkeeper_get_menu( 'show-for-large main-navigation default-navigation', 'main-navigation', 1 ); ?>
<?php } ?>
<div class="site-tools">
<?php echo shopkeeper_get_header_tool_icons(); ?>
<style>
.site-tools {
position: relative;
margin-top: 1%;
margin-left: 70%;
}
</style>
</div>
</div>
</header>
Problem:
While I seem to have achieved separating [Part_1] from [Part_2] and placed [Part_2] more or less where I wanted, I now have 2 new issues with my Layout 5 modified:
the icons are now stacked (as opposed to their horizontal alignment before the change)
the icons are now preceded by a bullet
What have I done wrong and how can I have the icons aligned horizontally without the bullets ?
I made a custom template for the team I'm working on. I used this code for the template (along with the parts that get the header and footer ofc)
<div class="main-container">
<?php
the_post();
$thumbnail = has_post_thumbnail();
?>
<section class="section-header overlay preserve3d">
<div class="background-image-holder parallax-background">
<?php the_post_thumbnail('full', array('class' => 'background-image')); ?>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="article-body">
<?php
if(!( $thumbnail ))
the_title('<h1>','</h1>');
the_content();
wp_link_pages();
?>
</div><!--end of article snippet-->
</div>
</div>
</div>
</section>
But if there's no featured image, a gray box will appear. I'd rather just have the whole section be hidden if there is no featured image, because it will look much better.
I'm a php rookie so I have no idea how to do this. What I think I need to do: Have an if/else statement check for the featured image. If there is no image, add a class to said section and define 'display none' in my css file for that class.
So this is the code I tried to pair with that, but it did not work:
<?php
// Must be inside a loop.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
$("section:first").addClass("noshow");
}
?>
Is this code incorrect? Where do I need to place this in my document for it to work?
While PHP is executed on the server, jquery is executed on the user end. You could always echo that jquery statement and that way it would be sent to the user.
You could follow the path Martin E. said on his comment (which in my opinion is a much cleaner version) or you could pursue the way you were working on by adding jquery on your header if you haven't and trying something like this:
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo '<script>$("section:first").addClass("noshow");</script>';
}
?>
I'm trying to prepare a blog for microformat, so I need a div to start above the title and close just above the social share buttons (and below meta data, date, author, # of views, etc) - see site for reference: http://www.sara-maria.dk/sundt/laekre-saltede-mandler-med-soedt-tilbehoer/
It is a Wordpress site using CherryFramework with a childtheme and I've tried the following:
adding the opening of the div to title.php and the closing div to footer.php
However, for some reason the div is not using the expected closing div. Instead it is being closed way up higher on the page.
I've created a new functions.php in the childtheme and used the following code:
function my_content($content) {
global $post;
return ''.$content.'';
}
add_filter('the_content', 'my_content');
Problem is that this only wraps it around the post and my PHP skills are not very good, so I haven't been able to customize it to include the title and the meta data.
Anyone who can help me how I best can create the custom div?
Thanks,
Kasper
Update - copying in loop-single.php on request from dojs:
<?php /* Loop Name: Single */ ?>
<div id="loopTEST">
<?php if (have_posts()) : while (have_posts()) : the_post();
// The following determines what the post format is and shows the correct file accordingly
$format = get_post_format();
get_template_part( 'includes/post-formats/'.$format );
if($format == '')
get_template_part( 'includes/post-formats/standard' );
get_template_part( 'includes/post-formats/share-buttons' );
wp_link_pages('before=<div class="pagination">&after=</div>');
?>
</div>
<!---removed author block--->
<?php
get_template_part( 'includes/post-formats/related-posts' );
comments_template('', true);
endwhile; endif;
?>
Update
If you look at the DOM of your site you can clearly see that the title section is found in it's own file.
Take a look at this HTML
<div class="row">
<div class="span12" data-motopress-type="static" data-motopress-static-file="static/static-title.php">
<section class="title-section">
<h1 class="title-header">
Lækre saltede mandler med sødt tilbehør </h1>
<!-- BEGIN BREADCRUMBS-->
...
<!-- END BREADCRUMBS -->
</section><!-- .title-section -->
</div>
</div>
You would think that you have to add a div to "static/static-title.php", but that would most likely destroy the layout.
To be honest, the structure of this theme seems horrible to me (which means that the theme is shit), however if you are hell bent on using it you need to find the file (which would most likely be "single.php" in your themes root directory) that includes "static/static-title.php" and add a div on the line above that.
Okay, well to really see how this builds up your single post pages you might need to go through the included template parts, but try this to start out with.
<div id="loopTEST">
<?php if (have_posts()) : while (have_posts()) : the_post();
$format = get_post_format();
?>
<div> <!-- This should be above the title -->
<?php
get_template_part( 'includes/post-formats/'.$format );
if($format == '')
get_template_part( 'includes/post-formats/standard' );
?>
</div> <!-- This should be below the post but above the social media buttons -->
<?php
get_template_part( 'includes/post-formats/share-buttons' );
wp_link_pages('before=<div class="pagination">&after=</div>');
?>
</div>
i am using wordpress and have come at a point that i have to hide the div if there is no widget displayed in it.
can some one tell me the code for detection of number of widgets displayed in a specific area.
try this
<?php if ( is_active_sidebar( 'your-widget-area' ) ) : ?>
<!--This div will not display if there is no active widgets
so place your div inside if condition-->
<div>
<?php dynamic_sidebar( 'your-widget-area' ); ?>
</div>
<?php endif; ?>
I am styling a wordpress theme / template and I need to add a pre and post div to the content.
It would look something like this:
<div class="my-pre-content-div">This is added before the content</div>
<div id="content">
All Content Here
</div>
<div class="my-post-content-div">This is added after the content</div>
I need to do this globally so what pages do I need to modify please?
Thanks
There are a bunch of php files, most of which will be template files, in this folder:
wp-content/themes/[your theme name]/
It depends on your theme design but as a basic answer to this question you can use wp functions to page.php and single.php for global formating all posts and pages of your theme. you can use code bellow as an example:
<?php get_header(); ?>
<div class="my-pre-content-div">This is added before the content</div>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
.
.
.
.
<?php endwhile; else: ?>
</div>
<div class="my-post-content-div">This is added after the content</div>