WordPress.org

Ready to get started?Download WordPress

Forums

Pilcrow
[resolved] Adding search plug-in with Pilcrow theme (35 posts)

  1. lkabor
    Member
    Posted 9 months ago #

    Can someone please tell me how to add a box so users can enter a search term at the top right-hand side of the pages on my website? I use the WordPress Pilcrow theme for my website http://www.lisakaborycha.com/. Is there a particular plug-in that works best?

  2. Hi there, could you explain a little more exactly where you want the search box? There isn't room next to your menu, but what about between your site title and the menu (search box spot #1) - or what about just below your header image (search box spot #2)?

    Screenshot: https://cloudup.com/coFHx6oj3UY

    Pilcrow's widget areas for full-width pages are only in the footer, so if you want your search box at the top the best way is going to be to make a child theme and add the search box code directly to the theme file. Have you made a child theme before? Let me know and I can point you to some guides that will help.

  3. lkabor
    Member
    Posted 9 months ago #

    Kathryn, thanks so much for this information.Search box spot#2 below the header image looks much better, good suggestion! Is there a way for the search box to show up in the same place on every page?

    I have never made a child theme before, so if you can send me some information on that I would be very grateful.

    Thanks,

    Lisa

  4. Hi Lisa, making a child theme means your changes won't be overwritten when you update the theme, since they'll be in a special protected folder. Here are some guides that will help when making your first child theme:

    http://codex.wordpress.org/Child_Themes
    http://op111.net/53/
    http://vimeo.com/49770088

    For your Pilcrow child theme, you'll first need to add the required style.css file to your child theme folder, following the format shown in the guides.

    Next, the file we want to make changes to is header.php, so make a copy of that file and place it in your child theme folder.

    What we want to do is add a bit of code to display the search form below the header graphic. The code you'll want to add looks like this:

    <?php get_search_form(); ?>

    Add this new line below line 58 in the header.php file, which is the line that looks like this:

    </div><!-- #pic -->

    This new function displays the search form - here's the Codex reference in case you're interested in reading more about it.

    The last thing we'll need to do is align the search box to the right. You can do that by adding some CSS to the styles.css file in your child theme folder:

    #searchform {
       float: right;
    }

    That results in something that looks like this on my test site:

    https://cloudup.com/cbrlKfo7E6A

    Is there a way for the search box to show up in the same place on every page?

    Yes, the search form will appear in the same spot on every page, since header.php is called in on every page.

    Let me know how it goes!

  5. lkabor
    Member
    Posted 9 months ago #

    Hi Kathryn,
    Your instructions are very precise and the screenshot of your test site looks absolutely perfect.

    I just need a little further clarification before I begin; namely, the guides say "Create a directory in your themes directory to hold the child theme" and "Open your text editor, make a new file, and paste the following into it". Are the themes directory and/or text editor functions that I can access from my dashboard or do I need to go to my server (Bluehost)to do it?

    Thanks in advance!

  6. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    Create a directory in your themes directory to hold the child theme

    That's on the server - so you can use FTP or whatever file manager BH uses to access that.

    The text editor to create the new file(s) is on your local computer - then upload those using FTP or the file manager.

  7. lkabor
    Member
    Posted 8 months ago #

    Ok, so I was finally brave enough to go to my server and create a child theme named pilcrow-child in the themes directory. I added the code suggested, so now lines 58 and 59 look like this:
    </div><!-- #pic -->
    </div><!-- #header --><?php get_search_form(); ?>

    In pilcrow-child I also created a style.css file and added the code suggested:
    #searchform {
    float: right;
    }

    When I visit my site, however, I see no search box. Have I missed a step? Did I misplace the code below line 58?

    Please help!

    Thanks,
    Lisa

  8. Hi there, the search form code needs to go before the closing #header div tag, so it should look like this:

    </div><!-- #pic -->
    <?php get_search_form(); ?>
    </div><!-- #header -->

    Let me know how it goes!

  9. lkabor
    Member
    Posted 8 months ago #

    Hi Kathryn,

    Well I did this, but still no search box on my site.
    The code looks like this now:

    line 58</div><!-- #pic -->
    line 59 <?php get_search_form(); ?>
    line 60 </div><!-- #header -->

    I have tried playing with the indentation of the code on those three lines, but still nothing happens.

    What do you suggest?

  10. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    Try clearing the SuperCache plugin on your site - that may be why it's not showing up.

  11. lkabor
    Member
    Posted 8 months ago #

    I just used SuperCache and cleared the cache, but still no search box...

  12. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    Oh, looks like you don't have the child theme activated?

  13. lkabor
    Member
    Posted 8 months ago #

    Well, aside from entering the code and clicking "save", how do I activate it?

  14. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    Under themes, find your child theme and click activate.

  15. lkabor
    Member
    Posted 8 months ago #

    Thanks for the advice. This makes sense, but when I go to my dashboard under themes I only see current theme: Pilcrow; two available themes (Twenty Thirteen and Twenty twelve); and the following: "Broken Themes
    The following themes are installed but incomplete. Themes must have a stylesheet and a template.Name Description Template is missing."

    Is there some other place I should be going to activate the child theme?

  16. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    It's likely the broken one. What's in the style.css file of your child theme? Can you copy that file here? It should only have that top section and the CSS you added.

  17. lkabor
    Member
    Posted 8 months ago #

    This is what's in the style.css:

    #searchform {
    float: right;
    }

  18. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    Ah, well, child themes have to have a bit more in that file - change what you have to this:

    /*
     Theme Name:     Pilcrow Child
     Template:       pilcrow
     Version:        1.0.0
    */
    
    @import url("../pilcrow/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    
    #searchform {
    float: right;
    }
  19. lkabor
    Member
    Posted 8 months ago #

    Thanks, now the search box is there!

    I have lost my home page header image and all my dropdown menus, however. Any idea how to get those back?

  20. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    Cool! Yeah, when you switch to a child theme you have to redo theme options and settings - but the menu will be there - just reselect and upload the header again.

  21. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    Actually, you shouldn't have to upload it again, just select it from the media library.

  22. lkabor
    Member
    Posted 8 months ago #

    Selecting the header image again is easy. I understand that, but how do I get my dropdown menus again?

  23. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    Go to Appearance > Menu - and you should see your custom menu there - just select it and save it.

  24. lkabor
    Member
    Posted 8 months ago #

    Nope, it's still not returning to the dropdown structure

    It should look like the screenshot in the first posting by Kathryn above, with search box spot #2

    Screenshot: https://cloudup.com/coFHx6oj3UY

  25. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    See if clearing your caching plugin does anything - I'd actually suggest clearing and then turning that off while you are working on your site.

  26. lkabor
    Member
    Posted 8 months ago #

    I just cleared the cache, still no dropdown menu

  27. lkabor
    Member
    Posted 8 months ago #

    also deactivated supercache

  28. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    What if you create a new one - does that work?

  29. lkabor
    Member
    Posted 8 months ago #

    I am hesitant to create a new pone, because a few months ago Kathryn had helped me organize my dropdown menu in a very specific way and I would like to get that back exactly.

    Here is the thread of that post: http://wordpress.org/support/topic/longer-drop-down-list-from-button-on-home-page?replies=6#post-4686585

  30. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    Ah, if that CSS is in JetPack custom CSS, you might need to move it to your child theme - just copy this to the child theme if it doesn't seem to be carrying over:

    .sub-menu a {
         line-height: 30px !important;
    }

    But right now, you don't have a custom menu set up from what I can see. Does anything show up if you go to Appearance > Menu - and click on Locations tab?

Reply »

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.