I have a site that is in wordpress that has a custom navigation. The site also does not use categories. My question is there away to create bread crumb from the custom navigation. I can dump out the information from the post by passing the post ID to a get_post($id), but I cannot see a relationship to previous links. I also looked in the wordpress database and did not see any relationship between the previous post.
Any help will be greatly appreciated.
First, if you are using wordpress.com they will have breadcrumb plugins. And they also exist for wordpress hosted sites and I'm sure wordpress.com home-made sites.
However, if you want to create the breadcrumb functionality from scratch, here's the link to the breadcrumb code from TheWebTaylor Wordpress site (it's long so I used the link rather than copy & paste): https://www.thewebtaylor.com/articles/wordpress-creating-breadcrumbs-without-a-plugin
To call the crumbs on your page use:
<?php custom_breadcrumbs(); ?>
Disclaimer: I have not tested this code, and please read the disclaimer at the bottom of the linked webpage.
Install the Yoast SEO plugin:
https://yoast.com/wordpress/plugins/seo/
Instructions on how to implement breadcrumbs using Yoast SEO:
https://kb.yoast.com/kb/implement-wordpress-seo-breadcrumbs/
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('
<p id="breadcrumbs">','</p>
');
}
?>
Create Breadcrumbs:
We’ve created a custom function called get_breadcrumb() to generate the breadcrumb links. You only need to add the get_breadcrumb() function code in functions.php file of the current theme.
1-Step) Copy Below Code in your theme functions.php file
function get_breadcrumb() {
echo 'Home';
if (is_category() || is_single()) {
echo " » ";
the_category(' • ');
if (is_single()) {
echo " » ";
the_title();
}
} elseif (is_page()) {
echo " » ";
echo the_title();
} elseif (is_search()) {
echo " » Search Results for... ";
echo '"<em>';
echo the_search_query();
echo '</em>"';
}
}
Display Breadcrumbs:
Call the get_breadcrumb() function in single.php file and others files where you want to display the breadcrumbs on your WordPress site.
2- STEP) Paste below code where you want to show breadcrumb for example (header.php)
<div class="breadcrumb"><?php get_breadcrumb(); ?></div>
Styling Breadcrumbs:
This CSS helps to style the breadcrumbs links.
3- STEP) Paste Below CSS
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb a {
color: #428bca;
text-decoration: none;
}
Related
I am using Wordpress and WooCommerce to build a website for my client. For every product page I have set up two groups of links (buttons, secondary menu) to allow user to visit other product category pages. I would like certain links to be automatically a specific color and weight when the user is on a certain product page (like an active state, but without having to first clicked on the link, I guess similar to breadcrumbs to show where the user is in terms of what category/categories the product they're viewing belongs to).
I've been trying to target the post-id and the div of the specific links to make css changes, but it's not working. I would really appreciate any help!
Here is the css I used to target a specific secondary menu link:
#menu-item-1886 > a {
color: #003b59 !important;
font-weight: 600;
}
This works, but of course it made the change to this menu item across all pages. I want it to be only on a specific product page.
I also tried this, which also didn't work:
.body.post-id-766 #menu-item-1886 > a {
color: #003b59 !important;
font-weight: 600;
}
The site is at http://www.hoptri.d-gecko.com
Again, really would appreciate your help with this! Thanks in advance!
You can add with body_class WordPress filter hook and choosen conditional tags some additional classes where you want, like in this example:
add_filter( 'body_class', 'adding_some_custom_body_classes' );
function adding_some_custom_body_classes( $classes ) {
if ( is_product() ) {
$classes[] = 'product-single-pages';
} elseif( is_product() && is_single( array( 17, 19, 1, 11 ) ) {
$classes[] = 'product-single-pages-2';
}
return $classes;
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
This code is tested and works
So you will be able to use that classes selectors in your CSS rules like (fake example):
body.product-single-pages #menu-item-1886 > a,
body.product-single-pages2 #menu-item-1886 > a { font-weight: 600; }
body.product-single-pages #menu-item-1886 > a { color: green !important; }
body.product-single-pages2 #menu-item-1886 > a { color: red !important; }
WooCommerce inject yet in body classes some specific classes as in this html example:
<body class="product-template-default single single-product postid-19 logged-in woocommerce woocommerce-page right-sidebar woocommerce-active customize-support">
So you can also use this class selectors in your css:
single-product
woocommerce
woocommerce-page
woocommerce-active
For example this way:
body.woocommerce.single-product.woocommerce-active #menu-item-1886 > a {
color: blue !important;
}
References to conditional tags:
Wordpress conditional tags list
WooCommerce conditional tags list
I'm using a WP theme that has a FA icon in the header.
The icon can be customized from the Theme Customization page.
I would like to convert this icon into a button link (by just adding the link like href="#", that's all), no need to change styles or behavior.
This is a demo of the WP Theme:
http://wp-themes.com/arcade-basic/?TB_iframe=true&width=600&height=400
And here you have the code for that particular section in the header template:
<?php if ( $bavotasan_theme_options['header_icon'] ) { ?>
<i class="fa <?php echo $bavotasan_theme_options['header_icon'];?>"></i>
<?php } else {
$space_class = ' class="margin-top"';
} ?>
Can't make any linking inside the i tag to work.
Thanks in advance.
-Marcelo
I've got a PHP code block that will assign a heading a different style depending on the main page title. However, my site has multiple sub-menu items for each main page as well. The code currently works in assigning new styles to the main navigation pages but isn't assigning the colour profiles to the sub-page style elements. How can I expand my solution to accommodate any new sub-pages (i.e. a wordpress/php function that gets the sub-pages of the main navigation item).
Here's my code:
if(get_the_title($ID) === "Services") {
echo '<style type="text/css">
.header-page h1 {
background-color: #9B87A9;
}
.header-page h2 {
background-color: #9B87A9;
}
</style>';
}
else if(get_the_title($ID) === "About") {
echo '<style type="text/css">
.header-page h1 {
background-color: #dea949;
}
.header-page h2 {
background-color: #dea949;
}
</style>';
}
So I'm looking for something similar to get_the_title($ID) to accommodate any of Services sub-menu items or About. I want a more automated solution rather than hard code each sub-page title into my if statement.
Instead of adding the css to the page try adding the class to the element.
I'm trying to create a hover-effect on a list-item within the wp_list_pages() function. I'm creating a theme for Wordpress, but can't seem to get the hover effect working. I'm pretty new at this, so bear with me.
My css looks like this:
a.nav:hover { color: yellow; }
So for my html-code I add the "nav"-class to my links, like this:
<ul class="nav">
<li><a class="nav" href="#">HOME</a></li>
</ul>
This works, it changes the color of the link to yellow. So far so good.
But when I try to change this html-code to php-code the class isn't there.
I use the wp_list_pages() function, like this:
<ul class="nav">
<?PHP wp_list_pages('title_li=&depth=1&sort_column=menu_order&exclude='); ?>
</ul>
And the outcome then is:
<ul class="nav">
<li class="page_item page-item-23">HOME</li></ul>
So my question is, how to I add the nav class to this link? Is there an attribute within the function or something? Again, I'm really new to this
from the wordpress docs for wp_list_pages() http://codex.wordpress.org/Function_Reference/wp_list_pages#Markup_and_styling_of_page_items :
ll list items (li) generated by wp_list_pages() are marked with the class page_item. When wp_list_pages() is called while displaying a Page, the list item for that Page is given the additional class current_page_item.
with that, the easiest thing you can do is to just change your hover code to:
li.page_item:hover { color: yellow; }
Have a look at this.
Quote: "Add the following line to your theme's functions.php template file, and it will add a class attribute of "tag" to each link generated by wp_list_pages():
add_filter('wp_list_pages', create_function('$t', 'return str_replace("<a ", "<a class=\"tag\" ", $t);'));
I think that the proper way change the default class of a wp_list_pages function is this:
// add to functions.php
// add classes to wp_list_pages
function wp_list_pages_filter($output) {
$output = str_replace('page_item', 'page_item new-class', $output);
return $output;
}
add_filter('wp_list_pages', 'wp_list_pages_filter');
What if I have a different looks on each pages then I have to call only a specific class. The example below is the best way that worked for me.
page.index:
<aside class="menu-side">
<ul class="side-nav-list">
<li>
<!-- First child ( title of the page) -->
<?php the_title() ?>
</li>
<?php
if($theParent){
$findChildOf = $theParent;
}else{
$findChildOf = get_the_ID();
}
wp_list_pages(array(
'title_li' => NULL,
'child_of' => $findChildOf,
))
?>
</ul>
</aside>
CSS file:
.side-nav-list li a:link,
.side-nav-list li a:visited {
display: block;
padding: 1.6rem 1.2rem;
color: #2d234b;}
I have built a Twentyeleven template site in wordpress, I only use pages in CMS (no posts). I have a page called "Classes", its page content will be updated regularly.
I'd like to add a square on the right hand corner of every page which displays the beginning part of the 'Classes' page, and a 'more' link underneath can lead people to the 'Classes' page.
At the moment, I just added a html div in the content-page.php as I am learning. Is there a plugin can achieve what I am aiming? Or can you please give me some directions on how to code this (some suggested code or learning links would be helpful)?
Thank you.
If you are trying to do it in PHP you can try something like this
<?php
$page_id = 11; //set page ID
$page_data = get_page($page_id);
$title = $page_data->post_title;
$permalink = get_permalink($page_id);
echo ''. $title . '';
echo '<p>' . the_excerpt() . 'Read more</p>';
?>
If you need the page ID for this script you can use this
<?php
$pages = get_pages();
foreach ( $pages as $page ) {
echo 'ID: '. $page->ID . ' title: ' . $page->post_title.'<br>';
}
?>
If you are trying to do it based on a widget you need to ensure these steps.
Inside the Twenty Twelve theme you have the section called Main Sidebar in the Widgets section. From this area you would add your widget that you want and ensure that all the pages you want the widget to be in is set to the "default theme" and not "Full-width Page Template, No Sidebar".
Also I do not know if you have made any changes to your code but if you have, you need to ensure that your wp-content/themes/twentytwelve/index.php still has this prior to the footer section.
<?php get_sidebar(); ?>
If you want to widen your widget area you can tamper with the CSS that controls the width but be warned that this could affect the stability of the items inside your container.
wp-content/themes/twentytwelve/style.css
Line 1446 - 1449
Edit the Width of
.widget-area {
float: right;
width: 26.041666667%;
}
You would also need to edit the Main site-content to have the proper proportioned percentage if the prior value is edited.
Line 1437 - 1440
.site-content {
float: left;
width: 65.104166667%;
}
You don't have to use a plugin
The thing you are trying to achieve is quite easily done by editing your template files, depending on your needs. I will suggest the simplest solution, but perhaps you may transform this snippet into a widget for a more dynamic/maintainable usage.
Edit the page.php template file in order to make something appear in every page of your Wordpress installation.
Set up the desired layout for your box (perhaps <div> with some float: right).
Get the page you desire and store it into a php variable, like so: <?php $page = get_page( $page_id ); ?>
Get the position of the <!--more--> tag, using stripos.
Get only the part before the <!--more--> tag, using substr.
Apply the_content filters and then echo.
Your code will look a bit like this:
<div class="right-info">
<?php
$page = get_page(id);
$more_tag = stripos( $page->post_content, '<!--more-->' );
$excerpt = substr( $page->post_content, 0, $more_tag );
echo apply_filters('the_content', $excerpt);
?>
</div>