Skip to:
Content
Pages
Categories
Search
Top
Bottom

Please help me add this div html to BB header somehow


  • cosmiclove1978
    Participant

    @cosmiclove1978

    Hi,

    Please can anyone help me add this DIV html code to the header (all BB pages but not on my WP)

    This div is supposed to be full width and should look like this page here when implemented.

    The actual URL where I’d like this to take form is frenchtasticpeople[DOT]com[SLASH]lab. And ideally, this header will be shown all all pages of the forum but not on my WP site.

    Full disclosure: I’ve read some documentation here, and can create a bb childtheme and copy paste and move php code around if shown what to insert and where to add it. I truly appreciate your assistance.

    <div id="pg-70016-0" class="panel-grid panel-has-style" data-style="{"class":"banner row","background_image_attachment":false,"background_display":"tile","row_stretch":"full-stretched-padded","cell_alignment":"flex-start"}" data-ratio="1" data-ratio-direction="right">
    <div class="banner row siteorigin-panels-stretch panel-row-style panel-row-style-for-70016-0" data-stretch-type="full-stretched-padded">
    <div id="pgc-70016-0-0" class="panel-grid-cell" data-weight="1">
    <div id="panel-70016-0-0-0" class="so-panel widget widget_custom_html panel-first-child panel-last-child" data-index="0" data-style="{"background_image_attachment":false,"background_display":"tile"}"><div class="textwidget custom-html-widget"><img alt="Herman" height="96" width="96" data-src="https://356259.smushcdn.com/255537/wp-content/uploads/learn-press-profile/1/bd882ec1e4a6fe8b6b83e4bb85be5c26.jpg?lossy=1&strip=1&webp=1" class="avatar avatar-96wp-user-avatar wp-user-avatar-96 photo lazyloaded" src="https://356259.smushcdn.com/255537/wp-content/uploads/learn-press-profile/1/bd882ec1e4a6fe8b6b83e4bb85be5c26.jpg?lossy=1&strip=1&webp=1"><noscript><img alt="Herman" src="https://356259.smushcdn.com/255537/wp-content/uploads/learn-press-profile/1/bd882ec1e4a6fe8b6b83e4bb85be5c26.jpg?lossy=1&strip=1&webp=1" class="avatar avatar-96wp-user-avatar wp-user-avatar-96 photo" height="96" width="96" /></noscript> <div class="pmpro_logged_in_welcome_wrap">
    <h3 class="pmpro_member_display_name">
    Welcome, <a href="https://frenchtasticpeople.com/membership-account/">Herman</a> </h3>
    </div> 
    <div class="media-12 columns">
    <h1 class="page-title">
    Bonjour
    </h1>
    <div class="row">
    <div class="media-10 small-12 media-offset-1 columns">
    <p class="text-3x text-center">
    <i class="fas fa-sync-alt"></i>   Update your account easily   <i class="fas fa-search"></i>   Browse the entire course library   <i class="far fa-hand-pointer"></i> Choose any lesson you want for free  <br> <i class="fas fa-download"></i> Download resources   <i class="fas fa-tools"></i>   Practice your French skills in the lab   <i class="fas fa-user-headset"></i> Get premium support
    </p>
    <div class="dashboard-quick-links">
    Quick Nav Links:
    <ul class="button-link-list">
    <li class="quick-nav-item nav-item-1">
    <a href="https://frenchtasticpeople.com/courses/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Course Library</a></li>
    <li class="quick-nav-item nav-item-2">
    <a href="https://frenchtasticpeople.com/user-profile/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Enrolled Courses</a></li>
    <li class="quick-nav-item nav-item-3">
    <a href="https://frenchtasticpeople.com/files/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Work Files</a></li>
    <li class="quick-nav-item nav-item-4">
    <a href="https://frenchtasticpeople.com/course-category/core-vocabulary/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Core Vocabulary</a></li>
    <li class="quick-nav-item nav-item-5">
    <a href="https://frenchtasticpeople.com/course-category/extended-french-vocabulary/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Extended Vocabulary</a></li>
    <li class="quick-nav-item nav-item-6">
    <a href="https://frenchtasticpeople.com/course-category/basic-french-vocabulary-videos/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Vocab Video Tutorials</a></li>
    <li class="quick-nav-item nav-item-7">
    <a href="https://frenchtasticpeople.com/course-category/french-grammar-glossary/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Grammar Glossary</a></li>
    <li class="quick-nav-item nav-item-8">
    <a href="https://frenchtasticpeople.com/course-category/free-french-grammar-course-challenge/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Grammar Bootcamp</a></li>
    <li class="quick-nav-item nav-item-9">
    <a href="https://frenchtasticpeople.com/course-category/most-used-french-verbs-part-1/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">French Verbs (1)</a></li>
    <li class="quick-nav-item nav-item-10">
    <a href="https://frenchtasticpeople.com/french-course-outlines" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Course syllabuses</a></li>
    <li class="quick-nav-item nav-item-11">
    <a href="https://frenchtasticpeople.com/french-course-guidelines/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Course Guidelines</a></li>
    <li class="quick-nav-item nav-item-12">
    <a href="https://frenchtasticpeople.com/buy-amazon-french-books/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Amazon</a></li>
    <li class="quick-nav-item nav-item-13">
    <a href="https://frenchtasticpeople.com/french-course-outlines" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Manage Account</a></li>
    <li class="quick-nav-item nav-item-14">
    <a href="https://frenchtasticpeople.com/french-course-guidelines/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Edit Profile</a></li>
    <li class="quick-nav-item nav-item-15">
    <a href="https://frenchtasticpeople.com/lab/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Practice Lab</a></li>
    </ul>
    </div>
    </div>
    </div>
    </div></div></div>
    </div>
    </div>
    </div>
Viewing 7 replies - 1 through 7 (of 7 total)

  • Robin W
    Moderator

    @robin-w

    This should get you most of what you want

    add_action( 'bbp_template_after_forums_index' , 'rew_add_extra_text' ); 
    add_action( 'bbp_template_after_single_forum' , 'rew_add_extra_text' ); 
    add_action( 'bbp_template_after_single_topic'  , 'rew_add_extra_text' ); 
    
    function rew_add_extra_text () {
    ?>
    <div id="pg-70016-0" class="panel-grid panel-has-style" data-style="{"class":"banner row","background_image_attachment":false,"background_display":"tile","row_stretch":"full-stretched-padded","cell_alignment":"flex-start"}" data-ratio="1" data-ratio-direction="right">
    <div class="banner row siteorigin-panels-stretch panel-row-style panel-row-style-for-70016-0" data-stretch-type="full-stretched-padded">
    <div id="pgc-70016-0-0" class="panel-grid-cell" data-weight="1">
    <div id="panel-70016-0-0-0" class="so-panel widget widget_custom_html panel-first-child panel-last-child" data-index="0" data-style="{"background_image_attachment":false,"background_display":"tile"}"><div class="textwidget custom-html-widget"><img alt="Herman" height="96" width="96" data-src="https://356259.smushcdn.com/255537/wp-content/uploads/learn-press-profile/1/bd882ec1e4a6fe8b6b83e4bb85be5c26.jpg?lossy=1&strip=1&webp=1" class="avatar avatar-96wp-user-avatar wp-user-avatar-96 photo lazyloaded" src="https://356259.smushcdn.com/255537/wp-content/uploads/learn-press-profile/1/bd882ec1e4a6fe8b6b83e4bb85be5c26.jpg?lossy=1&strip=1&webp=1"><noscript><img alt="Herman" src="https://356259.smushcdn.com/255537/wp-content/uploads/learn-press-profile/1/bd882ec1e4a6fe8b6b83e4bb85be5c26.jpg?lossy=1&strip=1&webp=1" class="avatar avatar-96wp-user-avatar wp-user-avatar-96 photo" height="96" width="96" /></noscript> <div class="pmpro_logged_in_welcome_wrap">
    <h3 class="pmpro_member_display_name">
    Welcome, <a href="https://frenchtasticpeople.com/membership-account/">Herman</a> </h3>
    </div> 
    <div class="media-12 columns">
    <h1 class="page-title">
    Bonjour
    </h1>
    <div class="row">
    <div class="media-10 small-12 media-offset-1 columns">
    <p class="text-3x text-center">
    <i class="fas fa-sync-alt"></i>   Update your account easily   <i class="fas fa-search"></i>   Browse the entire course library   <i class="far fa-hand-pointer"></i> Choose any lesson you want for free  <br> <i class="fas fa-download"></i> Download resources   <i class="fas fa-tools"></i>   Practice your French skills in the lab   <i class="fas fa-user-headset"></i> Get premium support
    </p>
    <div class="dashboard-quick-links">
    Quick Nav Links:
    <ul class="button-link-list">
    <li class="quick-nav-item nav-item-1">
    <a href="https://frenchtasticpeople.com/courses/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Course Library</a></li>
    <li class="quick-nav-item nav-item-2">
    <a href="https://frenchtasticpeople.com/user-profile/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Enrolled Courses</a></li>
    <li class="quick-nav-item nav-item-3">
    <a href="https://frenchtasticpeople.com/files/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Work Files</a></li>
    <li class="quick-nav-item nav-item-4">
    <a href="https://frenchtasticpeople.com/course-category/core-vocabulary/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Core Vocabulary</a></li>
    <li class="quick-nav-item nav-item-5">
    <a href="https://frenchtasticpeople.com/course-category/extended-french-vocabulary/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Extended Vocabulary</a></li>
    <li class="quick-nav-item nav-item-6">
    <a href="https://frenchtasticpeople.com/course-category/basic-french-vocabulary-videos/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Vocab Video Tutorials</a></li>
    <li class="quick-nav-item nav-item-7">
    <a href="https://frenchtasticpeople.com/course-category/french-grammar-glossary/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Grammar Glossary</a></li>
    <li class="quick-nav-item nav-item-8">
    <a href="https://frenchtasticpeople.com/course-category/free-french-grammar-course-challenge/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Grammar Bootcamp</a></li>
    <li class="quick-nav-item nav-item-9">
    <a href="https://frenchtasticpeople.com/course-category/most-used-french-verbs-part-1/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">French Verbs (1)</a></li>
    <li class="quick-nav-item nav-item-10">
    <a href="https://frenchtasticpeople.com/french-course-outlines" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Course syllabuses</a></li>
    <li class="quick-nav-item nav-item-11">
    <a href="https://frenchtasticpeople.com/french-course-guidelines/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Course Guidelines</a></li>
    <li class="quick-nav-item nav-item-12">
    <a href="https://frenchtasticpeople.com/buy-amazon-french-books/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Amazon</a></li>
    <li class="quick-nav-item nav-item-13">
    <a href="https://frenchtasticpeople.com/french-course-outlines" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Manage Account</a></li>
    <li class="quick-nav-item nav-item-14">
    <a href="https://frenchtasticpeople.com/french-course-guidelines/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Edit Profile</a></li>
    <li class="quick-nav-item nav-item-15">
    <a href="https://frenchtasticpeople.com/lab/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Practice Lab</a></li>
    </ul>
    </div>
    </div>
    </div>
    </div></div></div>
    </div>
    </div>
    </div>
    <?php
    
    }

    Put this in your child theme’s function file –

    ie wp-content/themes/%your-theme-name%/functions.php

    where %your-theme-name% is the name of your theme

    or use

    Code Snippets


    cosmiclove1978
    Participant

    @cosmiclove1978

    Thanks so much for this, Robin. Will give it a try and see how it goes.

    #Grateful


    cosmiclove1978
    Participant

    @cosmiclove1978

    Hi Robin,

    I’m sad to report that the code provided had no effect on my site.
    I inserted it Code Snippet but no effect.

    screenshot of the part to be changed

    I guess my real question is how to change theme/WP header on pages specifically displaying forum content? Some other participant here had something to say about it https://bbpress.org/forums/topic/wordpress-header-on-bbpress/ and claimed to have been successful (?)

    Will you vouch for it as well or do you have have something else you can help me implement?

    TIA


    Robin W
    Moderator

    @robin-w

    The link you showed is for version 1 of bbpress, which is no longer relevant.

    changing the header is theme specific, you’d be looking at finding the header.php file in the theme, creating a child theme and then yu would use something like

    is_bbpress()

    in thee code to check if tis was a bbpress page

    eg

    if (is_bbpress()) {
    ?>
    <div id="pg-70016-0" class="panel-grid panel-has-style" data-style="{"class":"banner row","background_image_attachment":false,"background_display":"tile","row_stretch":"full-stretched-padded","cell_alignment":"flex-start"}" data-ratio="1" data-ratio-direction="right">
    <div class="banner row siteorigin-panels-stretch panel-row-style panel-row-style-for-70016-0" data-stretch-type="full-stretched-padded">
    <div id="pgc-70016-0-0" class="panel-grid-cell" data-weight="1">
    <div id="panel-70016-0-0-0" class="so-panel widget widget_custom_html panel-first-child panel-last-child" data-index="0" data-style="{"background_image_attachment":false,"background_display":"tile"}"><div class="textwidget custom-html-widget"><img alt="Herman" height="96" width="96" data-src="https://356259.smushcdn.com/255537/wp-content/uploads/learn-press-profile/1/bd882ec1e4a6fe8b6b83e4bb85be5c26.jpg?lossy=1&strip=1&webp=1" class="avatar avatar-96wp-user-avatar wp-user-avatar-96 photo lazyloaded" src="https://356259.smushcdn.com/255537/wp-content/uploads/learn-press-profile/1/bd882ec1e4a6fe8b6b83e4bb85be5c26.jpg?lossy=1&strip=1&webp=1"><noscript><img alt="Herman" src="https://356259.smushcdn.com/255537/wp-content/uploads/learn-press-profile/1/bd882ec1e4a6fe8b6b83e4bb85be5c26.jpg?lossy=1&strip=1&webp=1" class="avatar avatar-96wp-user-avatar wp-user-avatar-96 photo" height="96" width="96" /></noscript> <div class="pmpro_logged_in_welcome_wrap">
    <h3 class="pmpro_member_display_name">
    Welcome, <a href="https://frenchtasticpeople.com/membership-account/">Herman</a> </h3>
    </div> 
    <div class="media-12 columns">
    <h1 class="page-title">
    Bonjour
    </h1>
    <div class="row">
    <div class="media-10 small-12 media-offset-1 columns">
    <p class="text-3x text-center">
    <i class="fas fa-sync-alt"></i>   Update your account easily   <i class="fas fa-search"></i>   Browse the entire course library   <i class="far fa-hand-pointer"></i> Choose any lesson you want for free  <br> <i class="fas fa-download"></i> Download resources   <i class="fas fa-tools"></i>   Practice your French skills in the lab   <i class="fas fa-user-headset"></i> Get premium support
    </p>
    <div class="dashboard-quick-links">
    Quick Nav Links:
    <ul class="button-link-list">
    <li class="quick-nav-item nav-item-1">
    <a href="https://frenchtasticpeople.com/courses/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Course Library</a></li>
    <li class="quick-nav-item nav-item-2">
    <a href="https://frenchtasticpeople.com/user-profile/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Enrolled Courses</a></li>
    <li class="quick-nav-item nav-item-3">
    <a href="https://frenchtasticpeople.com/files/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Work Files</a></li>
    <li class="quick-nav-item nav-item-4">
    <a href="https://frenchtasticpeople.com/course-category/core-vocabulary/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Core Vocabulary</a></li>
    <li class="quick-nav-item nav-item-5">
    <a href="https://frenchtasticpeople.com/course-category/extended-french-vocabulary/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Extended Vocabulary</a></li>
    <li class="quick-nav-item nav-item-6">
    <a href="https://frenchtasticpeople.com/course-category/basic-french-vocabulary-videos/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Vocab Video Tutorials</a></li>
    <li class="quick-nav-item nav-item-7">
    <a href="https://frenchtasticpeople.com/course-category/french-grammar-glossary/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Grammar Glossary</a></li>
    <li class="quick-nav-item nav-item-8">
    <a href="https://frenchtasticpeople.com/course-category/free-french-grammar-course-challenge/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Grammar Bootcamp</a></li>
    <li class="quick-nav-item nav-item-9">
    <a href="https://frenchtasticpeople.com/course-category/most-used-french-verbs-part-1/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">French Verbs (1)</a></li>
    <li class="quick-nav-item nav-item-10">
    <a href="https://frenchtasticpeople.com/french-course-outlines" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Course syllabuses</a></li>
    <li class="quick-nav-item nav-item-11">
    <a href="https://frenchtasticpeople.com/french-course-guidelines/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Course Guidelines</a></li>
    <li class="quick-nav-item nav-item-12">
    <a href="https://frenchtasticpeople.com/buy-amazon-french-books/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Amazon</a></li>
    <li class="quick-nav-item nav-item-13">
    <a href="https://frenchtasticpeople.com/french-course-outlines" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Manage Account</a></li>
    <li class="quick-nav-item nav-item-14">
    <a href="https://frenchtasticpeople.com/french-course-guidelines/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Edit Profile</a></li>
    <li class="quick-nav-item nav-item-15">
    <a href="https://frenchtasticpeople.com/lab/" title="French courses that makes it easy for you to practice your French anytime, from anywhere and at a very affordable cost.">Practice Lab</a></li>
    </ul>
    </div>
    </div>
    </div>
    </div></div></div>
    </div>
    </div>
    </div>
    <?php
    
    }

    cosmiclove1978
    Participant

    @cosmiclove1978

    Wait what…Version 1 ?! oh my! (facepalm)!

    Thanks, Robin, for this. I’ll update bbpress on my site and run the code you’ve provided.

    merci!


    cosmiclove1978
    Participant

    @cosmiclove1978

    Wohoo! Works like a charm! thanks so very much, Robin. Thank you, thank you, thank you!


    Robin W
    Moderator

    @robin-w

    great – glad we got there !!

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