Is it possible to have a two column layout in wordpress? I've been trying to build it with css using float:left; but I can't seem to get it to work inside the loop :(
Has anyone done this before?
This should help, listing the posts in this order -
1 2
3 4
5 6
However, if you want as below, then some tweaking will be required -
1 4
2 5
3 6
Here is the PHP -
<?php
$i = 0;
if(have_posts()) : while(have_posts()) : the_post();
?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- Enter whatever code you want for your display here -->
</div>
<?php $i++ ?>
<?php if($i % 2 === 0) : ?>
<div class="clear"></div>
<?php endif; ?>
<?php
endwhile;
endif;
?>
And some basic CSS (change as required if the selector .post is too generic) -
.post{
float: left;
max-width: 50%;
padding: 10px;
}
.clear{
clear: both;
}
Related
I'm trying to create a template based on the theme settings which call on the main-content class.
My template.php file is:
`<?php /** * Template Name: Post Half Width Column
* Template Post Type: post
*/ ?>
<?php
wp_enqueue_style( 'main-template', get_template_directory_uri() . '/css/half-width.css' );
get_header();
?>
<?php
get_header(); ?>
<div id="main-content" class="post-main-content">
<?php
while ( have_posts() ) : the_post();
get_template_part( 'content', 'page' );
endwhile;
?>
</div><!-- #main-content -->
<?php
get_footer();
?>`
The original theme template specified class="main-content" instead of class="post-main-content"
I could not find where the .main-content was in .css checking the standard places so I thought I could just create my own .css in the child theme that includes:
`#post-main-content {
padding: 28px 28px 10px;
width: 50%;
margin: 0 auto;
float: none;
}`
And then copy the rest from the themes style.css
What am I doing wrong here?
When you open www.nomadicmatt.com on mobile devices the first image you see is his big bold background image. I am trying to replicate the same thing on my site www.rosstheexplorer.com. The header image looks too small on mobile devices hence why I am exploring having a background image.
To achieve this I was told the following
You must change your markup. Change your
<img class="custom-header">
to
<div class="custom-header">
and set container background property:
.custom-header {
background: url(path_to_image) no-repeat;
background-size: cover;
}
I was also told, you can set style on div like this
<div style="background: url(<?php header_image(); ?>); background-size: cover;">
I tried inserting the following code into additional CSS
<div style="background: url(<?php header_image(); ?>); background-size: cover;"> </div> And
.custom-header { background: url("rosstheexplorer.com/cover-photo-1/") no-repeat; background-size: cover; }
I got the error message
Markup is not allowed in CSS.
I tried each line individually and there was an issue with both lines
Where do you alter the markup? Or is there another solution?
I have now been told I may have to make the changes in the index.php file, this is the code for my index.php file
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'content', get_post_format() );
?>
<?php endwhile; ?>
<?php penscratch_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
If I understand correctly you have tried putting html code in css file. That is you inserted
<div style="background: url(<?php header_image(); ?>); background-size: cover;"> </div>
in your css file. This is not going to work. You need to change the markup in html file that might be generated using php so you actually might need to put this markup in index.php or something.
Your have given padding and margin that is creating issue. Please look into attached image
I am trying to build a website for a friend, I am building it using Drupal 7.
I have a CSS problem that is driving me crazy. The secondary menu, which I float to the right isn't next to my content. Instead it appears to the right below my content.
I feel like I have tried everything. I have the first menu floating left, secondary floating right, and the content on margin auto left and right.
I also tried clear both on the underlying container but it didn't help either.
I am experiencing this error in both Firefox and Chrome.
The only solution i could find online that i haven't tried yet, is to float right before floating left, because I'd have to tinker with Drupal core.
I actually had the problem before, and rebuild the whole damn website, and it happened again while trying to center my components.
I have changed too much since to press 'undo', so it would be awesome if someone with a lot of CSS knowledge could explain me why this occurs.
If you want to see the problem, its on this page www.mohaaleague.com, in the right bottom, but it should be as high as the left menu....
.two-sidebars #content /*the middle element*/
{
width: 827px;
margin-left:auto;
margin-right:auto;
}
#sidebar-second /*the right sidebar*/
{
width: 287px;
float:right;
}
#sidebar-first /*the left sidebar*/
{
float:left;
width: 287px;
}
#main /*the underlying div that holds all the others*/
{
width: 1650px;
margin-left: auto;
margin-right: auto;
position: relative;
clear: both;
}
btw I started from BARTIK theme.
Okay, so I managed to solve it by changing page.tpl.php,a ctually it was something I adressed in my question.
The problem was that float right was being called, before the float left. So I changed the order in which Drupal renders the page. By making Drupal render my second-sidebar first, and then my first-sidebar, and then the content i solved the problem.
I changed page.tpl.php in my themes templates directory like this, if you are reading this and have the same problem change the order of the code to this:
<?php if ($page['sidebar_second']): ?>
<div id="sidebar-second" class="column sidebar"><div class="section">
<?php print render($page['sidebar_second']); ?>
</div></div> <!-- /.section, /#sidebar-second -->
<?php endif; ?>
<?php if ($page['sidebar_first']): ?>
<div id="sidebar-first" class="column sidebar"><div class="section">
<?php print render($page['sidebar_first']); ?>
</div></div> <!-- /.section, /#sidebar-first -->
<?php endif; ?>
<div id="content" class="column"><div class="section">
<?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
<a id="main-content"></a>
<?php print render($title_prefix); ?>
<?php if ($title): ?>
<h1 class="title" id="page-title">
<?php print $title; ?>
</h1>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($tabs): ?>
<div class="tabs">
<?php print render($tabs); ?>
</div>
<?php endif; ?>
<?php print render($page['help']); ?>
<?php if ($action_links): ?>
<ul class="action-links">
<?php print render($action_links); ?>
</ul>
<?php endif; ?>
<?php print render($page['content']); ?>
<?php print $feed_icons; ?>
I'm not sure exactly what kind of script I need for this, hopefully someone on here knows.
On the home/archive pages of a wordpress powered blog I am building I have a grid of thumbnails (featured images) only. Instead of these linking to the actual post/page, I'd like them to trigger a lightbox type of element that has a description of the post/page.
From there, the user would be able to either continue (via read more) to the post or close it and continue searching the grid.
Any insight is greatly appreciated!
Pure CSS Solution:
<body>
<div id="featured-grid">
<?php
if(have_posts()) : while(have_posts()) : the_post();
$default = '<img src="'.get_bloginfo('stylesheet_directory').'/images/default_thumb.jpg">';
$thumb = has_post_thumbnail() ? get_the_post_thumbnail() : $default;
?>
<div class="post-block">
<div class="post-thumb">
<a class="hover-trigger" href="#"><?php echo $thumb; ?></a>
</div>
<div class="post-preview lightbox">
<div class="preview-wrap">
<a class="featured-image" href="<?php the_permalink(); ?>"><?php echo $thumb; ?></a>
<?php the_excerpt(); ?>
</div>
</div>
</div>
<?php
endwhile;endif;
?>
</div>
</body>
<style type="text/css">
.post-block{width:300px;height:300px;}
.post-thumb{width:100%;height:100%;margin:10px;float:left;}
.post-thumb *{display:block;width:100%;height:100%;}
.lightbox{
display:none;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
position:fixed;
top:0;
left:0;
}
.preview-wrap{width:960px;margin:0 auto;position:relative;top:40px;background:#FFF;}
.post-block:hover .lightbox{display:block;}
.post-block:hover .post-thumb{display:none;}
</style>
This is EXTREMELY rudimentary and is largely untested. Overall, this should get you started in the right direction. Hope this helps!
I'm trying to display my posts my like.
A B
C D
E F
G
H
I
So far I have the following:
<div id="left-column">
<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>
<div class="post-row">
<?php
if ( function_exists( 'add_theme_support' ) && has_post_thumbnail()){
the_post_thumbnail(array(170, 80));
}
?>
<div class="post-title"><?php the_title();?></div><!--post-title-->
<div class="post-content excerpt"><?php the_excerpt();?></div><!--post-content-->
</div><!--post-row-->
<?php endif; endwhile; else: ?>
<?php endif; ?>
</div><!--left-column-->
<div id="right-column">
<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
<div class="post-row">
<?php
if ( function_exists( 'add_theme_support' ) && has_post_thumbnail()){
the_post_thumbnail(array(170, 80));
}
?>
<div class="post-title"><?php the_title();?></div><!--post-title-->
<div class="post-content excerpt"><?php the_excerpt();?></div><!--post-content-->
</div><!--post-row-->
<?php endif; endwhile; else: ?>
<?php endif; ?>
</div><!--right-column-->
<div id="restofpage">
NEED THE REST OF THE CODE.
</div>
Any idea how I can limit my logic to just 6 posts and how to continue wit the rest of the page?
don't do two whiles - keep it to just one. create an <article> or <div>for every post and just change the class: for example small for the first 6 and wide for the rest ...
<div id="page">
<?php
if (have_posts()) :
$index = 0;
while(have_posts()) : the_post();
?>
<article class="post<?= $index < 5 ? ' small' : ' wide' ?>">
<?php
if ( function_exists( 'add_theme_support' ) && has_post_thumbnail()){
the_post_thumbnail(array(170, 80));
}
?>
<div class="post-title"><?php the_title();?></div><!--post-title-->
<div class="post-content excerpt"><?php the_excerpt();?></div><!--post-content-->
</article><!-- post -->
<?php
++$index;
endwhile;
endif;
?>
</div><!--left-column-->
<div id="restofpage">
NEED THE REST OF THE CODE.
</div>
and then you can do the rest via CSS:
#page {
width: 420px;
margin-right: -20px;
font-size: 0;
}
.post {
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
font-size: 16px;
margin-right: 20px;
margin-bottom: 40px;
}
.post.small {
width: 200px;
}
.post.wide {
width: 420px;
}
You can use two loops, for the 1st loop
query_posts(array(
'showposts' => 6
));
while (have_posts()) : the_post();
// your code here for 2 columns
endwhile;
Above code will load only first 6 posts by default, now for the 2nd loop
wp_reset_query();
query_posts(array('paged'=>$paged, 'offset'=>7));
while (have_posts()) : the_post();
// your code here for single column/rest of the post
endwhile;
This code will load all posts beginning from offset 7.