Support » Theme: OceanWP » Disable post title and breadcrumb in blog header

  • Hello

    I want to resolve two issues.

    1. I want to disable the post title and breadcrumbs in the blog post header. Not in pages though. Only in blog posts.

    2. In the post meta, I want to replace icons with texts. I.e., replace the author icon with the text ‘Author’ and replace the Modified icon with the text ‘Updated on’.

    I really appreciate any help.

    Thanks

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter sysguides

    (@sysguides)

    I resolved 1st point by disabling breadcrumb in Customize -> General Options -> Page Title and unchecking ‘Enable Breadcrumbs’. Title I disabled using the CSS code:

    .single h1.page-header-title {
        display: none;
    }

    I still need to resolve 2nd point.

    Thanks

    Hi @sysguides , it’s awesome you were able to resolve the first issue. For the second issue, you will have to make some modifications to your child theme’s functions.php and create a post meta file under child-theme/partials/single. Please note that implementing these changes requires a sound knowledge of PHP. If you’re unfamiliar with PHP and WordPress development, please seek help from a professional.
    To modify the default meta displayed, for example Author, please copy the meta file found under OceanWP/partials/single to the child-theme/partials/single folder. (Please create the folders following the same structure if they are not present in the child theme directory). Once the file is copied, please modify the desired meta in the foreach loop.
    For example, to change the way the Author meta is displayed, you can modify this snippet in the foreach loop:
    <?php if ( 'author' === $section )
    Please let me know if you need more help.

    Thread Starter sysguides

    (@sysguides)

    @sansolo, Thanks for the reply.

    Is this for the whole site or just for blog posts? I don’t want to change icons for the whole site. I only want to change icons to text in blog posts only that too for meta under the post title.

    On the webpage ‘Inspect’ mode, I can change it from .icon-user:before { content: "\e005" } to .icon-user:before { content: "By "; }.

    But if I copy the same code to css file, nothing happens.

    Thanks

    @sysguides , if you look at the meta file mentioned above, the file has this code at line #13:

    // Get meta sections.
    $sections = oceanwp_blog_single_meta();

    The code is fetching blog_single_meta, so you can be assured it won’t affect pages or any custom post types.

    However, if you prefer the CSS approach, there are a few ways.
    The CSS you tried did not work because that code needs Unicode characters and will not work with plain text.
    To replace the icon with “By” try this code:
    .icon-user:before{content: "\42 \79";}
    To replace the icons with text on the posts list page and the single post itself,
    you can use css selectors. For example, the posts lists page has <body class="blog"....
    Single blog post has <body class="single-post"...
    So to target the icons on the posts list page only, you can use
    .blog .icon-user:before{content: "\48 \69";}
    Similarly you can target the single post icons using CSS selectors.
    You can use this tool to convert plain text to unicode (UTF-8) https://r12a.github.io/app-conversion/
    Please let me know if you need more assistance.

    • This reply was modified 4 months, 2 weeks ago by sansolo.
    • This reply was modified 4 months, 2 weeks ago by sansolo.
    • This reply was modified 4 months, 2 weeks ago by sansolo.
    Thread Starter sysguides

    (@sysguides)

    @sansolo Thank you for putting up with me. I’m not a PHP programmer, but from what I understood and did are the following:

    mkdir -p oceanwp-child-theme-master/partials/single
    cp -arv oceanwp/partials/single/* oceanwp-child-theme-master/partials/single/
    vim oceanwp-child-theme-master/partials/single/meta.php

    and for author changed from

     <?php if ( 'author' === $section ) { ?>
       <li class="meta-author"<?php oceanwp_schema_markup( 'author_name' ); ?>><span class="screen-reader-text"><?php esc_html_e( 'Post author:', 'oceanwp' ); ?></span><i class="<?php echo $theme_icons[ 'user' ][ $icon_t ]; ?>" aria-hidden="true"></i><?php echo esc_html( the_author_posts_link() ); ?></li>
      <?php } ?>

    to this

     <?php if ( 'author' === $section ) { ?>
       <li class="meta-author"<?php oceanwp_schema_markup( 'author_name' ); ?>><span class="screen-reader-text"><?php esc_html_e( 'Post author:', 'oceanwp' ); ?></span>By <?php echo esc_html( the_author_posts_link() ); ?></li>
      <?php } ?>

    and for modified changed from

      <?php if ( 'mod-date' === $section ) { ?>
       <li class="meta-mod-date"<?php oceanwp_schema_markup( 'modified_date' ); ?>><span class="screen-reader-text"><?php esc_html_e( 'Post last modified:', 'oceanwp' ); ?></span><i class="<?php echo $theme_icons[ 'm_date' ][ $icon_t ]; ?>" aria-hidden="true"></i><?php echo esc_html( get_the_modified_date() ); ?></li>
      <?php } ?>

    to this

      <?php if ( 'mod-date' === $section ) { ?>
       <li class="meta-mod-date"<?php oceanwp_schema_markup( 'modified_date' ); ?>><span class="screen-reader-text"><?php esc_html_e( 'Post last modified:', 'oceanwp' ); ?></span>Updated <?php echo esc_html( get_the_modified_date() ); ?></li>
      <?php } ?>

    I tried this on my local WordPress test site and it’s working superbly. If what I’ve done is correct and if you say go forward, I’ll apply it to the production website.

    Thanks

    • This reply was modified 4 months, 2 weeks ago by sysguides.

    @sysguides glad it works. This is correct. You can make the changes to the production website 🙂

    Thread Starter sysguides

    (@sysguides)

    @sansolo Thank you very much. Really appreciate the help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.