HTML tags < class="mk-metro-portfolio-title"> appearing incorrectly in my WordPress website

General
1

I’m encountering a problem on my WordPress website where some HTML tags are appearing incorrectly as < class="mk-metro-portfolio-title"> instead of <div class="mk-metro-portfolio-title">. This issue is causing unexpected formatting in certain parts of my site.

Here’s what I’ve observed and tried so far:

Issue Details: When inspecting the HTML code of the affected pages, I noticed that certain tags are missing the

prefix, resulting in < class="mk-metro-portfolio-title"> instead of <div class="mk-metro-portfolio-title">.

Context: I’m using a WordPress theme and possibly some plugins that manage portfolio or custom post type displays. The incorrect tags seem to be related to these sections of my site.

Troubleshooting Steps Taken:

Inspected theme files (wp-content/themes/your-theme-name/) and plugin files but couldn’t pinpoint where these tags are being generated. Reviewed functions.php for any modifications related to portfolio or custom post types but didn’t find any direct cause. Expected Outcome: I need assistance in identifying where these incorrect tags are being generated so that I can correct them to <div class="mk-metro-portfolio-title">.

Could someone please guide me on how to locate and edit the source of these tags within WordPress? Any advice on where to look or how to troubleshoot this issue would be greatly appreciated.

2

The issue you’re encountering suggests that the HTML structure in your WordPress theme or plugin is being improperly rendered, most likely due to:

  1. Theme or Plugin Code Error: A function or template file might be generating incorrect HTML.
  2. Shortcode or Page Builder Syntax: If you’re using a page builder or shortcode to generate content, it could be misconfigured or contain a typo.
  3. Plugin Conflict: A plugin may be altering or incorrectly filtering the HTML output.

Here’s a step-by-step guide to identify and resolve the issue:

1. Identify the Source of the HTML

  • Inspect the Affected Pages:
    • Use the browser’s developer tools (Ctrl+Shift+I or Cmd+Option+I) to inspect the element with the issue.
    • Note any specific classes or identifiers (e.g., mk-metro-portfolio-title) and track where this element is being used.
  • Search the Theme Files:
    • Go to Appearance > Theme Editor (or access your files via FTP/SFTP).
    • Search for the string mk-metro-portfolio-title across the theme files.
grep -r "mk-metro-portfolio-title" wp-content/themes/your-theme-name/
  • Check archive.php, single.php, content.php, or any template files related to portfolio/custom post types.
  • Search in Plugin Files:
    • If the feature is part of a plugin, navigate to the plugin directory and search for the string.
grep -r "mk-metro-portfolio-title" wp-content/plugins/

2. Verify Dynamic Content Generation

  • If the incorrect HTML is generated dynamically via PHP functions:
    • Check for the use of echo, printf, or return in combination with dynamic HTML generation in theme/plugin files.
    • Look for a missing <div> tag before the class attribute.

For example:

echo '< class="mk-metro-portfolio-title">';

Should be:

echo '<div class="mk-metro-portfolio-title">';

3. Debug Functions.php or Custom Hooks

  • Check functions.php:
    • Look for any custom code that modifies the content of portfolio posts or custom post types.
    • Search for filters like add_filter() or actions like add_action() that might alter the HTML.
  • Check for Filters and Hooks:
    • Search for filters applied to the_content, post_class, or other similar hooks.

4. Test for Plugin Conflicts

  • Disable Plugins:
    • Temporarily disable all plugins except those necessary for your theme.
    • Check if the issue persists. If it resolves, re-enable plugins one by one to identify the culprit.
  • Test with a Default Theme:
    • Switch to a default theme like Twenty Twenty-One and check if the issue is theme-specific.

5. Correct the HTML

Once you locate the source:

  • Replace the incorrect tag with the proper <div> tag.
  • If you cannot directly edit the plugin or theme files:
    • Use a child theme to override the template file.
    • Create a custom filter to correct the output.

6. Additional Tools

  • Query Monitor Plugin:
    • Install and activate the Query Monitor plugin to trace which template files or functions are being called.
  • Code Snippets Plugin:
    • Use the Code Snippets plugin to test fixes without directly editing theme files.

Let me know if you need help analyzing specific code snippets or template structures!