I'm creating a Wordpress template from scratch and I am already in the process of adding sidebars. But I'm having a few problems with the sidebar positioning/placements.
What I want vs What I have
I'm not sure if I'm doing something wrong with the sidebar.php or with the container blocks.
But here's my css code:
/* Sidebar modules for boxing content */
.sdbrcont {
float: left;
background-color: black;
}
My sidebar.php code:
<div class="sdbrcont">
<?php if ( is_active_sidebar( 'left_sdbr' ) ) : ?>
<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'left_sdbr' ); ?>
</div><!-- #primary-sidebar -->
<?php endif; ?>
</div>
and if the problem is on my index.php, here's the code:
<div class="row">
<?php get_sidebar( 'left-sdbr' ); ?>
<div id="contentcont">
<div class="blog-main">
<div class="blogtitle">
<p>PAKU SQUAD
<span class="subheader1">
BLOG
</span>
</p>
<hr>
</div>
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;?>
<nav>
<ul class="pager">
<li> <?php next_posts_link( 'Older Posts >>>' ); ?> </li>
<li> <?php previous_posts_link( '<<< Newer Posts' ); ?></li>
</ul>
</nav>
<?php
endif;
?>
</div> <!-- /.blog-main -->
</div>
</div> <!-- /.row -->
This is my firt time creating a wordpress template and I would really appreciate all the help I can get. Thank you in advance.
You need to pay attention to Layout grid system in bootstrap: http://getbootstrap.com/docs/4.0/layout/overview/
Because you need to determine the width of the container, else will be all the body.
<div class="container">
<div class="row">
<div class="col">
Sidebar
<div>
<div class="col">
Content
<div>
</div>
</div>
Related
Blog Posts with Grid Layout even number columns doesn't display correctly .The problem occurs with 3 column layout also: for each group of 3 posts
<div class="main" role="main">
<div id="content" class="content full">
<div class="container">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post();
$title = get_the_title();?>
<div class="row">
<?php if ( has_post_thumbnail() ) { ?>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="<?php echo esc_url(get_permalink(get_the_ID())) ?><?php
the_post_thumbnail('imic_600x400'); ?></a>
<?php } ?>
<?php if ( has_post_thumbnail() ) { ?><?php } ?>
<h3><a href=" <?php echo esc_url(get_permalink(get_the_ID())); ?>
<?php
echo esc_attr($title); ?>
</a>
</h3>
</div>
<?php endwhile; ?>
<!-- Pagination -->
<?php if(function_exists('imic_pagination')) { imic_pagination(); }
else { next_posts_link( 'Older Entries');
previous_posts_link( 'Newer Entries' ); } ?>
<?php endif;?>
</div>
<?php if(is_active_sidebar($pageSidebar)) { ?>
<!-- Sidebar -->
<div class="sidebar" id="sidebar-col">
<?php dynamic_sidebar($pageSidebar); ?>
</div>
<?php } ?>
</div>
</div>
</div>
Try changing the created HTML structure as follows (in Inspect Element view to verify it works):
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div><!--
--><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div><!--
--><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div>
(note the <!-- --> HTML comments)
If that solves the problem, try adding the HTML comments into your PHP code.
The reason for this behaviour is the resulting new line being interpreted as a "space" and thus the third item won't fit into the same row because of the added horizontal space.
You could also output the HTML-<div class="row">...</div> without line-breaks, eg. by concatenating the markup as one PHP string.
I am trying to get a sidebar to appear correctly in Wordpress framework with some effort here but I am almost their but the sidebar needs to appear to the right of the text of the blog just beside the title to the far right
You can view the page in question here http://kvalixhu.digitalthinkersni.co.uk/blog/
Image for how I want it to display
https://nimbus.everhelper.me/client/notes/share/369625/9zqAVkxFA4iFRBTqA1E5mw20uuWOqgs8/
<?php
/**
* Template Name: BlogPosts
*/
get_header();
?>
<style>
#title_wrapper{
width:488px;
}
h2{
font-size:18px;
font-familly:verdana, arial, sans-serif;
line-height:16px;
display:inline;
padding:2px;
}
#dateinfo{
font-weight:bold;
}
</style>
<div id="main-content" class="main-content">
<?php
if (is_front_page()) {
get_template_part('featured-content');
}
?>
<div class="full-width page-header">
<div class="row">
<div class="column">
<h1>Blog</h1>
</div>
</div>
</div>
<div class="row show-for-medium-up">
<div class="column breadcrumb">
<?php
if (function_exists('yoast_breadcrumb')) {
//echo __('Home',TD) . ' > ';
yoast_breadcrumb('<span id="breadcrumbs">', '</span>');
}
?>
<?php
if (function_exists('bcn_display_list_multidim_children')) {
?><ul class="breadcrumbs">
<?php
bcn_display_list_multidim_children();
?>
</ul><?php
}
?>
</div>
</div>
<div class="row">
<div class="column small-12 product">
<?php
$logo = get_post_meta(get_the_ID(), 'logo', true);
?>
<div class="post-list" style="width:80%;">
<?php
$myposts = get_posts('numberposts=-1&offset=$debut');
foreach ($myposts as $post):
setup_postdata($post);
?>
<div id="dateInfo" style="float:right;">
<?php the_date('Y.m.j'); ?> |
<?php comments_number( '0 hozzászólás', '1 hozzászólás', '% hozzászólás' ); ?>.
</div>
<div id="title_wrapper">
<h2><?php the_title(); ?></h2>
</div>
<div class="thumbnail" style="float: left; margin: 10px">
<?php the_post_thumbnail( array( 395, 195 ) ); ?>
<div class="thumbnail-arrow"></div>
</div>
<!-- Display movie review contents -->
<div class="entry-content"><?php the_content(); ?></div>
<div>
<?php
endforeach;
?>
<div class="column small-6 product " style="float:right;">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Right Sidebar')) : ?>
[ do default stuff if no widgets ]
<?php endif; ?>
</div>
<hr />
</div>
</div> </div>
</div>
<?php
get_footer();
?>
The first thing that you would want to do is move the "sidebar div" outside of the post-list div, and adding "float:left;" to the post-list div.
Also, add a width to the sidebar div with "width: 20%;" to make sure it fits.
The answer is a bit vague but hopefully you understand.
Hopefully this helps
I've been trying for hours trying to get this to work. The Masonry js seems to load but I end up getting a single column of my posts on the right. I am using Ebedly for my posts and they show up ok.
Here's my enqueue code
function enqueue_masonry_script() {
wp_enqueue_script( 'jquery-masonry' ); // adds masonry to the theme
}
add_action( 'wp_enqueue_scripts', 'enqueue_masonry_script' );
my css:
.item { width: 25%; }
and my html for the blog:
<?php get_header(); ?>
<div id="content" class="row">
<div class="responsive-title"><h1 class="hobo page-title a">NEWS</h1> </div>
<div id="masonry-wrapper" class="masonry">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="item">
<article <?php post_class(); ?> role="article">
<header>
<?php the_post_thumbnail( 'wpbs-featured' ); ?>
<div class="page-header"><h1 class="h2"><?php the_title(); ?></h1></div>
</header> <!-- end article header -->
<section class="post_content">
<?php the_content( __("Read more »","wpbootstrap") ); ?>
</section> <!-- end article section -->
<footer>
<p class="tags"><?php the_tags('<span class="tags-title">' . __("Tags","wpbootstrap") . ':</span> ', ' ', ''); ?></p>
</footer> <!-- end article footer -->
</article> <!-- end article -->
</div>
<?php if (function_exists('page_navi')) { // if expirimental feature is active ?>
<?php page_navi(); // use the page navi function ?>
<?php } else { // if it is disabled, display regular wp prev & next links ?>
<nav class="wp-prev-next">
<ul class="pager">
<li class="previous"><?php next_posts_link(_e('« Older Entries', "wpbootstrap")) ?></li>
<li class="next"><?php previous_posts_link(_e('Newer Entries »', "wpbootstrap")) ?></li>
</ul>
</nav>
<?php } ?>
<?php else : ?>
<article id="post-not-found">
<header>
<h1><?php _e("Not Found", "wpbootstrap"); ?></h1>
</header>
<section class="post_content">
<p><?php _e("Sorry, but the requested resource was not found on this site.", "wpbootstrap"); ?></p>
</section>
<footer>
</footer>
</article>
</div>
<?php endif; ?>
<!-- end #main -->
You missed out the itemSelector as suggested in masonry documentation. masonry.desandro.com/options.html
To fix this, you may replace your masonry-wrapper div with codes below:
<div id="masonry-wrapper" class="masonry js-masonry"
data-masonry-options='{ "itemSelector": ".item" }'>
There're also other options available like columnWidth where you might want to try it out. Take some time to read the documentation.
Hi What i'm trying to do is in the page.php file set up a bunch of if statements for each page for example if page == aboutus display the about us content and so on. at the moment no matter what page i'm on it's displaying everything in the page.php file i'm sure its just something with the way i have written it. does anyone know what i'm doing wrong?
heres what i have so far
<?php get_head(); ?>
<?php is_page($page); ?>
<?php is_page('about-us'); ?> {
<div id="container">
<?php get_header(); ?>
<?php get_banner(); ?>
<div class=" center content" role="main">
<div id="posts">
<span class="title">About Us</span>
<div class="msghead">
<?php query_posts('cat=7&showposts=1&orderby=date'); while (have_posts()) : the_post(); the_content();
endwhile;?>
</div>
</div>
<div id="sidebardiv">
<?php get_sidebar(); ?> </div>
<div class="clear"> </div>
</div>
</div>
<?php get_footer(); ?>
</div>
}
<?php is_page('classes'); ?> {
<div id="container">
<?php get_header(); ?>
<?php get_banner(); ?>
<div class=" center content" role="main">
<div id="posts">
<span class="title">Classes</span>
<div class="msghead">
<?php query_posts('cat=7&showposts=1&orderby=date'); while (have_posts()) : the_post(); the_content();
endwhile;?>
</div>
</div>
<div id="sidebardiv">
<?php get_sidebar(); ?> </div>
<div class="clear"> </div>
</div>
</div>
<?php get_footer(); ?>
</div>
}
You are not actually checking the page, you are just running the is_page() function, then displaying the content.
Additionally, when you use The Loop, you should first check that there are posts to display, to avoid errors.
And just as a tip - if the only difference in the pages is the posts that are shown, you can set your arguments before the loop, that way you can cut out quite a lot of your code. Here is a link to a Pastebin with an example of that method, taking the below. Furthermore, if the template is page.php, then the Page that you are viewing is already in the Loop, so you can make use of that to show the Page title. This is untested, but should get you started.
<?php get_head(); ?>
<?php if(is_page('about-us')) : ?>
<div id="container">
<?php get_header(); ?>
<?php get_banner(); ?>
<div class=" center content" role="main">
<div id="posts">
<span class="title">About Us</span>
<div class="msghead">
<?php
query_posts('cat=7&showposts=1&orderby=date');
if(have_posts()) : while (have_posts()) : the_post();
the_content();
endwhile;
endif;
?>
</div>
</div>
<div id="sidebardiv">
<?php get_sidebar(); ?> </div>
<div class="clear"> </div>
</div>
</div>
<?php get_footer(); ?>
</div>
<?php elseif(is_page('classes')) : ?>
<div id="container">
<?php get_header(); ?>
<?php get_banner(); ?>
<div class=" center content" role="main">
<div id="posts">
<span class="title">Classes</span>
<div class="msghead">
<?php
query_posts('cat=7&showposts=1&orderby=date');
if(have_posts()) : while (have_posts()) : the_post();
the_content();
endwhile;
endif;
?>
</div>
</div>
<div id="sidebardiv">
<?php get_sidebar(); ?> </div>
<div class="clear"> </div>
</div>
</div>
<?php get_footer(); ?>
</div>
<?php endif; ?>
An easier approach will be to use is_page('about-us') to check your current page.
Codex: http://codex.wordpress.org/Function_Reference/is_page
You're missing an if statement.
e.g.
<?php if( is_page('about-us') ): ?>
<p>about-us page here</p>
<?php elseif( is_page('classes') ): ?>
<p>classes page here</p>
<?php endif; ?>
A more straightforward way is to create new templates for page-about-us.php and page-classes.php
I was reading Wordpress's coding standards
The only confusing part for me is the vertical spacing between HTML code for instance:
Default Wordpress Theme 3.03:
sidebar.php:
<li id="search" class="widget-container widget_search">
<?php get_search_form(); ?>
</li>
<li id="archives" class="widget-container">
<h3 class="widget-title"><?php _e( 'Archives', 'twentyten' ); ?></h3>
<ul>
<?php wp_get_archives( 'type=monthly' ); ?>
</ul>
</li>
(Here's space between the two <li> tags)
header.php
<div id="masthead">
<div id="branding" role="banner">
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
(Here, there's no space between div tags)
header.php (line 79...):
</div><!-- #branding -->
<div id="access" role="navigation">
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text"><?php _e( 'Skip to content', 'twentyten' ); ?></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
(Here, there's is space between those 3 <div> tags
What's the coding standard of vertical spacing (I don't think it is random)?
Not sure i really follow you, but some examples..
Well formatted HTML
Indentation used, no excessive whitespace
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
Poorly formatted HTML - Example 1
No indentation
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
Example 2
Useless whitespace
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
This isn't really specific to WordPress, any good teacher or tutorial will encourage well formatted coding, and there's little excuse when you're using a good editor(i mean seriously, which do you find most readable and easier to understand?).
More..
Well formatted PHP
Indentation used appropriately
if( something ) {
do_something()
if( some_nested_condition )
do_something_else();
}
Poorly formatted
No indentation, harder to read
if( something ) {
do_something()
if( some_nested_condition )
do_something_else();
}
Formatting your code makes it easier to read, understand, or update/maintain(it's not something that will make a whole lot of sense until you start dealing with code on a regular basis). Then again, i'm not the best at explaining these things, so i'd suggest refering to information already available for the "why".. (i know my reasons)..
Mixed PHP and HTML example
Mock template loop, only for illustration
<div class="wrapper">
<div class="header">
<h1>My Website Heading</h1>
</div>
<div class="content">
<?php if( have_posts() ) : ?>
<div class="wrapsallposts">
<?php while( have_posts() ) : the_post(); ?>
<div class="post">
<h2><?php the_title(); ?></h2>
<div class="postcontent"><?php the_content(); ?></div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
</div>