Theme conflict with Jobs and experts

Hello. I've just installed Jobs & Experts on Ecofoot.fr and I've created a test job and an expert profile test. But there's a display bug in the job page & profile page : https://www.eco***t.fr/job/assistant-direction/

https://static.livechatinc.com/8801096/P5923PCV0Z/213443be1e6a9c6a6a326a42edaf0ed9/display%20bug.jpg

It's a conflict with my theme, there is any option to overcome this issue?

  • Katya Tsihotska

    Hi Anthony

    Hope you're having a great day!

    Since this is dealing with more advanced coding topics, I'm going to ping our SLS Team (code experts) to get their valuable feedback on this issue. One of our SLS members will reply back here as soon as more information is available.

    Please keep in mind that our SLS Team deals with more complicated issues, thus it may take a little longer for them to reply here. Thank you for your patience while we look into this further.

    Kind regards,
    Katya

  • Lindeni Mahlalela

    Hello Anthony

    I hope you are doing great today. Thank you for reporting this issue to us and thank you for your patience while we were looking into it.

    I have checked your theme and the Jobs & Pros plugin and found that the issue is related to the use of the WordPress filter 'the_title' which both the theme and the plugin use. The theme uses this to add the twitter card title in the page using the following line in the 'header.php' file of your theme:

    <meta name="twitter:title" content="<?php the_title(); ?>">

    While the plugin uses changes the output of the_title() to add some HTML used as the controls that look like this:

    The main issue here is that the_title() function was intended for use in the content section top render the title of the page in the output, it was not intended for use outside the <body> tag where HTML is not required. To solve this issue, the header.php file needs to be adjusted to make use of another function that does not render HTML because the_title() function on renders HTML by default which is the reason why the HTML was misplaced in the page. So here is what I tried:

    1. In the file 'header.php' change the line that adds the twitter:title meta to the page from:

    <meta name="twitter:title" content="<?php the_title(); ?>">

    To

    <meta name="twitter:title" content="<?php echo esc_html( get_the_title() ); ?>">
    OR
    <meta name="twitter:title" content="<?php the_title_attribute(); ?>">

    Because both 'the_title_attribute()' and 'get_the_title()' only returns the title text only and not the HTML used for styling it in the body. Both these two functions work but there is still an issue with the Jobs & Pros controls disappearing on the page, this lead me to try the following.

    2. The theme uses the WordPress loop outside the <body> in the <head> tag which is also misplaced because also the loop is intended for displaying posts in the body. The theme has this line in the head:

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    This should be in the body to make sure the theme does not cause any conflict with other plugins that rely on the loop. To make sure that the theme's twitter card is generated correctly and the Jobs and Pros plugin works correctly, I have rearranged the code in the header.php so that the twitter card is generated outside the loop, even though the loop should be called from the body but I have kept it in the head as done by the theme author as I am not sure about the reasons they have done that. I am positive their reason was to use the_title() function, if that was the only reason they it will be very safe to move this to the body. So here is how the code looks now in the header:

    <?php if ( is_single() ) { ?>
    <meta property="og:type" content="article" />
    <!-- Loop Removed from here to below -->
    <meta property="og:description" content="<?php echo strip_tags(get_the_excerpt()); ?>" />
    <meta name="twitter:card" content="summary">
    <meta name="twitter:url" content="<?php the_permalink(); ?>">
    <meta name="twitter:title" content="<?php echo esc_html( get_the_title() ); ?>">
    <meta name="twitter:title" content="<?php the_title_attribute(); ?>">
    <meta name="twitter:description" content="<?php echo strip_tags(get_the_excerpt()); ?>">
    <!-- Loop Moved here so that twitter card is outside the loop and does not rely on the_title() function -->
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    The code does not seem to require the use of the loop in the body, it should be as simple as:

    if (is_single()){ ?>
        <!-- Twitter Meta Tags -->
    <?php }
    else{?>
    <meta property="og:description" content="<?php bloginfo('description'); ?>" /><?php
    }

    I have applied the necessary fix to resolve the conflict between the theme and the Jobs and Pros plugin but if you can show this to the theme author so they can include it in an update to avoid breaking your site again. Alternatively you can create a child theme and copy the header.php file of your theme into your child theme and modify it as outlined above, you can also use the Child Theme Configurator plugin to generate a child theme from your WordPress admin dashboard - only remember to copy and modify the header.php and copy your settings before activating.

    I have applied the fix and tested the conflict and it seems to be resolved according to my tests but please do some tests on your side and let us know if you encounter any problems and we will be happy to assist in any way possible.

    Have a nice day.
    Lindeni