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.
Related
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;
}
I am trying to add data atributes to my anchor tag for a WordPress custom theme.
The code below is what I've so far, the problem is with plain HTML this works fine but once I add the PHP lines then something breaks.
When the actual HTML is rendered it excludes the end of the open anchor tag, and leaves "> out to display on the page.
Not sure what went wrong but maybe someone can take a look at this and might be able to point out what I did wrong, a fix, a better way, or maybe if this is even possible.
<a
class="caption" href="<?php the_permalink()?>"
title="<?php the_title_attribute(); ?>"
data-title="<?php the_title(); ?>"
data-description="<?php the_excerpt(); ?>"
>
<?php the_post_thumbnail(array(301,301)); ?>
</a>
<?php endif; endif; ?>
This is not an answer, just some thoughts/things to try:
Are those PHP functions defined somewhere on the same page, or on a page that is included or required ?
Have you tried replacing those function calls with simple PHP commands, such as <?php echo "the_permalink_goes_here"; ?> etc. -- just to make sure, for example, that the anchor tag's href value changes to
<a href="the_permalink_goes_here" etc>
The excerpt function that you're using for the description is returning not just the excerpt, but also an additional "Read more" link, effectively putting an anchor inside your anchor tag, which is what is breaking it. To the best of my knowledge, there isn't a default WP function for returning an excerpt without this link, so you will need a function to do this. Try searching for 'excerpt without link'
I know this code isn't correct, but I would like to inject the HTML and PHP into the title of the below tag.
<p class="related_articles" title="<?php echo the_field(related_articles_1_title); ?>"Related Articles</p>
I am using a jQuery tooltip plugin (http://flowplayer.org/tools/tooltip/index.html) that grabs content from the title tag and displays it as the tooltip content. I have Advanced Custom Fields setup (WordPress plugin) that allows me to publish custom field content. In effect, the content I post in these custom fields will end up in the tooltip.
My goal is to produce a tooltip when the user hovers over "Related Articles", that displays a link that is clickable. Again, the above jQuery tooltip plugin grabs the content from the title, which is why this is causing difficulty
Ok, as we understand what you are trying to do. Lets get some things clear.
<p class="related_articles" title="<?php echo the_field(related_articles_1_title); ?>"Related Articles</p>
Is SO wrong on so many levels. First of all things, its not valid in any way. Second of all, you are not ending your <a>. You are also missing one echo and target="", inside title="" was not escaped: target=\"\".
So in a nutshell to straight up answer your question, this maybe will work (maybe, because its seriously uncommon and nonstandard)
<p class="related_articles" title="<?php echo the_field(related_articles_1_title); ?>">Related Articles</p>
Also, as one of the users already mentioned. If your server server enables short open tags, then you could make the <?php echo $foo; ?> shorter: <?= $foo ?>. So in your codes case it would look like:
<p class="related_articles" title="<?= the_field(related_articles_1_title) ?>">Related Articles</p>
However, as probably mentioned already. This is not recommended method and may produce all sort of issues. I recommend to research for a better solution.
Use the short form if your server supports it:
<?=the_field(related_articles_1_link)?>
or else, you should echo it:
<?php echo the_field(related_articles_1_link); ?>
<p class="related_articles" title="<?php echo htmlspecialchars(''. the_field(related_articles_1_title) .''); ?>">Related Articles</p>
While this should work, I am not sure if your mentioned jQuery plugin is able to interpret the given html in a title attribute as HTML (you need to test it). Most likely this will be interpreted as text and all tags will be visible to the end user, but this is not what you want.
I found an example of how to implement this in a different manner: http://flowplayer.org/tools/demos/tooltip/any-html.html
Is it possible that this is what you want?
<p class="related_articles">
Related Articles:
<a href="<?php echo the_field(related_articles_1_link); ?>" target="_blank">
<?php echo the_field(related_articles_1_title); ?>
</a>
</p>
Now that you've clarified that your question was regarding the jQuery Tooltip plugin, you should do the following:
<p class="related_articles">Related Articles</p>
<a class="tooltip" href="<?php the_field(related_articles_1_link); ?>" target="_blank">
<?php echo the_field(related_articles_1_title); ?>
</a>
Javascript:
$('.related_articles').tooltip();
The reason this works:
The tooltip plugin looks at the element right after the one which .tooltip() was applied to. If that next element has a class name of tooltip, it'll use that as the contents of the tooltip (instead of the title attribute).
Given that you are placing html content inside an HTML property it should be escaped. As mentioned by #Karolis do this:
<p class="related_articles" title="<?php echo htmlentities(''.the_field(related_articles_1_title).''); ?>">Related Articles</p>
This should generate a tooltip with the link in it. If you see stuff like "& lt;a href="... & gt;" on the tooltip then the plugin is not unescaping html values. You could unescape the values but unfortunately javascript has no function. For this you can check out php.js
which provides php's functions in js but that seems kinda overkill. You could instead replace the troublesome characters like this:
<?php
// Generate complete tootltip content
$tootltipContent = ''.the_field(related_articles_link_1).'';
// Search for these
$search = array('<','>','"');
// And replace them with these
$replacements = array('##','##','\"');
$tooltipContent = str_replace($search,$replacements,$tooltipContent);
?>
<p class="related_articles" title="<?php echo $tooltipContent; ?>">Related Stuff</p>
Then look for the line in the plugin where the title is extracted from the element. (tip: on the plugin source code do a search for 'title'. There should be one place where the value is being extracted) It may look something like this tooltipContent = $(someVar).attr('title'); Now run the inverse replacement in js:
tooltipContent = tooltipContent.replace('##','<').replace('##','>').replace('\"','"');
I'm trying to construct a Table of Content on a custom template in Wordpress. Because I already know beforehand the headings of the internal sections I want to link to I hardcoded that into the template.
My problem is that in Wordpress it doesn't scroll to that section at all? Here's the link to a page with an existing TOC section that's not working.
In terms of code, this is an illustration of what I got:
<div class="table_content">
<h4>Table of Contents</h4>
<ol>
<li>Overview</li>
</ol>
</div>
Which should link to an internal section with the code:
<h2><a id="#test_link" class="internal"><?php the_title(); ?></a></h2>
Note: I'm using "ID" instead of "name" because it's deprecated in HTML5, which is the doctype I'm using.
I'm also wondering is there an easier way of doing this with jQuery?
Any help in saving my hairline would be GREATLY appreciated...
Nevermind, I'm a muppet.
It's got nothing to do with doctypes or Wordpress issues. Just my incorrect, sleep-deprived implementation of HTML.
This
<h2><a id="#test_link" class="internal"><?php the_title(); ?></a></h2>
should be
<h2><a id="test_link" class="internal"><?php the_title(); ?></a></h2>
Notice the missing "#" in the "ID" attribute, removing that makes everything work nicely :)
You don't need the separate a element...
http://www.yourhtmlsource.com/text/internallinks.html
I am trying to insert this search form into my wordpress header. I found where php calls for the user-uploaded logo, and would like to insert the form immediately after.
Search form include:
<?php include ('wp-content/themes/thematic/searchform.php'); ?>
Functions.php echo:
function childtheme_override_blogtitle(){
global $up_options;
echo '<div id="blog-title"><span><img src="' . $up_options->logo . '" alt="" /></span></div>';
}
add_action('thematic_header','childtheme_override_blogtitle',3);
function childtheme_override_blogdescription(){
I tried inserting the form as a separate div, but this keeps the form from centering with the rest of the main content. So I am trying insert the form where php creates the div. You can see my current progress here: texturly.com
There's a function for including the theme's searchform..
http://codex.wordpress.org/Function_Reference/get_search_form
Just call it inside your function or appropriate file.
<?php get_search_form(); ?>
There's an example filter on the above codex page to, should you want to override searchform markup from within your functions file.
EDIT: Regarding placement inside the function, i'd write it a little something like this.
function childtheme_override_blogtitle(){
global $up_options;
?>
<div id="blog-title">
<span><img src="<?php echo $up_options->logo; ?>" alt="" /></span>
<?php get_search_form(); ?>
</div>
<?php
}
Of course move that search form where you want it, i just reformatted how the HTML is generated so you'll have an easier time adjusting it.
Hope that helps.