Support » Theme: Olsen Light » Add Search Bar

  • scullyhands

    (@scullyhands)


    Hi guys,

    Please help me solve this problem.

    On the “Mục Lục” page (the same as Achirve), I want to remove the search bar on the main menu. Then, add a new search bar right below the “Mục Lục” title. Please refer this link to see the visualization.

    How can I do that? Please help me. Thank you so much.

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Fotis

    (@markwaregr)

    Hi there,
    add this

    .page-template-template-fullwidth .site-tools .searchform{
        display:none;
    }

    in your custom CSS box then open template-fullwidth.php and paste

    <form action="<?php echo esc_url( home_url( '/' ) ); ?>" class="searchform" method="get" role="search">
    	<div>
    		<label class="screen-reader-text"><?php esc_html_e( 'Search for:', 'olsen-light' ); ?></label>
    		<input type="text" placeholder="<?php echo esc_attr_x( 'Search', 'search box placeholder', 'olsen-light' ); ?>" name="s" value="<?php echo get_search_query(); ?>">
    		<button class="searchsubmit" type="submit"><i class="fa fa-search"></i><span class="screen-reader-text"><?php echo esc_html_x( 'Search', 'submit button', 'olsen-light' ); ?></span></button>
    	</div>
    </form>

    after

    <h2 class="entry-title" itemprop="headline">
    	<?php the_title(); ?>
    </h2>

    Open the default editor and then navigate to the /themes/olsenlight/ folder to find the file.
    If you decide to proceed with this modification I would suggest you create a child theme, copy over the files you are editing and make the modifications there. This will allow your changes to survive future theme updates. If you directly edit the theme’s files, all changes will be lost once you update.

    Have a look at this guide to learn more about child themes and how to create one http://www.cssigniter.com/ignite/beginners-guide-child-themes/
    Let me know if you need additional help on this.

    scullyhands

    (@scullyhands)

    Thanks a lot. I will try this.

    Fotis

    (@markwaregr)

    Let me know if this works, or if I can help out more.

    scullyhands

    (@scullyhands)

    Hello Fotis,

    It doesn’t work. Here are steps I follow:

    1. Create child theme (follow the instruction from your link).

    2. Copy the content in style.css and functions.php from parent theme to the respective files in child theme.

    3. Activate the child theme, and my blog was broken. Please see the screenshot.

    If I don’t copy the content in style.css and functions.php from parent theme to the respective files in child theme, and just activate the child theme, these codes are always shown. Please see the screenshot.

    Please help me out as soon as possible. Thank you so much.

    Fotis

    (@markwaregr)

    Hi there,
    functions.php and style.css are probably the only files you dont need to copy.

    Both files are included, You only need to create a new style.css file in your child theme (as described in the article) and copy the file you have changed.

    scullyhands

    (@scullyhands)

    Hi Fotis,

    I followed your instructions, and it worked actually. But what I want is a search bar which helps filter the result (article) by keyword.

    For example, when I search the keyword (viết lách), all relating articles will be shown but still be in the “Mục lục” page. Currently, if I applied your code, then when I search a keyword, the results appear like this screenshot.

    I visualized my idea in this screenshot. Please take a look.

    Thank you so much.

    Fotis

    (@markwaregr)

    Hi there,
    I am afraid this is not possible, and requires coding that needs a lot of theme rewriting. Perhaps you can find a third party search plugin with the functionality you want from WordPress.org plugin repository.

    scullyhands

    (@scullyhands)

    I see. Thank you so much.

    You are welcome.

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