currently working on
graphotic.com
these are four section on home page....(these are posts)
Branding
Graphic Design
Packaging
Printing
and using the php the_excerpt() function;
In the theme, this php line is responsible to display the content from the post, with read more link....
<?php the_excerpt(); ?> Read More>>
now the the issue is; i want to justify the excerpt content, but i am not able to find the <p> sothat i can put align=justify..
please help
the_excerpt(); will output paragraph tags. Trying to wrap the function in paragraph tags will result in invalid markup and the styling won't work.
Use a div tag instead:
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div>
Or:
<div style="text-align: justify;">
Remember to add a rule to your stylesheet for the first option. As other users have already pointed out the second option isn't considered best practice.
.post-excerpt {
text-align: justify;
}
Related
Is there a way to only display a parent (wrapping) if it's actually been populated with content?
The reason I ask is in Wordpress I'm using Advanced Custom Fields to create additional text areas on the homepage of the website. The content is added to the page inside divs, like this:
<section class="band">
<div class="wrap">
<?php the_field('services'); ?>
</div>
</section>
If the field is left blank, obviously the markup that surrounds remains on the page and due to the margin/padding they have set on them it leaves a big empty stripe across the page.
I know little Wordpress (and PHP in general), I assume this must be possible? I've had a play around with if/else statements but had no luck.
Can anyone advise on this?
You could do it this way:
<?php if( get_field('services') ) : ?>
<section class="band">
<div class="wrap">
<?php the_field('services'); ?>
</div>
</section>
<?php endif; ?>
The website is http://www.mercuriusresearch.co.uk which runs on Wordpress and based on Bootstrap.
The error shows when you resize the screen below 768px, all the post title links stop working. The actual HTML is still showing the href but the post titles just behave like normal text.
The error is displaying across the website (i.e. on all post title links) but only on those sections of the page that are taking links from Wordpress. For example, the sidebar links on my homepage work on all screen sizes.
I haven't had this problem before. My suspicion, based on the previous paragraph, is that it relates to Wordpress somehow...but I am using the same code that I always use to bring in the titles from Wordpress. So that, and the fact that the error appears to relate to the size of the screen, leads me to think that Bootstrap is somehow related too.
Any help would be much appreciated.
The only code that isn't on the website is this, which is the Wordpress loop:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-date">
<?php k99_relative_time(); ?>
</div>
<div class="post-title">
<?php the_title( sprintf( '<h3 class="entry-title">', esc_url( get_permalink() ) ), '</h3>' ); ?>
</div>
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div>
<div class="read-more">
Read more →
</div>
</article>
As I say though, this is working on larger screen sizes and if there was something wrong with this section, it obviously would occur on all screen sizes. All the other code is there on the website (obviously, I am not sure what part exactly is relevant, or I wouldn't I have this problem).
For a quick solution, you can write CSS using media query for devices below 768px and your links will work fine.
#latest-news-front,
#stock-ideas-front {
position: relative;
z-index: 10;
}
There is a div that covers all of the other divs you use.
If you look in your element inspector you can see the div.
You can float the sidebar-front div, but there is a change that other divs will behave different.
aside#sidebar-front {
float: left;
}
or clear every div by using the following code at the end of each one.
clear: both;
So I've been trying desperately to get my page title to overlay in the center of the header image, both horizontally and vertically, on my portfolio pages (here's a page with a longer title). I finally found a way to get the h1 title where I want it, but now I want to make it larger. However, when I currently resize the window to certain widths, the title doesn't wrap, it just disappears when it gets to long for the window. Would you mind taking a look and see if there would be a fix for this? I'm thinking that I'm using the wrong display tag somewhere along the line, but I'm not the best coder.
Here is the php for the header image and title (you can ignore the title that is black as I will get rid of that once I figure this one out). I think you should be able to see the rest of the html and css, but if I can provide anything else that may help with figuring this out, please let me know what that might be.
<?php get_header(); ?>
<div id="middle" class="clearfix">
<?php // Get the header image
$hi = getHeaderImage();
if($hi) :
?>
<div id="pageHeadImage" class="" >
<div class="inside" style="<?php echo 'background-image: url('.$hi.');' ?>">
<div id="projectTitleDiv">
<span class="aligner"></span>
<h1 class="projectTitle"><?php the_title(); ?></h1>
</div>
</div>
</div>
<?php endif;?>
Your div.aligner is causing the issue - it pushes the h1 out of the div. Remove div.aligner and use the following CSS to vertically centre #projectTitleDiv:
#projectTitleDiv {
position:relative;
top:50%;
transform:translateY(-50%);
}
I can't get CSS styling to work on content returned from a wordpress php function:
<span id="featured-excerpt"><?php the_excerpt(); ?></span>
The CSS style will work for anything before or after the php for excerpt, but the excerpt itself refuses to be styled. The only way I seem to have any success is where I try to place the php inside the span tag, which hardly seems correct, and creates a new single-space blank line after the php ouput....
<span id="featured-excerpt" <?php the_excerpt(); ?></span>
Any pointers would be appreciated.
In which case... Just looked at: http://codex.wordpress.org/Function_Reference/the_excerpt
It's entirely valid to:
<span id="featured-excerpt"><?php the_excerpt(); ?></span>
or
<div id="featured-excerpt"><?php the_excerpt(); ?></div>
EDIT (and given the comments):
Try removing the php function and render text, that way we'll know if this is a style or function issue:
<span id="featured-excerpt">Lord help us!</span>
How does it display? Does it display in your HTML output?
the_excerpt functions is returned with paragraph tags. The best easy solution is call the_content function instead of the_excerpt
the_content provide all css you add in content box.
I'm a little bit of a newb when it comes to PHP, but know enough to get around and would like to know if this can be done. sample
I want to break my wordpress page into 2 columns, but also want to have the header in the 1st column.... along with other text. I don't want the header floating over both columns...
The second column will house images only...
is that possible? In my head it makes sense, but then when I try and work it out, I'm just not sure....
And I just got thinking... I have my home page static with the smooth slider on it, so that is now going to cause more grief.
Any help, advice or pointers would be greatly appreciated.
Thanks in advance
This is more CSS/HTML than PHP, however that's fine. The first thing you need to do is understand how to make a two column layout. Then you will need to have the post title in the first column, something like this:
<article>
<div id="col1">
<h1>Post Title</h1>
Lorem ipsum dolor sit amet...
</div>
<div id="col2">
<img src="" />
</div>
</article>
To make this into WordPress you will of course need to add the WordPress Tags:
<div id="col1">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
Finally, adding the image(s) on the right. It can be done easily using WordPress' built in functionality, if you only need one image: (Note you will have to add something in your theme's functions.php file as per the WordPress Docs)
<div id="col2">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
</div>
To add multiple images, it gets more complex and you'll have to start looking for a plugin to achieve that goal.