trying to use <?php the_category( ' ' ); ?> to put in my category from my wordpress post.
within the loop html
<a href='<?php the_permalink(); ?>'>
<section id="post-<?php the_ID(); ?>" class="..">
<div>
<?php the_category( ' ' ); ?>
<?php the_title( '<h1>', '</h1>' ); ?>
</div>
</section>
</a>
Problem is that having the category php the section div's seems to get pulled out of the link (output has section outside link code.
Not having the category code it works perfectly.
You have an issue in your HTML: you have a <a> tag (inline element) with inside block type elements (like <div> and <section>).
Take a look at this page in order to properly understand the difference between inline and block elements.
While using the_category(), you are going to displays a link to the category or categories a post belongs to, so you are also placing a <a> tag inside another <a> tag.
Because you want just display the categories' names, you can use the following code
foreach((get_the_category()) as $category){
echo $category->name."<br>";
}
Review your formatting and everything will be work as expected.
Related
I'd like to know if it's possible to open a page (id=26) at a specific position: .
At the front page i'm using this code at the php file to make the title link to the page
<a href="<?php echo get_page_link(26); ?>">
<?php if(!empty( $clean_biz_home_service_title ) ){ ?>
<h2>
<?php echo esc_html( $clean_biz_home_service_title); ?>
</h2>
</a>
Yes, you can use DOM selectors such as #maincontent. You would need to assign an ID to a section on the page and then append it to the trigger URL.
For ex: http://yourdomain.com/index.html#maincontent would take you to that div on the page.
First, in the content of that page (id=26), you need to add an id attribute to some tag, like so:
<div id="myposition">
...
</div>
Next, append #myposition after the get_page_link(26) call:
<a href="<?php echo get_page_link(26); ?>#myposition">
<?php if(!empty( $clean_biz_home_service_title ) ){ ?>
<h2>
<?php echo esc_html( $clean_biz_home_service_title); ?>
</h2>
</a>
And you are done.
<div name="position">
content
</div>
link
example:
if you click the link below you will open this page at #new-answer position
link
i want to get the wordpress title post to a span tag.
i use the code below with the_title() in span tags:
<?php echo '<div>
<img src="image.jpg"/>
<h2><span>'.the_title().'</span>
</h2></div>'; ?>
but the title is show in a tag P, the result is:
<p>TITLE_OF_THE_POST_IS_SHOW_HERE
<div>
<img src="image.jpg"/>
<h2><span></span>
</h2></div>
in result, the span tags is empty, how do insert the title in the span tag?
I would advice changing this
<?php echo '<div>
<img src="image.jpg"/>
<h2><span>'.the_title().'</span>
</h2></div>'; ?>
to something like this
<div>
<img src="image.jpg"/>
<h2>
<?php the_title( '<span>', '</span>' ); ?>
</h2>
</div>
the php the_title function see documentation Here accepts parameters so you can define the parent tag <span> inside of the wordpress function the_title().
Keep in mind that the_title shows the current post title. If you want to get a title from another post you can use get_the_title( post = 3 ) as Mark B mentioned above.
I want to show limit latest post of WordPress in main page. I'm using WordPress APIs and functions to show that, but after that get_the_content() remove and escape all of seved tags and my posts don't show correctly such as editor tags.
This function escape HTML tags:
<ul style="list-style: none;margin:5px" class="latest-posts">
<!-- LOOP START -->
<?php $the_query = new WP_Query( 'showposts=3' ); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<!-- THIS DISPLAYS THE POST THUMBNAIL, The array allows the image to has a custom size but is always kept proportional -->
<li> <?php the_post_thumbnail( array(100,100) );?></li>
<!-- THIS DISPLAYS THE POST TITLE AS A LINK TO THE MAIN POST -->
<li>
<a href="<?php the_permalink() ?>">
<?php the_title(); ?>
</a>
</li>
<!-- THIS DISPLAYS THE EXCERPT OF THE POST -->
<li>
<?php echo mb_substr(get_the_content(), 0, 1200).' ...'; ?>
</li>
<!-- READ MORE LINK -->
<li>more ...</li>
<?php endwhile;?>
<!-- LOOP FINNISH -->
</ul>
There are basically three possibilities how to output the excerpt of the post content.
with the excerpt() function, to output the content of the excerpt field in post editor, if it's not filled it will display the first 55 words of the post content ( use excerpt_length filter to control the length of the excerpt ).
to use the <!--more--> quicktag, the_content() tag will only show the excerpt up to the <!--more--> quicktag. That quicktag will not work in single pages templates.
to manually strip HTML from post content and to show custom excerpt. One way to do that is to use wp_filter_nohtml_kses() function:
echo mb_substr( wp_filter_nohtml_kses( get_the_content() ), 0, 1200 );
All methods above will strip the HTML from post content. To include HTML in excerpts use excerpt field in post editor, WordPress will preserve HTML you included in post editor. There are also some plugins like Advanced Excerpt that will create excerpt from content and preserve html, but I don't believe that there is a bullet proof way of doing that.
I added the Facebook comment code in to a Wordpress comment
<?php if ( comments_open() ) : ?>
<li class="reviews_tab"><a href="#tab-reviews"><div id="fb-root">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<?php echo '<fb:comments-count href=http://bikeroger.com';
echo $_SERVER["REQUEST_URI"];
echo '></fb:comments-count> Awesome Love'; ?>
</a></li>
<br>
<?php endif; ?>
The result is what I wanted, but the styling is not.
Here's site and a screenshot:
As you can see from the image.
the text for "1656 Awesome Words" is smaller than "Description" & "Additional Information"
How can I make the font sizes the same?
<?php if ( comments_open() ) : ?>
<li class="reviews_tab"><a href="#tab-reviews"><div id="fb-root">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<?php echo '<fb:comments-count href=http://bikeroger.com';
echo $_SERVER["REQUEST_URI"];
echo '></fb:comments-count> Awesome Love'; ?>
</a></li>
<br>
<?php endif; ?>
Above your original code...
Below a minor alteration
<?php if ( comments_open() ) : ?>
<li class="reviews_tab"><a href="#tab-reviews"><div id="fb-root">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<?php echo '<fb:comments-count href=http://bikeroger.com';
echo $_SERVER["REQUEST_URI"];
echo '></fb:comments-count> Awesome Love'; ?>
</div></a></li>
<br>
<?php endif; ?>
inside your li and a tags you open a div tag "fb-root" but you are not closing it before closing the a and li tags. Thus having a broken tag, this may or may not be part of the issue directly but having broken unclosed tags can sometimes result in adverse undesired effects.
Also Im gonna take a wild guess and assume you have multiple div's with the ID fb-root on your page, which may also be causing conflict. However all in all. It being in the fb-root div, the facebook styling is overriding your styling as FB loads its styling after page load. So your comment tag is inheriting its styling rather than your initial styling. Facebook through that javascript you include for it, is basically rewriting the css/style properties of all elements within the fb-root div after its loaded into the DOM.
My goal is to have action icons in lists that correspond to how the list item is tagged or categorized.
For example, if I have a list item that is a webinar it should have a webinar icon next to it, the next item in the list might be a white paper, which should have a white paper icon next to it. The population of the icons should be controlled by how the list item is tagged or categorized.
I don't know where to start; any suggestions are appreciated. Thanks!
EDIT:
Thought it might be helpful if I show the list I'm wanting to modify - technically, the items that I want to modify are in the span class=meta" section, but I'm open to using whatever method worls:
<ul class="sub_nav">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active last">
<a href="#resource_center" title="Resources II">
Featured Resources
</a>
</li>
</ul>
<div id="resource_center">
<?php
$resources = get_posts("post_type=resource&posts_per_page=2&cat=31&tag=featured");
?>
<?php foreach ($resources as $key => $resource): setup_postdata($resource); ?>
<?php if ($key === 0): ?>
<?php endif ?>
<p><span class="meta"><?php echo apply_filters('get_the_date',mysql2date('m.d.Y', $resource->post_date), 'm.d.Y') ?></span>
<?php echo $resource->post_title ?> – <?php echo strip_tags(get_the_excerpt()) ?></p>
<?php endforeach; ?>
<span class="more">Read More</span>
</div>
Just name all your icons after the tags they correspond to and put them in the same folder on your server (let's say http://www.yoursite.com/tagicons)
In your loop, just iterate the meta tag inside an image tag
<img src="http://www.yoursite.com/tagicons/{$tag}.png" />
Paste the code you're using to iterate your list items if you need more help.
Cheers
-D
EDIT:
I se you're using wordpress.
Refer to http://codex.wordpress.org/Function_Reference/wp_get_post_tags
to see how to get the tags you're looking for.
If you are generating the list inside the WordPress loop you can add the category as a class to the list element. For example:
...loop started
$categories = get_the_category();
$ids = '';
foreach ($categories as $category) {
$ids .= ' ' . $category->slug;
}
echo '<li class="' . $ids '">This item</li>';
...more loop
Then utilize CSS to style the list block.
While I think both of these solutions would have worked, I decided to go with a third solution I discovered as I researched options to meet my use case. This one was ideal because I was able to seamlessly fit it into my existing code structure and because I have a relatively low number of resources that I need to add the featured image to.
I added the code below, which basically uses the post's featured image as a left-aligned thumbnail.
<?php if ( has_post_thumbnail()): ?>
<?php
$thumb_id = get_post_thumbnail_id($resource->id);
$args = array(
'p' => $thumb_id,
'post_type' => 'attachment'
);
$thumb_image = get_posts($args);
$thumb_caption = $thumb_image->post_excerpt;
?>
<?php if (!empty($thumb_caption)): ?>
<div class="caption"><?php echo $thumb_caption ?></div>
<?php endif ?>
<?php the_post_thumbnail('sidebar-thumb'); ?>
<?php endif; ?>
Followed by this code snipped to grab the image and put it by the list item:
<?php echo get_the_post_thumbnail($id, 'thumbnail', array()); ?>
Here's a screen shot of my test site list section after I added the code - it's exactly what I was looking for:
Thanks for the suggestions and help, it got me moving in the right direction!