Ok so I am trying to add a div read more button but it's not working, and I'm not sure how to go about this.
here is the code I am trying to use.
<?php the_content('<div class="readmore"></div>') ?>
here is the css
.readmore{
width:136px;
height:34px;
background: url('http://ericavain.com/wp-content/uploads/2013/04/READ1.png') no-repeat;
}
.readmore:hover{
width:136px;
height:34px;
background: url('http://ericavain.com/wp-content/uploads/2013/04/read2.png') no-repeat;
}
How do i get this accomplished
Maybe you are trying to use "read more" on Pages? If that is the case try adding something like this to your page:
<?php // let's enable more link on pages...
global $more;
$more = 0;
?>
<?php the_content(); ?>
Related
How Can I delete html tags in excerpts posts on homepage https://ptbo.edu.pl/ ?
I mean only HOMEPAGE (not in categories) because I'm changing this manually in posts editor.
My code looks now:
<?php if ( allium_has_excerpt() ) : ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php endif; ?>
I want to make changes only on the home page
My solution would be to leave the HTML tags but add this CSS to make them unnoticeable:
.home .entry-summary a {
pointer-events: none;
color: #3d3d3d;
}
.home .entry-summary strong {
font-weight: normal;
}
I'd like to set a random background-image into a <div>Container</div>
To keep it simple I installed a plugin using [shortcode] to display random images. This works fine.
How to get the shortcode [wp-image-refresh] working together with background-image:url(...)
I tried it even as inline-style with no result.
This is what I have:
HTML
<div class="header_random-image">
<div id="hero"></div>
</div>
CSS
#hero {
background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>');
background-size: cover;
background-position: 50% 30%;
height:70vh;
width: 100%;
margin-top: -65px;
}
Another try with no result: Inline-style
<div class="header_random-image">
<div style="background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>')"></div>
</div>
Could anybody be so kind to help? Or does anybody has a simple solution to place div-random-background-images?
Best from Berlin
In most cases your CSS code will be served in a static file, thus the php code won't execute.
As the inline example doesn't work either, I guess the short code does not return an image url but a full image tag instead. The plugin's description
confirms this assumption. WP-IMAGE-REFRESH
You could try this:
PHP
<div class="header_random-image">
<?php echo do_shortcode("[wp-image-refresh class='hero_class']"); ?>
</div>
CSS
.header_random-image {
overflow: hidden;
}
.hero_class {
height: 100%;
width: auto;
margin-top: 0;
}
This should display the image. You'd still have to center it if you want (use flex-box) and check for problems caused on different screen sizes depending on the side ratio of your uploaded images and solve them with some Javascript.
Alternative
Use ACF Pro and add a gallery field to your posts/pages or an option page if you want the same images on all views.
PHP
<?php
$images = get_field('name-of-your-gallery-field');
shuffle($images);
$imageUrl = images[0]['url'];
<div class="header_random-image">
<div style="background-image: url('<?= $imageUrl ?>"); ?>')"></div>
</div>
I'm working on a wordpress theme, and i want to have a custom header background. I used to use add_theme_support('custom-header); function that wordpress offers, it works but not the way i want it to. I want to have a background-image instead of an img. I made a function called header_background_callout() and i added a section, setting and control. the function works and outputs the background url that the user chooses through the customize section in wordpress. Is there a way that i can do something like this in css? : background-image: url(<?php echo wp_get_attachment_url(<?php get_theme_mod()); ?>);
Thanks in advance.
try this. echo " backgroud-img = 'url('get_theme_mod()')' ";
You can add inline styles to your theme using wp_add_inline_style:
<?php wp_add_inline_style( $handle, $data ); ?>
where $data is the CSS you want to include in your theme. This way you can have your php variables loaded as CSS for your website.
Yes kind off.
I made my css file a php file and because of that I can do as you say
background-image: url(<?php echo get_theme_mod(); ?>); // I suppose you need to echo the mod?
In the HTML you use it like;
<Link rel="stylesheet" type="text/css" href="style.php">
Edit you may need to change the header of the php file to a css file by:
<?php header("content-type: text/css; charset: UTF-8"); ?>
I found this easy way and it works the best:
In your Index.php file add:
<?php
function bg_img_alt() {
if(get_theme_mod('vibe_hero_background_setting') > 0) {
return wp_get_attachment_url(get_theme_mod('vibe_hero_background_setting'));
}else{
return get_template_directory_uri() . '/img/bg.jpeg';
}
}
?>
<style type="text/css">
background: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)), url(<?php echo bg_img_alt(); ?>);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
</style>
I have a problem with my div, when I'm trying to put text inside a div using <?php echo $uin->text; ?> it doesn't show up like I want it to.
So if it worked it should have looked like this:
SOME TEXT HERE
SOME TEXT SOME LINES BELOW
MORE TEXT AT THE BOTOM
but for me it always shows up like this
SOME TEXT HERE SOME TEXT SOME LINES BELOW MORE TEXT AT THE BOTOM
Here is the codes I've tried:
<style>
.TextAndStuff {
background: url(<?php echo $uin->backgroundimg; ?>);
background-repeat: no-repeat;
width: 100%;
text-align: left;
}
</style>
<div class="TextAndStuff">
<?php echo $uin->text; ?>
</div>
So I don't know what I'm doing wrong but if there's like 3 lines between the top text and the middle text in $uin->text it doesn't show those line, everything just gets on the same line.
Like #u_mulder and #ThrowBackDewd said on the top, use nl2br() function.
In your case, it would be like this :
<div class="TextAndStuff">
<?php echo nl2br($uin->text); ?>
</div>
I am trying to integrate a small section on an existing website, my problem seems simple, but I can't seem to get my head around it. Here is how I want it to look like:
alt text http://img691.imageshack.us/img691/329/layouth.jpg
Blue = #pagecontainer
Red = #sectioncontainer
Yellow = .post
pagecontainer { height: 100%; width: 900px;}
post container {width: 900px;}
.post {width: 210px;}
Four posts are getting pulled in from WordPress using:
<?php if (have_posts()) : ?>
<?php query_posts('category_name=Category&posts_per_page=4'); ?>
<?php while (have_posts()) : the_post(); update_post_caches($posts); ?>
<div class="post">
<?php the_content() ?>
</div>
<?php endwhile; ?>
The posts will be a fixed width, but a varied height. The problem is, I cannot put spacers in-between, without the last post pushing a div underneath, and I cannot use margins because the first and last div are bumped up against the page container.
I could probably use something like
.post {margin-right: 20px;}
.post:last-child {margin: 0 !important;}
...but this just seems messy and I would rather avoid using the child pseudo selectors.
Any ideas on a tidier solution?
You can use a $count
Something like:
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); update_post_caches($posts); ?>
<?php $count++; ?>
<?php if ($count < 5) {
$class = 'post';
} else {
$class = 'post-last';
} ?>
<div class="<?php echo $class; ?>">
<?php the_content() ?>
</div>
<?php endwhile; ?>
Then just set your 'post' class in the CSS to have the margin of 20px and 'post-last' to not have a margin
Try to use margin-based solution, but instead of :last-child trick that is unfortunately isn't cross-browser, set parent's margin at right side to equivalent negative value:
.post {margin-right: 20px;}
.secioncontainer {margin-right: -20px;}
Also make sure that there will be no spaces in-between of the .posts. You could modify the markup so that it is written in one line without spaces:
<?php while (have_posts()) : the_post(); update_post_caches($posts); ?><div class="post"><?php the_content() ?></div><?php endwhile; ?>
Or use CSS technique like:
.secioncontainer {font-size: 0px;}
.post {font-size: /*your normal value*/;}