Scroll to Top own button

  • Resolved grindelo

    (@grindelo)


    7 years, 1 month ago

    Hey there,

    I would like to insert my own scroll to top button (.png or .jpg) in oceanwp theme. Is there a function where I can put my own png file into?
    Maybe something with this file –>

    // Get arrow
    $arrow = apply_filters( ‘ocean_scroll_top_arrow’, get_theme_mod( ‘ocean_scroll_top_arrow’ ) );
    $arrow = $arrow ? $arrow : ‘fa fa-angle-up’;

    thanks
    Grindelo

Viewing 7 replies - 1 through 7 (of 7 total)
  • TUT Support

    (@phpexpert21)

    7 years, 1 month ago

    Hello @grindelo,

    You can take the help of 3rd party plugin to achieve scroll to top. Please refer the below link-

    https://ww.wp.xz.cn/plugins/wpfront-scroll-top/

    Kind regards,

    Manoj

    Thread Starter grindelo

    (@grindelo)

    7 years, 1 month ago

    Thanks,

    the theme already has an option in the customizer for a scroll to top arrow. I would like to customize this arrow by inserting a php code just replacing the symbol of the arrow. I don’t want to install too many plugins. Do you have an idea, how to do that?

    Thanks
    Grindelo

    Amit Singh

    (@apprimit)

    7 years, 1 month ago

    @grindelo copy the oceanwp > partials > scroll-top.php file into the child theme and open it using a code editor. Edit the file and add your image as per your need to display it.

    Thread Starter grindelo

    (@grindelo)

    7 years, 1 month ago

    @amit Singh Thanks,

    Edit the file and add your image

    I already have found the php file and copied it to my child theme but I don’t know, how to insert my own image. I tried to insert the file into the code but without any success. This is what i tried:

    $arrow = apply_filters( 'ocean_scroll_top_arrow', get_theme_mod( 'ocean_scroll_top_arrow' , content_url( __FILE__ ) . 'uploads/2019/04/arrow-144-128.png' ) );
$arrow = $arrow ? $arrow : 'fa fa-angle-up';
    • This reply was modified 7 years, 1 month ago by grindelo.
    • This reply was modified 7 years, 1 month ago by grindelo.
    Amit Singh

    (@apprimit)

    7 years, 1 month ago

    You can’t use the above filter because it only changes the icon class. If you want to use a different icon class, then it is okay otherwise you need to edit the HTML and manually insert your image there. For example, replace the below line from the copied scroll-top.php file

    <span class="<?php echo esc_attr( $arrow ); ?>"></span>

    With

    <img src="add-yout-image-path" height="42" width="42">

    Upload an image in the Dashboard > media and copy the image path. Use the copied image path in the above code.

    Thread Starter grindelo

    (@grindelo)

    7 years, 1 month ago

    Hey Amit,

    this works perfectly. Thanks for your help!

    Grindelo

    Amit Singh

    (@apprimit)

    7 years, 1 month ago

    You’re welcome!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Scroll to Top own button’ is closed to new replies.