Tag: WordPress

  • How to change Elementor Header via custom code

    Hello Folks, ever need to change the Elementor header via custom code. Or need extra conditions, that elementor-pro do not provide?

    Assuming, you are using Elementor and Elementor-Pro

    First, we hook into ‘elementor/theme/before_do_{$locations}’

    $location is our ‘header’

    add_action( 'elementor/theme/before_do_header', 'custom_maybe_change_elementor_header' );

    Then in our callback function, we first remove the default location header.

    This location seems like an array where the chosen header is going to be printed.

    Here

    1. $obj is ElementorPro\Modules\ThemeBuilder\Classes\Locations_Manager Object
    2. 10 is the header ID we want to replace. You can either inspect the header element in the front end or edit the header in Theme Builder and find the desired header ID.
    $obj->remove_doc_from_location( 'header', '10');

    Then, we add our preferred header ID e.g. 12

    $obj->add_doc_to_location( 'header', '12');

    Note, if you do not remove the applied header first, then both headers will show up, Maybe this is not what you want.

    Overall our custom_maybe_change_elementor_header() function will look likes this

    function custom_maybe_change_elementor_header( $obj ): void { 
            // ElementorPro\Modules\ThemeBuilder\Classes\Locations_Manager Object
    	$obj->remove_doc_from_location( 'header', 232816 ); // Global Header - pages with banner
    	$obj->add_doc_to_location( 'header', 250048 ); // Global Header - pages without banner
    }

    You can have your various conditions based on your situation, to hook the before_do_header

    Lets say, there is a query string (www.example.com/?activate=yes, in the home page, where the header is applied to entire site. But you can check that condition to to apply other header, only when there is a query string in URL.

    add_action('init', function() {
    
        $is_activate = isset( $_GET['activate'] ) && $_GET['activate'] === 'yes';
       
        if( $is_activate ) {
             add_action( 'elementor/theme/before_do_header', 'custom_maybe_change_elementor_header' );
        }
    
    });

    As always, you can place this code in your child theme functions.php file at the end.

    Hope, this helps to someone. Good bye.

  • WooCommerce Show Reviews in Separate Standalone Page

    WooCommerce Show Reviews in Separate Standalone Page

    Hi Folks, it is me again. Sometimes we want to show all reviews (perhaps only 5 ⭐⭐⭐⭐⭐) in a separate page for our end users. Obviously to make our customers we have many great 5 star reviews.

    I could not find a perfect solution for this. So, I made a quick shortcode function to acheive this.

    Lets start, shall we?

    Following codes can be put into your child theme > functions.php file

    First we create our shortcode

    add_shortcode( 'woo_reviews', 'show_reviews' );

    Then we define our shortcode function

    function show_reviews( $atts ) {
    
    $atts = shortcode_atts( array(
    'rating' => '',
    'product' => '',
    ), $atts, 'woo_reviews' );
    
    // set up meta query to filter by rating if specified
    $meta_query = array();
    if ( $atts['rating'] ) {
    $meta_query[] = array(
    'key' => 'rating',
    'value' => $atts['rating'],
    'compare' => '='
    );
    }
    
    $comments_query = new WP_Comment_Query( array(
    'post_type' => array( 'product' ),
    'post__in' => $atts['product'],
    'meta_query' => $meta_query,
    ) );
    
    // Output buffer to capture wp_list_comments
    ob_start();
    
    if ( ! empty( $comments_query->comments ) ) {
    echo '<div class="woocommerce">';
    echo '<div id="reviews">';
    echo '<div id="comments">';
    echo '<ol class="commentlist">';
    wp_list_comments( apply_filters( 'woocommerce_product_review_list_args', array( 'callback' => 'woocommerce_comments' ) ), $comments_query->comments );
    echo '</ol>';
    echo '</div>';
    echo '</div>';
    echo '</div>';
    } else {
    echo '<p>No reviews found.</p>';
    }
    
    return ob_get_clean();
    }

    Oh by the way you can do following things as well

    [woo_reviews rating="5"]
    [woo_reviews product="33,34"]
  • LearnPress Lesson Template Changes : Part 2

    LearnPress Lesson Template Changes : Part 2

    This is the new and updated version of my article here: LearnPress Lesson Template Changes

    I got to admit, it is quite simpler in terms of files than before.
    Turns out it is now possible to edit with only CSS and make our Header and Footer show in current implementation of LearnPress plugin.

    WordPress Version : 5.7.2
    Theme Twenty Twenty-One : 1.3
    LearnPress Version : 4.0.7

    Quick Start

    Here, is the fast answer you need and keep on moving.

    /*Learn Press Lesson Template Design Changes*/
    html {
        overflow: visible !important;
    }
    
    #popup-course {
        position: relative !important;
        flex-wrap: wrap;
    }
    
    #popup-course > div {
        position: relative;
        flex-basis: 100%;
    }
    
    #popup-course #popup-header {
        position: absolute !important;
    }
    
    #popup-course #popup-content {
        flex-basis: calc(100% - 475px) !important;
    }
    
    #popup-course #popup-footer {
        position: absolute !important;
    }

    Contain the width

    Now if the lesson content area is full width, and you want it contained, like the header and footer, we need to do more. Not necessarily important, but could be helpful to someone.

    Lets contain the main section

    main#main {
        max-width: var(--responsive--alignwide-width); // this is the max-width you want your container to be e.g.1170px
        margin: 0 auto;
        border: 1px solid;
    }
    

    Lets make the curriculum sidebar smaller around 300px.

    #popup-course #popup-sidebar {
        flex: 0 0 300px !important;
    }
    #popup-course #popup-sidebar .course-curriculum {
        width: 300px !important;
    }
    

    After that compensate the “300px” width to lesson’s header, footer, toggle collapse arrow

    #popup-course #popup-header,
    #popup-course #popup-footer,
    #popup-course #sidebar-toggle {
        left: 300px !important;
    }
    

    And finally adjust toggled case

    body.lp-sidebar-toggle__close #popup-course #popup-sidebar {
        flex: 0 0 0 !important;
    }
    
    body.lp-sidebar-toggle__close #popup-course>#sidebar-toggle,
    body.lp-sidebar-toggle__close #popup-course #popup-header,
    body.lp-sidebar-toggle__close #popup-course #popup-footer {
        left: 0 !important;
    }
    

    P.S. For responsive, you’re on your own. 🙂

  • Could not insert post into the database

    Could not insert post into the database

    It was actually funny when it happened to me. I just can’t seem to find the way to insert post in WordPress via coding. I looked into Google, here and there, support forums, you know all the desperations.

    Not knowing anything about it, I then went to see the log(debug.log) file of WordPress and found this:

    register_post_type was called <strong>incorrectly</strong>. Post type names must be between 1 and 20 characters in length. Please see <a href="https://wordpress.org/support/article/debugging-in-wordpress/">Debugging in WordPress</a> for more information. (This message was added in version 4.2.0.) in /app/public/wp-includes/functions.php on line 5167

    Well folks, the answer was right there, the post_type name should not exceed 20 chars in length 🙂

  • LearnPress Lesson Template Changes

    LearnPress Lesson Template Changes

    This is an old article and might not work in the newer version. Please see the updated article here.

    Many of you including me, must at least once have come upon this cumbersome task – To change the LearnPress Lesson Template. Where are my headers, menus and Footers?
    And as a loyal Google users, we’ve search adding every related words, search every forums to this task only to be frustrated and exhausted. No help from lord Google

    And so I decided to take it all by myself. And finally, was able change this stubborn LearnPress lesson template. So here below the procedure I followed or simply say how I’d overcome this task.
    Hope some of you might benefit from this.

    CAVEAT – If you know basic PhP, WordPress and HTML and CSS then only proceed with caution.
    What have worked in my case, might not work in your case.

    And then versions
    WordPres Version: 5.2.2
    LearnPress Version: 3.2.5.6

    Here below is the default template design of the LearnPress where both header and footer are hidden by the lesson list and its content.

    Now, Let’s find which file in LearnPress plugins are responsible for this lesson template from top to bottom.

    plugins/learnpress/templates/content-single-item.php – is the main lesson template
    plugins/learnpress/templates/single-course/content-item.php – holds lesson’s content and lesson header
    plugins/learnpress/templates/single-course/content-item/header.php – holds the top search form
    plugins/learnpress/templates/single-course/tabs/curriculum.php – holds curriculum left lists

    Behind The Scene

    They have done it by targeting ID of the elements and making them fixed and absolute position. So first let’s change the “id” of the elements so that they could not target with their js/css code. To do so, we have to copy the individual files in our theme file, creating a directory called “learnpress”. If you see at the top of each file, they are suggesting and in their own words.

    This template can be overridden by copying it to yourtheme/learnpress/content-single-course.php


    File #1 – plugins/learnpress/templates/content-single-item.php – is the main lesson template
    Nothing to do here and not going into details here, but this below code is responsible for loading the contents (left lists, search header and lesson content)

    do_action( 'learn-press/single-item-summary' );

    File 2 – plugins/learnpress/templates/single-course/content-item.php – holds lesson’s content and lesson header

    <div id="learn-press-content-item"> to <div id="learn-press-content-item-custom">
    <div class="content-item-scrollable"> to <div class="content-item-scrollable-custom">

    Here we just changed the “id” adding “-custom” so that LearnPress js/css would not apply to this div


    File #3 – plugins/learnpress/templates/single-course/content-item/header.php – holds the top search form

    <div id="course-item-content-header"> to <div id="course-item-content-header-custom">
    <div class="content-item-scrollable"> to <div class="content-item-scrollable-custom">

    Here also, added “-custom” so their js/css would not apply. Note if you look at the top of this file, they are suggesting to put this file in learnpress/single-course/header.php but actually it should be learnpress/single-course/content-item/header.php


    File #4 – plugins/learnpress/templates/single-course/tabs/curriculum.php – holds curriculum left lists

    <div class="course-curriculum" id="learn-press-course-curriculum"> to <div class="course-curriculum" id="learn-press-course-curriculum-custom">

    At this point, your page will be broken in terms of css but hold on. The good part comes later. Let’s add some styles.

    /** * learnpress lesson custom css * * Important but you can change it as per your design */
    html,
    body {
        overflow: unset !important;
    }
    
    div#learn-press-course {
        display: flex;
        margin-left: -20px;
    }
    
    div#learn-press-course-curriculum-custom,
    #learn-press-content-item-custom {
        margin-left: 20px;
    }
    
    div#learn-press-course-curriculum-custom {
        flex-basis: 35%;
    }
    
    #learn-press-content-item-custom div#course-item-content-header-custom {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
    }
    
    /* * Not Important * * Some inner content design but you should be fine now adding whatever you want in your design */
    #course-item-content-header-custom .course-item-search form {
        display: flex;
    }
    
    #course-item-content-header-custom .course-item-search button:after {
        font-family: fontawesome;
        content: "\f002";
    }
    
    #course-item-content-header-custom .course-title {
        margin: 0;
        padding: 0;
        font-size: 1em;
    }

    After all above changes, you should get the following design, where you will have all your header and footer same as other pages in your site and the lessons as the content within the page. Of course, for twentyseventeen theme I had to bump the content width with css.

    Hence, good luck, this is just the tip of the iceberg. I know, if you had to change this design, then, probably you must have whole other level of changes to be done but yeah my part is done here and your’s has just started.

    P.S. A twentyseventeen theme, Com on, Give me real world example. You might say, so for you my friend here is the screenshot below of Eduma Theme I had to work on. Gotcha!

    Final note: Most themes using LearnPress will add additional styles based on the “id” so after changing the “id” you have to add design again by yourself. Just copy and paste the related css comparing before design and put them in your css file. I had to redesign some of the elements like headings, icons, ul, li, font-size, line-height to make same as original theme design. So please be aware of that before you make changes.