Code Snippets for this theme

Tyyppi: Opastus
Esillä 10 viestiä, 1 - 10 (kaikkiaan 10)
  • Julkaisija
    Artikkelit
  • #727
    Tapio_xTapio_x
    Avainmestari

    I put to this topic code snippets and CSS, which I have used in this site just giving some advice for other developers.

    All codes are not exactly the same as in my site. In some cases I have put more reasonable attributes and CSS-rules, which I have used in this site.

    I have put all codes by using the plugin Code Snippet. It is very easy to use that plugin. The main advance compared with using child-themes are following:

    1. You don’t need to use FTP.
    2. You can easily create different versions. Just deactivate/activate snippets.
    3. If you put CSS as Code Snippet, WordPress save it just once – if yuo use Custom CSS and you have big CSS-files and you alter them of often, the size of the database can grow immerse.

    Hint. I have cleared the CSS of my theme and put the CSS as a Code Snippet. I have used the cleared field as testing, if the syntax of the CSS is correct. The Code Snippet plugin does not have syntax checker for CSS.

    Serious syntax errors in CSS might totally break the layout. Serious CSS and JavaScript syntax errors might also break important behaviors, especially visual editor is sensitive for syntax errors. Be carefull with JavaScript and CSS. Code Snippet has some level syntax highlight, but that issue could be better.

    Of course HTML syntax errors might also break the layout.

    Code Snippet checks PHP-errors. For frontend it is not possible to create invalid PHP-code.

    There is a big danger. If you create invalid PHP-code for backend, the only way to correct this issue is to edit the database and delete incorrect database record! If you don’t have database access to the database of your site, don’t make any backend code snippets and be sure that all code snippets are only for frontend!

    Please don’t comment in this topic – create a new topic, if you have some comments.

    Voit vaihtaa ulkoasun toisen näköiseksi. Kokeile eri väriteemoja (siniharmaa, harmaasävy ja tumma)!

    #728
    Tapio_xTapio_x
    Avainmestari

    Here example code for breadcrumbs both to the top and bottom of the page with post articles and other pages.

    function printBreadcrublist($value){
    if($value==’top’){
    echo ‘<div id=”breadcrumblist-top” class=”breadcrumblist breadcrumblist-top”>’;
    echo bcn_display();
    echo ‘</div>’;
    }else{ return ‘<div id=”breadcrumblist-bottom” class=”breadcrumblist breadcrumblist-bottom”>’.bcn_display(true).'</div>’;}
    }

    function change_the_content($content) {
    $additional=’…’; // if you want to add something else
    return printBreadcrublist(‘top’).$content.$additional.printBreadcrublist(‘bottom’);
    }

    add_filter( ‘the_content’, ‘change_the_content’,10);

    For bbPress it is easy to set top and bottom breadcrumbs with bbp style pack. But if you want to set different CSS for the top and bottom breadcrumbs you must use own code. I made bottom breadcrumbs with my own code:

    function breadcrumbsBottom(){
    echo ’<div id=”bottombreadcrumbs”>’;
    echo bbp_breadcrumb();
    echo ’</div>’;
    }
    add_action( ’bbp_template_after_forums_index’ , ’breadcrumbsBottom’);
    add_action( ’bbp_template_after_single_forum’ , ’breadcrumbsBottom’);
    add_action( ’bbp_template_after_single_topic’ , ’breadcrumbsBottom’);

    The disadvantage of this code is that you mus first define common CSS for top and bottom breadcrumbs and override some CSS for the bottom breadcrumbs.

    If you don’t like that disable breadcrumbs and set also top breadcrumbs by using your own code. The following code should work (I have not tested it):

    function breadcrumbsTop(){
    echo ’<div id=”topbreadcrumbs”>’;
    echo bbp_breadcrumb();
    echo ’</div>’;
    }
    add_action( ’bbp_template_before_forums_index’ , ’breadcrumbsTop’);
    add_action( ’bbp_template_before_single_forum’ , ’breadcrumbsTop’);
    add_action( ’bbp_template_before_single_topic’ , ’breadcrumbsTop’);

    In order to get consistent result, set for breadcrumbs for normal pages and for forum using the same CSS. I defined separators as same:

    <span class=”bbp-breadcrumb-sep”> > </span>

    Below is some CSS, which I have defined for them. For home icons and for separators I have used Dashicons.

    .breadcrumblist a.home span, a.bbp-breadcrumb-home {
    font-size: 0!important;
    overflow: hidden;
    text-decoration: none!important;
    }
    .bbp-breadcrumb-home::before, .breadcrumblist a.home span::before {
    content: ”\f102”;
    font: 400 .9rem/1 dashicons;
    content: ”\f102”;
    position: relative;
    top: 1px!important;
    }
    .breadcrumblist .bbp-breadcrumb-sep {
    padding: 3px;
    }
    .bbp-breadcrumb-sep {
    font-size: 0!important;
    }
    .bbp-breadcrumb-sep::before {
    content: ’\f345’;
    font: 400 .8rem/1 dashicons;
    position: relative;
    top: .2rem;
    }

    _______________

    Note. I have added with WordPress functions also other texts before of after the main content. In the forum area using these function:

    add_action( ’bbp_template_before_forums_index’ , ’toBottom’);
    add_action( ’bbp_template_before_single_forum’ , ’toBottom’);
    add_action( ’bbp_template_before_single_topic’ , ’toBottom’);

    In normal pages using echo inside some function everything goes to top of the page regardless if the function call is before or after $content variable. Using return it is possible to put content also to the bottom of the page.

    Voit vaihtaa ulkoasun toisen näköiseksi. Kokeile eri väriteemoja (siniharmaa, harmaasävy ja tumma)!

    #730
    Tapio_xTapio_x
    Avainmestari

    Originally this theme had search button on the top right only for normal search. I made quite the same looking form also for forum area.

    In these example codes I translated all Finnish texts in English.

    JavaScript – just simple open/close:

    function showSearch() {
    var x = document.getElementById(”search-form-bbpress”);
    if (x.style.display === ”none”) {x.style.display = ”block”;} else {x.style.display = ”none”;}
    document.getElementById(”bbp_search-bbpress”).focus();} // focus to the search field, not to the entire form

    HTML (as shortcode):

    function generateSearch(){
    return ’<div id=”forum-search”>
    <div id=”click”><a class=”click” href=”#” onclick=”showSearch();return false;”></a>
    <span class=”screen-reader-text”>Search from forums</span></div>
    <div id=”search-form-bbpress” style=”display:none;background-color:#044774″ class=”search-form-bbpress link-wrapper-search search-box-wrapper-bbpress”><form role=”search” method=”get” class=”search-form-bbpress” action=”https://www.sanaristikkofoorumi.net/wordpress/forums/search/”><div&gt;
    <label class=”screen-reader-text hidden” for=”bbp_search”>Search:</label>
    <input type=”hidden” name=”action” value=”bbp-search-request” />
    <input type=”search” placeholder=”Search from forum” value=”” name=”bbp_search” id=”bbp_search-bbpress” class=”search-field-bbpress” /></div></form></div>’;
    }
    add_shortcode( ’showHideSearch’, ’generateSearch’ );

    Some of the related CSS (some issues are slightly different in my forum):

    .search-toggle::before, body.bbpress #click a::before {
    height: 48px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    overflow: hidden;
    right: 0;
    content: ”\f400”;
    display: block;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
    }

    div#search-container,
    .search-form-bbpress {
    position:fixed!important;
    top:0px!important;
    z-index:10000000000000000000000000000
    }
    body.bbpress .search-form-bbpress #bbp_search-bbpress {
    margin-top:13px;
    height:22px;
    float:right;
    margin-right:14px!important;
    background-color:white!important;
    color:#333!important;
    }

    In my case other values depends on viewport. Width and right position could be also the same for all viewport values. Font for mobile version is following:

    font: 100 24px/1 Genericons;

    ________________

    Note. I have use the same kind of closing, opening function also for many other cases. If the element doesn’t have style=”display:none”, must define in CSS-stylesheet the same issue and JavaScript must be different. For example this show/hide social login box:

    function showSocialLogins() {
    var x = document.getElementById(”oa_social_login-2”);
    if (x.style.display === ”block”) { x.style.display = ”none”;} else {x.style.display = ”block”;}}

    Voit vaihtaa ulkoasun toisen näköiseksi. Kokeile eri väriteemoja (siniharmaa, harmaasävy ja tumma)!

    #731
    Tapio_xTapio_x
    Avainmestari

    Logins, which use Dashicons has this PHP-code:

    function renderLogin(){
    $logged=is_user_logged_in();
    $currentUrl=’https://&#8217; . $_SERVER[’HTTP_HOST’] . $_SERVER[’REQUEST_URI’];
    if($logged){
    $loginlogo='<div id=”login-logo”><a id=”log-out-link” href=”https://www.sanaristikkofoorumi.net/wordpress/wp-login.php?action=logout&redirect_to=&#8217;.$currentUrl.'”>&nbsp;</a></div>’;} else{
    $loginlogo='<span id=”social-login”><a href=”#” onclick=”showSocialLogins();return false;”></a></span><div id=”login-logo”><a id=”log-in-link” href=”https://www.sanaristikkofoorumi.net/wordpress/wp-login.php?action=login&redirect_to=&#8217;.$currentUrl.'”>&nbsp;</a></div>’;}
    return $loginlogo;
    }
    add_shortcode( ’loginit2’, ’renderLogin2’ );

    I created them with PHP in order to get reliable working redirect value. CSS for desktop and mobile is quite different. Dashions are following:

    #login-logo a::after{
    content: ”\f345\f110”;
    text-shadow:2px 2px 2px black;
    color:#fff;
    }
    body.logged-in #login-logo a::after{
    content: ”\f110\f345”;
    }

    Voit vaihtaa ulkoasun toisen näköiseksi. Kokeile eri väriteemoja (siniharmaa, harmaasävy ja tumma)!

    #732
    Tapio_xTapio_x
    Avainmestari

    I had difficulties to get working CSS for Create new topic and Edit Profile links. I created for them my own solution.

    function bsp_profile_linkOwn ($type,$text) {
    if (!is_user_logged_in()) return ;
    $current_user = wp_get_current_user();
    $user=$current_user->ID ;
    if($type==”long”){$class=”subscription-toggle edit-profile”;}else {$class=”edit-profile”;}
    if($text){$text=”Edit your profile”;}
    return ’<a class=”’.$class.'” href=”’ . esc_url( bbp_get_user_profile_url( $user) ) . ’”><span>’.$text.'</span></a>’;
    }

    function newTopic(){

    // if (!is_user_logged_in()) return ; – add this if needed
    echo ’<div class=”beforelist”><a href=”#new-post” class=”subscription-toggle subsricption-toggle-new subsricption-toggle-new-topic”><span>New topic</span></a>’.bsp_profile_linkOwn(”long”,”Edit your profile”).'</div><div class=”speciallinks”><a href=”#new-post” class=”subsricption-toggle-new subsricption-toggle-new-topic”></a>’.bsp_profile_linkOwn(””,””).'</div>’;
    }

    function newPost(){

    //if (!is_user_logged_in()) return ; – add this if needed
    echo ’<div class=”beforelist”><a href=”#new-post” class=”subscription-toggle subsricption-toggle-new subsricption-toggle-new-post”><span>New comment</span></a>’.bsp_profile_linkOwn(”long”,”Edit your profile”).'</div><div class=”speciallinks”><a href=”#new-post” class=”subsricption-toggle-new subsricption-toggle-new-post”></a>’.bsp_profile_linkOwn(””,””).'</div>’;
    }

    add_action( ’bbp_template_before_single_forum’ , ’newtopic’);
    add_action( ’bbp_template_before_single_topic’ , ’newPost’);

    There are two versions. One for desktop and another for mobile. That’s why I don’t put related CSS about these. You can look at the mobile layout from here.

    Voit vaihtaa ulkoasun toisen näköiseksi. Kokeile eri väriteemoja (siniharmaa, harmaasävy ja tumma)!

    #733
    Tapio_xTapio_x
    Avainmestari

    Some text can’t translate by using language files. I have translated them this way:

    function change_translate_text( $translated_text ) {
    if ( $translated_text == ’Unapprove’ ) {
    $translated_text = ’Älä hyväksy’;
    }
    if ( $translated_text == ’Report’ ) {
    $translated_text = ’Raportoi’;
    }


    return $translated_text;
    }
    add_filter( ’gettext’, ’change_translate_text’, 20 );

    Voit vaihtaa ulkoasun toisen näköiseksi. Kokeile eri väriteemoja (siniharmaa, harmaasävy ja tumma)!

    #734
    Tapio_xTapio_x
    Avainmestari

    If text is in single row, it is easy to shorten text with CSS, for example breadcrumbs:

    .bbp-breadcrumb-current, .breadcrumblist .current-item {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    top: 5px;
    }

    This doesn’t work with multiline texts. For them must use jQueries:

    jQuery(document).ready(function($){
    $(’.bsp_freshness_display_title’).each(function() {
    if(this.innerHTML.length >40)
    this.innerHTML = this.innerHTML.slice(0,37) + ’…’;})
    $(’.bbp-reply-topic-title’).each(function() {
    if(this.innerHTML.length >40)
    this.innerHTML = this.innerHTML.slice(0,37) + ’…’;})
    $(’.bbp-topic-permalink’).each(function() {
    if(this.innerHTML.length >40)
    this.innerHTML = this.innerHTML.slice(0,37) + ’…’;})
    })

    Voit vaihtaa ulkoasun toisen näköiseksi. Kokeile eri väriteemoja (siniharmaa, harmaasävy ja tumma)!

    #735
    Tapio_xTapio_x
    Avainmestari

    Sometimes it is needed to redirect to the top of the page. In order to get this working reliable I have set jQueries, for example these:

    jQuery(document).ready(function($) {
    $(’.search-toggle’).click(function() {
    $(window).scrollTop(0);})
    $(’.click’).click(function() {
    closeAssitantWindows();})
    $(’.search-toggle’).click(function() {
    $(window).scrollTop(0);})
    $(’.bottom-top-link’).click(function() {
    $(window).scrollTop(0);})
    })

    Voit vaihtaa ulkoasun toisen näköiseksi. Kokeile eri väriteemoja (siniharmaa, harmaasävy ja tumma)!

    #736
    Tapio_xTapio_x
    Avainmestari

    On the bottom of the mobile version is counter, which shows the current position (that helps returning back to the same place):

    window.addEventListener(’scroll’, function() {
    document.getElementById(’onscroll’).innerHTML = Math.round(pageYOffset/18); // I shortened number and took off decimals; now it counts approximately lines

    CSS without colors is the following:

    div#onscroll{
    position:fixed;
    height:34px;
    bottom:2px;
    right:0px;
    width:56px;
    border-radius:3px 0 0 3px;
    font-size:0.7rem;
    z-index:10000000000000000000000000000000;
    box-sizing:border-box;
    padding:6px 4px 0 3px;
    color:#fff;
    text-shadow:2px 2px 2px black;
    text-align:right;
    }
    div#onscroll:hover::after {
    position:absolute;
    top:-22px;
    right:0;
    display:block;
    font-size:11px;
    color:#fff;
    background-color:#333;
    padding:3px;
    white-space:pre;
    content:’Counter…’;
    font-weight:bold;
    border-radius:3px;
    }

    Voit vaihtaa ulkoasun toisen näköiseksi. Kokeile eri väriteemoja (siniharmaa, harmaasävy ja tumma)!

    #16559
    Tapio_xTapio_x
    Avainmestari

    Tässä on ”Luo uusi aihe” -painikkeen koodi. Here is my link ”Create new topic”:

    function topPostLinksEcho(){
    if(bbp_is_forum_archive() || bbp_is_single_view()){
    echo '<div class="beforelist beforelist-separate" style="width:120px!important;display:block!important" id="forums-new-topic"><a id="new-data-link" href="#" onclick="return false;" class="open-forum-list subsricption-toggle-new subsricption-toggle-new-topic subscription-toggle"><span>Uusi aihe</span></a></div>';}
    elseif(bbp_is_single_topic()){
    echo '<div class="beforelist beforelist-separate before-list-single-topic" id="forums-new-topic" style="position:absolute;left:10px;bottom:-15px;display:block!important"><a id="new-data-link" style="width:120px!important;display:block!important" href="';
    echo bbp_forum_permalink();
    echo '#new-post" class="subsricption-toggle-new subsricption-toggle-new-topic subscription-toggle" style="width:120px!important"><span >Uusi aihe </span></a></div>';
    //echo '<div class="beforelist beforelist-separate" id="single-topic-page"><a id="new-data-link" href="#new-post" class="subscription-toggle subsricption-toggle-new subsricption-toggle-new-post"><span>Uusi viesti</span></a></div>';
    }elseif(bbp_is_single_forum){
    echo '<div class="beforelist beforelist-separate" id="single-forum-page"><a style="width:120px!important;display:block!important" id="new-data-link" href="#new-post" class="subscription-toggle subsricption-toggle-new subsricption-toggle-new-topic"><span>Uusi aihe</span></a></div>';
    }
    }

    add_action( 'wp_head', function () { ?>
    <script>
    jQuery(document).ready(function($) {
    $('.open-forum-list').click(function() {
    var x0 = document.getElementsByClassName("forum-list2a")[0];
    x0.style.display = (x0.style.display === 'none') ? 'block' : 'none';})
    })
    </script>
    <?php } );

    function printForumList(){
    echo '<div class="forum-list2a forum-list-container forum-list extra-windows" style="display:none;"><ul style="padding: 10px 25px;"><li><a href=" https://www.sanaristikkofoorumi.net/'.SITEROOT.'/forums/forum/sanaristikot/#new-post">1. Sanaristikot</a><ul>
    <li style="list-style-type:none"><a href=" https://www.sanaristikkofoorumi.net/'.SITEROOT.'/forums/forum/sanaristikot/suomen-kuvalehti/#new-post">1.1. Suomen Kuvalehti</a></li>
    <li style="list-style-type:none"><a href=" https://www.sanaristikkofoorumi.net/'.SITEROOT.'/forums/forum/sanaristikot/ilta-sanomat-ja-iltalehti/#new-post">1.2 Ilta-Sanomat ja Iltalehti</a></li></ul></li>
    <li><a href=" https://www.sanaristikkofoorumi.net/'.SITEROOT.'/forums/forum/muut-aiheet/#new-post">2. Muut aiheet</a><ul>
    <li style="list-style-type:none"><a href=" https://www.sanaristikkofoorumi.net/'.SITEROOT.'/forums/forum/muut-aiheet/wordpress-bbpress/#new-post">2.1 WordPress & bbPress</a></li>
    <li style="list-style-type:none"><a href=" https://www.sanaristikkofoorumi.net/'.SITEROOT.'/forums/forum/muut-aiheet/tarinointia/#new-post">2.2 Tarinointia</a></li></ul></li>
    <li><p style="text-align:center"><a href="#" class="close-window open-forum-list">Sulje lista</a></p></li></ul><br /></div>';
    }

    add_action( 'bbp_template_before_single_view' , 'printForumList');
    add_action( 'bbp_template_before_forums_index' , 'printForumList');
    Yllä oleva koodi ei lisää painikkeita sivulle. Olen lisännyt ne muokattuun mallinteeseen lisäämällä seuraavan rivin

    <!--?php echo topPostLinksEcho(); ?-->

    This code doesn’t add buttons to the page. I have added them to modified table by adding a line.


    Jos et halua muuttaa mallinteita, lisää koodi käyttäen add_action-funtiota.

    add_action( 'bbp_template_before_single_view' , 'topPostLinksEcho'); 
    add_action( 'bbp_template_before_forums_index' , 'topPostLinksEcho');
    add_action( 'bbp_template_before_single_forum' , 'topPostLinksEcho');
    add_action( 'bbp_template_before_single_topic' , 'topPostLinksEcho');

    If you don’t want to change templates, add code by using add_action function.

    Voit vaihtaa ulkoasun toisen näköiseksi. Kokeile eri väriteemoja (siniharmaa, harmaasävy ja tumma)!

Esillä 10 viestiä, 1 - 10 (kaikkiaan 10)
  • Sinun täytyy olla kirjautunut vastataksesi tähän aiheeseen.

Etusivu Foorumit 2. Muut aiheet 2.1 WordPress & bbPress Code Snippets for this theme