I want to display individual categories (wordpress) on page, but be able to fully style each category title - html

I am nearing the end of a project and one of the last things I need to do is take some static html divs and enter category links into them.
The thumbnails have transitions styled into them, so when a user hovers over, the category title will appear over the top of a css mask effect.
http://lukwebdesign.co.uk/projects/chinwe-roy/
The thumbnails are towards the bottom of the home page, so any suggestions as to what to look at would be much appreciated.
TIA.

So there are a few ways to do this(especially depending on your setup) so I'm gonna have to make some assumptions on your site.
I'm assuming you're using default Wordpress posts and categories and not custom post types.
<?php
//Get the terms in the taxonomy "category" and assign it to the variable $terms
$terms = get_terms ('category');
//Use a foreach loop to loop through the terms
//i.e. for each term (e.g. workshop, exhibitions etc) do something
foreach ($terms as $term) {
//html for each category goes here
//e.g. display thumnail/featured image/display category title/link
}
?>
So for example within your foreach loop you could out each category url like so:
<a href="<?php echo site_url() . '/' . $term -> taxonomy . '/' . $term -> slug;?>">
<?php echo $term -> name; ?>
</a>
So for each category you can output a div and style it accordingly.

Related

In Magento 2.1.5, is there a way to render a widget within a template by its ID?

I would like to render a widget in my template by its ID, just like I have with blocks:
echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block_name')->toHtml();
Try this. This will help you.
For Display Type = All Product Widget
<?php echo $this->getLayout()->createBlock("Magento\Catalog\Block\Product\Widget\NewWidget")->setDisplayType("all_products")->setProductsCount("5")->setTemplate("product/widget/new/content/new_grid.phtml")->toHtml(); ?>
For Display Type = New Product Widget
<?php echo $this->getLayout()->createBlock("Magento\Catalog\Block\Product\Widget\NewWidget")->setDisplayType("new_products")->setProductsCount("5")->setTemplate("product/widget/new/content/new_grid.phtml")->toHtml(); ?>

Remove div class post nocolsidepost - wordpress

My wordpress theme (Anglepane) is creating a second (unwanted) post at the bottom of my page.
I have used Firefox page inspector and isolated the problem with the div tag "nocolsidepost", and I have gone through the 20+ theme files (css etc) and deleted this tag whereever I find it, but the second posts still remain!! - I can delete it on the fly with Firefox page inspector, but not in the actual code
Could anyone please explain how to solve this
Website is http://historyofliverpool.com and the section I want to remove it the bottom block with the previous / next links on it
I don't know the structure of the code in the theme but it can be in multiple parts of the code.
TwentyThirteen and TwentyFourteen themes (the ones bundled with Wordpress) use a separate function to show the pagination or the Prev/Next buttons. If your theme has this function (usually in function.php file) you will have to search for it and delete/modify all the lines that print something. For example, here is the function from TwentyThirteen theme:
function twentythirteen_paging_nav() {
global $wp_query;
// Don't print empty markup if there's only one page.
if ( $wp_query->max_num_pages < 2 )
return;
?>
<nav class="navigation paging-navigation" role="navigation">
<h1 class="screen-reader-text"><?php _e( 'Posts navigation', 'twentythirteen' ); ?></h1>
<div class="nav-links">
<?php if ( get_next_posts_link() ) : ?>
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentythirteen' ) ); ?></div>
<?php endif; ?>
<?php if ( get_previous_posts_link() ) : ?>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentythirteen' ) ); ?></div>
<?php endif; ?>
</div><!-- .nav-links -->
</nav><!-- .navigation -->
<?php
}
On the other side, the theme can easily implement the corresponding code directly in the archive.php, index.php and other category.php/tag.php files. It is similar to the function used above, the only difference is the function wrapper (the first is a function, the second not).
Or, simpler (but less proper) way to achieve this is to add a display:none; to the element above. But, to achieve this, you will have to find the code that generates it, to add there an id, and in the CSS use the id like this:
#your-id-here{
display:none;
}

How can I append a <span> tag to a <h1> heading in Wordpress

I need to add a spantag to an h1 heading in wordpress. I tried writing in through the CMS but it renders the spantag as text.
The site's title is a name and I want to give different styles to the words.
Suggestions?
Following David Thomas's advice I've written this: but it appends the span last and empty.
<h1>
<a href="<?php bloginfo('url'); ?>/">
<?php
$completeName = bloginfo('name');
$split = explode(" ",$completeName);
echo $split[0]."<span>".$split[1]."</span>"
?>
</a>
</h1>
You should be using get_bloginfo as Felipe suggested, but still pass in the 'name' parameter.
I was just working on the same code for the same reason and thought I should post for future visitors:
<?php
$completeName = get_bloginfo('name');
$nameParts = explode(" ", $completeName);
echo '<span>'.$nameParts[0].'</span> '.$nameParts[1];
?>
Apply the style to the h1 instead.
By the way, you probably want to edit the theme.
What about:
<? echo get_bloginfo('name', 'raw'); ?>
Can't test it for now, but here's the documentation about it:
bloginfo()
==> it just echoes the result of get_bloginfo() and there's a second parameter to this function
==> wptexturize(), a function that WON'T be called so beware!

how to fetch next row when given row is hidden using pagination?

It rather hard for me to come up with a short form of my question so bear with me:
Using jQuery and AJAX, I have all posts stored in my MySQL database displaying on index.php. Each post has a button the lets the user hide that post's DIV.
Now, I want to make it so that I only see 10 results and paginate the rest. I know there are plenty of pagination plugins out there but none of them displays the next post when the user hides one of the 10 already shown posts.
So if I see Posts 1-10 on page 1 (posts 11-20 on page 2) and user hides post 8, I should see Posts 1,2,3,4,5,6,7,9,10,11 on page 1 with posts 12-21 on page 2 and so on.
Question is: How do I do that? Here's what I have right now (fetch posts from database, display posts on page + hide button toggling):
// Javascript
$(document).ready(function() {
$(document).on("click", ".hide", function(){
postID = $(this).attr('id').replace('hide_', '');
$('#post-' + postID).toggle();
return false;
});
});
// PHP
<?php
$pageposts = $wpdb->get_results($wpdb->prepare("SELECT * FROM $wpdb->posts"), OBJECT);
?>
<?php if ($pageposts): ?>
<?php global $post; ?>
<?php foreach ($pageposts as $post): ?>
<?php setup_postdata($post); ?>
<div id="buttons_<?php the_ID(); ?>">
<div id="hide_<?php the_ID(); ?>" class="hide" style="position:absolute; right: 2.5em;">
<a id="hidebtn_<?php the_ID(); ?>" href="#"><span></span></a>
</div>
</div>
<div id="post-<?php the_ID(); ?>">
/* display post content */
</div>
<?php endforeach; ?>
<?php endif; ?>
An easy way to figure out what would be the next ID to grab would be to store the MAX id on the page, so if your page displays 1-10, 10 would be stored as the MAX id.
When a user hides a post, the mysql query would pull 1 result where id > the stored max id.

Wordpress widget how to only display sub-categories based on selected Parent Category?

I was wondering if anybody know hows to modify the existing category widget to only display the categories within the selected parent category.
Example:
If my categories are structured like:
Computers
Laptops
Desktops
Software
Electronics
Cameras
Audio/Video
If somebody is viewing posts in the Computers category I would like the categories widget in the side bar to only display Laptops, Desktops & Software..
Is there a way to get this done? Is anybody familiar of a plugin that maybe do that?
Thanks!
how about using something like this?
on a singles page you could add a call from within the single.php page to a new sidebar or an include file...?
ie:
<?php if( is_single() ) { include(TEMPLATEPATH.'/newsidebar.php'); } ?>
newsidebar.php
<ul>
<?php
$catsy = get_the_category();
$myCat = $catsy->cat_ID;
wp_list_categories('orderby=id&child_of='.$myCat);
?>
</ul>
this will show only categories from the currently used category?
ie:
if current category is 5 // Computers
then all that will be shown in the list is
* Laptops
* Desktops
* Software
Thanks for your help. I was able to get it to work by doing this...
<?php
if (is_category()) {
$cat = get_query_var('cat');
$this_category = get_category($cat);
$this_category = wp_list_categories('hide_empty=0&hierarchical=true&orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of='.$this_category->cat_ID."&echo=0");
if($this_category !='<li>No categories</li>')
{
echo '<h3>Products</h3>';
echo '<ul>'.$this_category.'</ul>';
}
}
?>
1) To Show only Subcategories:
<?php
// check if the page is viewed is a category page.
if (is_category())
{
$cur_cat = get_query_var('cat');
if ($cur_cat)
{
$new_cats = wp_list_categories('echo=false&child_of=' . $cur_cat . '&depth=1&title_li=&&show_count=1&hide_empty=0');
echo '<ul>' . $new_cats . '</ul>';
}
}
?>
2) To Show All Main Categories:
<?php
wp_list_categories('depth=1&title_li=&exclude=1&show_count=1&hide_empty=0');
?>
3) To show All Categories + Subcategories like Tree menu:
Use FoCal plugin.
4) view this code too:
http://wpworks.wordpress.com/2011/01/13/displaying-categories-and-subcategories-tree-on-wordpress/