How can I trace all the relevant tags of a page in the form of classes to the <body> tag? I'm referring to how Wordpress puts the following in a page's body class attribute:
home page page-id-12766 page-template page-template-page-home-php cufon2-disabled safari theme-*
This could be extremely helpful in Joomla template development.
Thanks in advance.
I don't know whether there is any out of the box solutions exists for this. As the main structure of the site is mainly based on the Menu structure, the below snippet may be useful. This is used in the templates/mytemplate/index.php file.
<?php
$menu = &JSite::getMenu();
$active = $menu->getActive();
$pageclass= '' ;
//$currentpage = ''; //In case if wanted to get the alias of the current page in a later stage.
if( count($active->tree) > 0 ) {
foreach ($active->tree as $key => $value) {
$pageclass .= 'level-'.$key . ' pageid-'.$value. ' page-'.$menu->getItem($value)->alias ;
//$currentpage = $menu->getItem($value)->alias;
}
}
?>
<body class="<?php echo $pageclass; ?>">
This will output something like:
<body class="level-0 pageid-101 page-home">
You may improve this using various values available in the $active variable.
Here's some information on the Body Class Function
How Wordpress determines which classes to apply using it is found in post-template.php
The relevant function you're looking for is get_body_class within this template. It essentially runs a series of checks to determine if the current page meets the criteria for given classes. It also relies heavily on Wordpress specific function calls that helps make that determination.
Related
I have visual composer which is packed with total theme. When I put the following grid short code in my page in the editor it works correctly.
[vc_basic_grid post_type="post_type" max_items="10" item="masonryGrid_SlideFromLeft" grid_id="vc_gid:1458178666639-80ebf3775500c87d35de078c3422fe96-10" taxonomies="555"]
However, when I call the exact same code using do_action it gives the following javascript error. I checked the html output and it is the same using do_action like putting the short code in editor.
Error: Syntax error, unrecognized expression: {'status':'Nothing found'}
s
Any help is greatly appreciated.
Well, you can't output contents directly in your templates by using core shortcodes of VC like that.
1. Problem:
For security, besides nonce, VC uses page_id and shortcode_id to check AJAX request/respond data.
The shortcode_id is automatically generated by VC, you can not harcode it.
For example, this is the shortcode you see on admin editor screen:
[vc_basic_grid post_type="post_type" max_items="10" item="masonryGrid_SlideFromLeft" grid_id="vc_gid:1458178666639-80ebf3775500c87d35de078c3422fe96-10" taxonomies="555"]
Let say the page ID is 4269, this is the generated HTML code on front-end:
<!-- vc_grid start -->
<div class="vc_grid-container-wrapper vc_clearfix">
<div class="vc_grid-container vc_clearfix wpb_content_element vc_masonry_grid" data-initial-loading-animation="zoomIn" data-vc-grid-settings="{"page_id":4269,"style":"all-masonry","action":"vc_get_vc_grid_data","shortcode_id":"1458178666639-80ebf3775500c87d35de078c3422fe96-10","tag":"vc_masonry_grid"}" data-vc-request="http://example.com/wp-admin/admin-ajax.php" data-vc-post-id="4269" data-vc-public-nonce="0641473b09">
</div>
</div>
<!-- vc_grid end -->
Now, if page_id and shortcode_id don't match each other, {'status':'Nothing found - $shorcode_id'} will be throw out and no contents will be displayed.
You can find out more inside vc_grid.min.js file.
2. Solution:
Generate a fake page with VC, then copy generated html code to your template file.
Create a template with VC directly.
Use Shorcode Mapper to create your own shorcode.
First you build a new page and add a grid post on it,
then we get
_vc_post_settings
post meta , and try to build a new one
then update post meta data
now we can by pass VC Ajax security check
in the following code "1513628284966-37b8c3ca-d8ec-1" is VC generated guid
you should change it to yours .
$meta = get_post_meta(1365,'_vc_post_settings');
$settings = array();
#$settings['vc_grid_id'] = $meta[0]['vc_grid_id'];
$key = random_int(1513628284966,9513628284966);
$settings['vc_grid_id']['shortcodes'][''.$key.'-37b8c3ca-d8ec-1'] = $meta[0]['vc_grid_id']['shortcodes']['1513628284966-37b8c3ca-d8ec-1'];
$settings['vc_grid_id']['shortcodes'][''.$key.'-37b8c3ca-d8ec-1']['atts']['custom_query'] = "tag=shop";
$settings['vc_grid_id']['shortcodes'][''.$key.'-37b8c3ca-d8ec-1']['atts']['grid_id'] = ''.$key.'-37b8c3ca-d8ec-1';
$n = add_post_meta(1365,'_vc_post_settings',$settings);
return do_shortcode("[vc_basic_grid post_type=\"custom\" show_filter=\"yes\" filter_style=\"dropdown\" item=\"5959\" grid_id=\"vc_gid:".$key."-37b8c3ca-d8ec-1\" filter_source=\"post_tag\" custom_query='tag=".$tag."']");
I've solved.
I had the same problems, with the Visual Composer Editor offered by WpBakery
https://wpbakery.com/
and after understanding the connection between the IDs of the block, and the ID of the Post, I put more attention to the settings of the Block.
There is infact one field called "Element ID", and here we have to put our ID of the Post we are editing.
In my case the Block was a block containing some Posts.
After saving, and viewing the page without the Editor, I was finally able to see the block, and not the message
{"status":"Nothing found"}
I found a solution to this problem.
I modified the woocommerce category template and linked to the woocommerce_archive_description hook to add additional descriptions from some pages, for this I got their id, and then display the content.
echo do_shortcode($post->post_content);
The gallery(media grid) didn't work because there was a mismatch between the page id and the shortcode id. Therefore, the logical solution was to redefine the global variable $post to the $post of the page from which I get the content.
global $post;
$post = get_post( $id );
And it turns out that the post id matches.
After that, don't forget to return the normal $post value;
wp_reset_postdata();
By the way - use this option to load custom styles for wpbakery elements.
echo '<style type="text/css" data-type="vc_shortcodes-custom-css">' . get_post_meta( $id, '_wpb_shortcodes_custom_css', true ) . '</style>';
The whole code
function extra_product_category_desc(){
if( is_product_category() ){
$id = get_term_meta (get_queried_object()->term_id, 'pageId', true);
if($id !== ''){
global $post;
$post = get_post( $id );
echo do_shortcode($post->post_content);
echo '<style type="text/css" data-type="vc_shortcodes-custom-css">' . get_post_meta( $id, '_wpb_shortcodes_custom_css', true ) . '</style>';
wp_reset_postdata();
}
}
}
add_action( 'woocommerce_archive_description', 'extra_product_category_desc', 11 );
You may also try with do_shortcode('');
Like
do_shortcode('[vc_basic_grid post_type="post_type" max_items="10" item="masonryGrid_SlideFromLeft" grid_id="vc_gid:1458178666639-80ebf3775500c87d35de078c3422fe96-10" taxonomies="555"]');
Best Regards,
In my functions file I have this:
function caption_shortcode( $atts, $content = null ) {
return '<span class="caption">' . $content . '</span>';
}
add_shortcode( 'caption', 'caption_shortcode' );
In the CMS page editor I have this:
[caption]My Caption[/caption]
This page is utilizing a custom template file template-mypage.php. My question is: I would like to create multiple short codes types within the CMS such as:
[caption1]My Caption[/caption1]
[caption2]My Caption[/caption2]
[caption3]My Caption[/caption3]
then in my template-mypage.php... I would like to selectively choose where to place [caption1], [caption2], [caption3]... for example [caption1] will go somewhere on the top... [caption2] in the middle and [caption3] towards the bottom of the template-mypage.php, all seperated by some huge chunks of HTML content. I do not want to write any HTML within the WP CMS... all HTML should be written in the template-mypage.php.
Currently I believe WP limits shortcode output to come out of the_content(); Is it possible to do something like the_content_of_caption1(), the_content_of_caption2(), the_content_of_caption3()?
Thanks please let me know!
this product does this perfectly
http://wordpress.org/plugins/multiple-content-blocks/
I'm second day into Drupal and pretty confused... I need to add an unique class name to the body tag to identify each page as there are many unique styling (to repeating elements) on each page across the site.
I've found a couple of code snippets online but they haven't worked. For example I've added this into the template.php file, but it doesn't work:
function testtheme_preprocess_html(&$vars) { // my theme is called "testtheme"
$path = drupal_get_path_alias($_GET['q']);
$aliases = explode('/', $path);
foreach($aliases as $alias) {
$vars['classes_array'][] = drupal_clean_css_identifier($alias);
}
}
It's suppose to add a class to the body tag but nothing is showing up for me. Am I missing something or can someone provide another solution?
The answer of Rainfall is true but :
There are already unique class by page in drupal in body element page-NAMEPAGE
Sorry if I didn't understand you right, but you can add code to the body tag in your html.tpl.php file to make it look this way:
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
And that's all. After that your body tag will automatic have css classes according to the page . Also you'll have info about node type, info about if user logged in, node id.
Let me know if it works or if I made some mistake.
Thanks and good luck!
You can modify https://www.drupal.org/project/node_class module:
1) comment function node_class_preprocess_node in node_class.module
2) insert
$node_classes = node_class($node);
if (!empty($node_classes)) $node_classes .= ' ';
$content_column_class = str_replace(' class="','', $content_column_class);
$content_column_class = ' class="'. $node_classes . $content_column_class;
in page.tpl.php
before
<section<?php print $content_column_class; ?> id="content_col">
I'm trying get the code below to always highlight the current page of a theme that I'm working on but it does nothing. The HTML part is as shown below the script. Any suggestions or solution for the fix.
<script type="text/javascript">
var url = window.location.href;
url = url.substr(url.lastIndexOf("/") + 1);
$("#navbar").find("a[href='" + url + "']").addClass("current");
</script>
<div id="navbar">
<ul>
<li>home</li>
<li>services</li>
<li>procedure</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
You need to look into WP Nav Menu.
I'm guessing this is a theme you're developing? If so, Register a Nav Menu in your functions.php file. What this will do is allow you to define your menu in the Wordpress dashboard (Appearance->Menus), and customize it however you like.
The reason why I'm suggesting this is that not only will it allow you to have total control over your Menu in a very intuitive way, but it also defines all the classes you could possibly need for your stylesheet automatically (including current items, and ancestry).
That is the cleanest option you have at your disposal. You can also look into WP List Pages for a similar (albeit, more limited) solution.
Otherwise, you'll have to do something dirty like this:
<?php
$id = get_the_ID();
$class = ' class="current"';
?>
<ul>
<li<?php echo is_home() ? $class : ''; ?>>home</li>
<li<?php echo $id==$serives_ID ? $class : ''; ?>>services</li>
<li<?php echo $id==$procedure_ID ? $class : ''; ?>>procedure</li>
<li<?php echo $id==$about_ID ? $class : ''; ?>>about</li>
<li<?php echo $id==$contact_ID ? $class : ''; ?>>contact</li>
</ul>
Replace $services_ID, $procedure_ID, etc. with their respective Page IDs, and if the current ID matches any one of them, that item will have a class of "current" applied to it, which you can then target in your stylesheet.
The main reason why I suggest a server-side solution over using any kind of jQuery is that this is not a task that is suited specifically for jQuery itself.
While the jQuery library is a powerful tool, Wordpress has all of the built-in functionality you need to detect everything you want to detect in this instance. Let the server do as much work as possible before letting the client's browser take over. Otherwise, you'll be looking at some serious load times.
UPDATE:
Based on your last comment, if you're going to go with the messy way and you don't want to be bothered with finding IDs of your pages, you can also do this:
<?php
$slugs = array('services', 'procedure', 'about-us', 'contact-us');
?>
<ul>
<li<?php echo is_home() ? ' class="current"' : ''; ?>>home</li>
<?php
foreach($slugs as $slug)
{
$page = get_page_by_path($slug);
$class = is_page($slug) ? ' class="current"' : '';
echo '<li'.$class.'>'.str_replace('-us','',$slug).'</li>';
}
?>
</ul>
UPDATE BASED ON LAST COMMENT:
Now that you're using wp_nav_menu, you can target the current menu item with CSS. Here's an example that will turn the background of the current item to red:
<style type="text/css">
.current-menu-item{background:#F00;}
</style>
Apply these rules either in your header, or preferably in your main style.css file. Good luck!
Your substr is using lastindex of / +1. The links shown in the html have / on the end. I'd imagine the two are mutually exclusive as s string ending in / would always return an empty string with that substr.
I am working on a wordpress plugin that modifies the title of a post. I only want to do this when I am viewing a single post. To be specific, I want to add a link beside the title, but for purposes of the question, I will be adding some arbitary text.
I started out by using the 'the_title' filter hook, and calling this function.
function add_button_to_title($title)
{
global $post;
if(is_single())
{
return $title.'googly googly';
}
return $title;
}
The problem is, the links on the side bar apparently also use 'the_title', as I saw my text showing up in the side bars as well, which led me to:
if(is_single() && in_the_loop())
But then, in my theme(and i suppose themes in general) there is a link to the previous post and next post, which also uses 'the title' filter. So finally I have:
if(is_single() && in_the_loop() && ($post->post_title == $title))
The last conditional basically makes sure that it is the title of the post that is being printed, not the title of the next or previous post. This works but I am not sure how well it will work given different themes...It seems like terribly hacked together. Any advice from wordpress gurus out there? I am worried that the title would be modified for other reasons and the conditional will fail.
Any help is appreciated!
Ying,
There isn't really a good solution except, as ShaderOp said, requiring theme modification. Your solution will work for the most part. The only exception is if the theme developer has changed the query in a page. I'd say this is probably a good enough solution that it'll cover more than 95% of the cases you'd run into.
I solved a similar issue by adding a check to see if the title being filtered matches the title of the post. This avoids the issue with other post titles on the page (in sidebar, menu) also getting filtered.
function add_button_to_title( $title ) {
global $post;
if( is_single() && $title == $post->post_title ) {
return $title . 'googly googly';
} else {
return $title;
}
}
Wouldn't it be easier to keep the original version of your add_button_to_title function, but instead of hooking it to a filter, call it directly from your single.php page in the appropriate place?
For example, somewhere in your theme's single.php, instead of this:
<h3 class="storytitle">
<?php the_title(); ?>
</h3>
Use this:
<h3 class="storytitle">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php echo add_button_to_title(the_title('', '', false); ?>
</a>
</h3>
today I ran into a similar problem. the_title gets called several times accross the whole page (e.g., in the html-head, the menus, the sidebar). I followed a similar approach using conditionals and the post/page id.
Additionally, I added a boolean flag which is set to true using the 'the_content' filter. So the title gets changed until the content is displayed. This way, I ensure that sidebars/widgets are not affected (e.g. Thematic theme has a default widget with links to pages - here the other conditionals would not be helpful as get_the_id() would return an equivalent). This ONLY works if the theme uses sidebars on the right. I did not find a way yet how to hook in directly before the 'the_title' call for the page/post to enable the boolean flag.
function myplugin_adjust_title($title, $id) {
global $myplugin_title_changed;
if ($myplugin_title_changed) {
return $title;
}
if (in_the_loop() && is_page('myplugin') && $id == get_the_ID()) {
$title = '';
}
return $title;
}
add_filter('the_title', 'myplugin_adjust_title', 10, 2);
function myplugin_adjust_title_helper_content($content) {
global $myplugin_title_changed;
$myplugin_title_changed = true;
return $content;
}
add_filter('the_content', 'myplugin_adjust_title_helper_content');