Wordpress body_class() loads single post css on a blog page - css

On my blog landing page the body_class() injects the blog style (http://madgreens.com/blog). But, when a blog page loads, the single-post style is injected (http://www.madgreens.com/blog/2015/02/chicken/).
I did upgrade 4 plugins recently but have moved them to a folder 'plugins-temp' until I sort this out.
Is there a way to force Wordpress to load the correct css on all blog pages?

That is the default behavior of body_class(). If there are other classes that you want in addition to the standard classes, you can add them by:
body_class( 'classname' )
or
body_class( array( 'classname1', 'classname2' ) )
So if there is some class you always want, just modify the body_class function in your template to include it.
For more control, you can add a filter in your functions.php file, like so:
function enhanceBodyClass($classes)
{
global $post;
// Add any classes you want to the $classes array
return $classes;
}
add_filter('body_class', 'enhance_body_class');

Related

How to create a template if site is using Divi?

I am doing some work on a site and everything is made in Divi.
I just want to build out a few custom woocommerce templates for product page etc.. using code but when I add the templates to the theme folder it doesn't override the product page.
When I look in debug query it shows the et page builder template is being used instead of regular product template.
Their docs are all geared up for non-coders and only code related stuff is on making modules.
How do I just make a normal template override from a child theme?
You just have to make sure your path to the template files is correct. For instance, if you're trying to overwrite the single-product template, which is located at:
wp-content/plugins/woocommerce/templates/single-product.php
just copy it to:
wp-content/themes/{your-child-theme}/woocommerce/single-product.php
and make your changes there.
For any template files, just match the path minus the templates folder.
If you have any caching plugins installed, you may need to clear your cache before the changes show up.
To test it, I copied single-product.php and product-image.php and made the following changes.
And you can see the result here:
If that doesn't work for you, make sure your child theme is set up correctly.
Edit: Divi's Theme Builder, once activated, causes the site to no longer use page templates. So there is no way (short of rewriting the Theme Builder) to override it with your own template files.
However, you can customize the Divi modules that are used by the Theme Builder, although editing them is a bit more complicated.
The modules are found in:
wp-content/themes/Divi/includes/builder/module/
For example, I'll override the WooCommerce Title module.
wp-content/themes/Divi/includes/builder/module/woocommerce/Title.php
First, copy that file into your child theme and place it in a new folder:
wp-content/themes/Divi-child/custom-modules/Title.php
Next, add the following code your child theme's functions.php to replace the existing module:
function divi_child_theme_setup() {
if ( class_exists('ET_Builder_Module')) {
get_template_part( 'custom-modules/custom-title' );
$TE_ct = new Custom_ET_Builder_Module_Woocommerce_Title();
remove_shortcode( 'et_pb_wc_title' );
add_shortcode( 'et_pb_wc_title', array($TE_ct, '_shortcode_callback') );
}
}
add_action('wp', 'divi_child_theme_setup', 9999);
Call your variable ($TE_ct) and the module (Custom_ET_Builder_Module_Woocommerce_Title) whatever you want.
Finally, edit the module in your child theme. Make sure the class name matches what you used in functions.php.
...
class Custom_ET_Builder_Module_Woocommerce_Title extends ET_Builder_Module {
/**
* Initialize.
*/
public function init() {
echo "<h1>CUSTOMIZED!!</h1>";
$this->name = esc_html__( 'Woo Title', 'et_builder' );
$this->plural = esc_html__( 'Woo Titles', 'et_builder' );
$this->slug = 'et_pb_wc_title';
$this->vb_support = 'on';
...
Here, I've added a simple echo to show that the module is being overridden.
Result:

Removing wordpress theme from particular pages

I have a custom Wordpress theme that includes a header, footer, and a few other elements. It's great, but there are a few pages that I want to style completely differently. One of them is, for example, a landing page, where having the typical header makes no sense. How can I tell Wordpress not to use any themes on this page? Is this even possible?
You can use Page Templates
For example, if you would like to use custom header or footer for your landing page you can do following in a separate .php file and declare it as a Page Template.
I'm assuming your header and footer file name header-landing.php and footer-landing.php
<?php
/**
* Template Name: Landing Page
*/
get_header( 'landing' ); ?>
// Landing Body
<?php get_footer( 'landing' ); ?>
If you wish no header or footer then, you can just omit get_header() or get_footer() function call.
You can use conditionals to decide when to load certain stylesheets onto certain pages.
For example, in your functions.php, you can use wp_enqueue_style to load in different stylesheets. In your php, you would say something like this:
function custom_page_style_sheet() {
if (is_page() ):
wp_enqueue_style( 'custom-page-styling', get_stylesheet_directory_uri() . '/custom-page.css' );
}}
add_action('wp_enqueue_scripts', 'custom_page_style_sheet');
Try this tutorial, which is where I grabbed the example code from:
http://wpsites.net/wordpress-themes/second-style-sheet-theme/

wordpress wp_enqueue_style on page that doesnt include get_header

I have created a plugin which has it's own custom page template. I dont want this apge to use the default themes css, so have excluded get_header(), and used the following which just pulls in the wordpress functionality
require_once('../../../wp-load.php'); global $wpdb, $woocommerce;
My problem now is i am trying to enqueue a style, but as my template is not including get_header() or wp_head() it doesnt look like it is working. Is there a way around this?
I am using wp_enqueue_style like this:
function woops_styles() {
wp_register_script('packing-slip', plugins_url('/my-plugin/style.css', __FILE__));
wp_enqueue_script('packing-slip');
}
add_action( 'wp_enqueue_scripts', 'woops_styles' );
You will need to include wp_head(), so you will need to have a header. wp_enqueue_scipts hooks on wp_head().
What I would suggest if you need a diffirent styling for this page is to assign a body_class() to this page and then style that accordingly. You can use a conditional statement (is_page_template()) to only assign the body_class() to this specific page template.
If you really don't need a header to show up, simply hide it with css

wordpress : how to add categories and tags on pages?

I have generated pages using a custom template by creating a php file in my theme directory
something like :
<?php
*
* Template Name: Contact Page
*/
?>
<html ..... </html>
and then adding a new page on the dashboard selecting this new template
How can i now associate tags and categories to each pages ?
Is creating posts instead of pages the only solution?
Even better is to add to functions.php in your theme folder:
function myplugin_settings() {
// Add tag metabox to page
register_taxonomy_for_object_type('post_tag', 'page');
// Add category metabox to page
register_taxonomy_for_object_type('category', 'page');
}
// Add to the admin_init hook of your theme functions.php file
add_action( 'init', 'myplugin_settings' );
Tried using the accepted answer but for some reason it only shows the Post types and none of the Pages shows in the category page. E.g. /category/entertainment/
To fix that, I have to do this:
// add tag and category support to pages
function tags_categories_support_all() {
register_taxonomy_for_object_type('post_tag', 'page');
register_taxonomy_for_object_type('category', 'page');
}
// ensure all tags and categories are included in queries
function tags_categories_support_query($wp_query) {
if ($wp_query->get('tag')) $wp_query->set('post_type', 'any');
if ($wp_query->get('category_name')) $wp_query->set('post_type', 'any');
}
// tag and category hooks
add_action('init', 'tags_categories_support_all');
add_action('pre_get_posts', 'tags_categories_support_query');
Try this:
add_action( 'init', 'wpse34528_add_page_cats' );
function wpse34528_add_page_cats(){
register_taxonomy_for_object_type('post_tag', 'page');
register_taxonomy_for_object_type('category', 'page');
}
Not at all helpful to say 'download plugin' for beginners who are most likely not going to have downloaded wordpress and are therefore not able to install said plugin. Here is some short code for those like me that have been scouring the web for something that actually works on regular pages with regular accounts - ie you're not a developer.
First, make sure you have your pages in your menu set up properly.
YOU DO NOT NEED TO MAKE YOUR PAGES 'Categories' or 'Tags'!
This wouldn't give you actual pages to then go and edit, so if you are wanting to add sliders, text, an intro, or anything for that matter, you wouldn't be able to.
Then go to WP Admin > Pages
Select a page to edit and go to the text editor instead of visual editor (far right hand side tab)
Then past the following short code:
[display-posts category="hair,makeup,reviews,beauty" posts_per_page="10" include_date="true" text-decoration: none date_format="F j, Y" order="DESC" include_excerpt="true" wrapper="div" image_size="large"]
<
(The shortcode collects all the posts that you have assigned certain categories in your blog posts i.e. mine was hair and beauty. So obviously change yours to ones that are appropriate. It then allocates how many posts (mine was 10), the date (in descending order,) with a large image and an excerpt of the post)
this plugin sorted me out :
http://wordpress.org/extend/plugins/add-tags-and-category-to-page/
with the standard instructions :
Upload the plugin files to the /wp-content/plugins/ directory
Activate the plugin through the 'Plugins' menu in WordPress
Use the setting page of the plugin from Settings > Add Tags And Category For Page.

Replacing WordPress core functionality with a plugin

I'm creating a WordPress plugin for a custom menu layout. I am well aware that I could just as easily implement this menu directly into the theme and I've read up quite thoroughly on the features and limitations of wp_nav_menu(), plus I have already tried and tested every plugin already created for replacing the default WordPress menu.
I wish to use a plugin since my client will be implementing this on several different WordPress sites, many of which run on different themes - and most of those are themes which I did not create and I do not wish to re-write their code in case they update the theme in the future.
When I've looked into a way to implement the menu into the theme I found that there are only two good methods since there is no hook or filter called at menu display time. The first is to change the theme to look for the plugin (this is similar to the method used by PixoPoint and many other menu plugins):
header.php:
if(function_exists('pixopoint_menu')){
pixopoint_menu();
} else {
wp_nav_menu();
}
The second method is a walker class:
plugin.php:
class my_walker_class Extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
/*
* Etc. Etc.
*/
}
}
header.php:
wp_nav_menu( Array( 'walker' => 'my_walker_class' ) );
However as you'll note both of these methods require a modification to the standard header.php file.
Ideally I would like to simply replace the wp_nav_menu() function if my plugin is loaded, as this would give my plugin support for the majority of themes without having to edit any of the theme files. Is there a good way to do this? Or is there a better way to write a menu plugin which I am not seeing?
You can use the wp_nav_menu_args filter to modify the arguments passed to wp_nav_menu, so you can specify your custom walker class.
add_filter('wp_nav_menu_args', 'my_wp_nav_menu_args_filter');
function my_wp_nav_menu_args_filter($args = array()) {
$args['walker'] = new my_walker_class();
return $args;
}

Resources