Home Forums Weaver Xtreme Theme How to create (or customize) a Search Result Page ?

Topic Resolution: Answered
Viewing 16 posts - 1 through 16 (of 17 total)
  • Author
    Posts
  • #65115
    Answered
    Tooni
    Participant

    Hi, I need some help on creating or customizing the default search result page.

    I have used the Google CSE search engine for several years now. For this I created a seperate page, which looks okay. However, I now want to use a different search method and I have no idea, how to customize the result page.

    Can you provide some steps how this can be done with Weaver Xtreme?

    Thank you and regards, Tooni

    #65116
    scrambler
    Moderator

    Are you saying you want to customize the look, or change search engine.

    If the former, we can help with CSS if you describe what you want.

    If the later, you would need to look for plugins or search engine that can provide you code to embed like Google.

    #65118
    Tooni
    Participant

    Thank you for offering your help! It is very much appreciated and I need it for customizing the look (or design) of a search result page. Currently I have no idea which CSS would be needed nor where to apply them?
    In my next comment I will give you two links, which will show how I think my result page should look like.

    Regards, Tooni

    #65120
    scrambler
    Moderator

    We also need the link to the search page you wish to customize.

    And in addition to an example page, please list the specific changes you want to make

    #65121
    Private Reply
    Tooni
    Participant
    This reply has been marked as private.
    #65122
    Tooni
    Participant

    For a standard wordpress search (for example) there is no specific search result page. As far as I understood, Weaver uses the “Page with Posts” template. Maybe I have to create a specific result page? With a different layout??

    #65123
    Weaver
    Keymaster

    From what I see of the (private) example links you provided, they are showing the results from what I am guessing is a shortcode to a search plugin,

    If that is the case, then providing styling support for those is probably a bit beyond the sort of support we typically provide.

    Ideally, the plugins themselves would provide some styling options.

    But to style a specific search plugin, one would need to look at the structure of the HTML output, either directly via reading the output page source, or using a browser development tool. You should be able to pick out the <div> or list blocks displaying the results. Typically, these blocks will have some html id or class associated with them. That is what you need to know to provide custom CSS to style the output.

    So, I would encourage you to try to figure out the classes on the output of the plugin, and go from there. Figuring that out will help you to be able to do such things in the future for yourself.


    @scrambler
    might be interested enough in this case to provide some suggestions if you provide specifics of what you are looking for, but since this seems to be dealing with a plugin, it is the plugin’s support that should really be answering your styling questions.

    #65124
    scrambler
    Moderator

    If you are using a plugin to generate the search page, then you should definitely first explore all the plugin options, as if we create CSS to overrule their Styling, it could break after one of their update.

    That said once you have explored all the plugin options, it there are things you are not able to change, make a precise and detailed list of what they are, and I will help with the CSS to use.

    #65126
    Tooni
    Participant

    I’m sorry, but it seems that I wasn’t able to explain my problem exactly. Let me try again:

    At this moment I’m using the Google search engine, which mainly consists of two parts: A script for the search field and a 2nd script for a result page. The result is shown im my first link.

    As I now want to remove the Google service, both will be gone. No result page anymore.
    And there is also no other search plugin. I just want to use the standard WordPress search function (widget). The result of this standard WordPress search function is shown im my second link. And this uses (as far as I understood) the “Page with Posts” template.

    So, finally there is no search plugin and I just want to know, how I can create/design/customize a search result page with the support of the Weaver Theme.

    Regards, Tooni

    #65129
    scrambler
    Moderator

    OK, so if the changes you want for the posts on the search page results are the same as for your regular post pages, you can use the theme Posts settings for that.

    If not, please make a detailed list of the exact changes you want on the Theme Search page results and I will help with CSS for that page.

     

    #65130
    scrambler
    Moderator

    As an example, below are some rules that would style some of the elements of the saerch page.

    Rules go in the Theme Global Custom CSS Rule box

    .search .page-title {font-size:1em;} /* Styles the page title */
    .search .post-title {font-size:1em;} /* Styles the Post title */
    .search .wvrx-fi-link img {max-width:15%;} /* Styles the featured image */

     

    #65131
    Tooni
    Participant

    @scrambler: Thank you for now. I will work on your suggestion tomorrow. It seems to be the right step to a solution. I will let you know the results.

    #65133
    Weaver
    Keymaster

    The search results page is a dedicated WordPress Theme page. The “loop” of the Search Results page (search.php in the theme files) is very similar in logic to the standard blog page, but with a few fewer options. The Page with Posts page template has a similar goal as the standard blog page (index.pp), but is significantly more complicated as it can apply Per Page options, while the blog, scearch, archhive, category, and tag pages can’t do that.

    There is no real way to apply options to the search page other than the few search page options found in the theme.

    The search results can show the results either as excerpts (default), or as the full post. I think the normal rules for styling a post apply to the search results page.

    So, that’s about it. @scrambler gave some initial rules to try to style the title on the search results page.

    If you really want to customize the search results page, you could create a child theme, and modify the search.php file in the child to totally customize the search results page. But at its heart, it will have a similar look to the other blog-style pages mentions above.

    #65138
    Tooni
    Participant

    @scrambler: Your CSS rules are working fine and I think, I would be able to find out some more and also do some fine tuning by myself. Thank you very much!

    However – before I start investing too much time, I want to ask an additional question:

    As far as I understood, with CSS rules I can only format/design existing elements of the output. I will not be able to add or remove some elements, e.g. I would like to remove the “bottom post info text” (like post categories or author). Furthermore I would like to specify the length of the displayed post excerpt and the amount of search results displayed on one page.

    I’m afraid all this cannot be done with a few CSS rules, right? I think to achive that, it will be necessary to follow @Weaver’s suggestion to create a child theme and using a customized search.php (and maybe also a different content.php). Unfortunately I’m not a programmer or developer and I don’t believe that I can do this.

    Or do you see any other solution?

    Regards, Tooni

    #65139
    Best Answer
    scrambler
    Moderator

    This reply has been accepted as the best answer.

    We can hide elements with CSS.

    .entry-meta is the top info line selector, and .meta-info-wrap is the bottom one. The rule below would hide both

    .search .meta-info-wrap, .search .entry-meta {display:none;}

    We cannot change the excerpt length with CSS using the WordPress method.

    A workaround would be to clip the height of the Excerpt with CSS. The rule below would do that

    .search .entry-content {overflow:hidden;max-height:100px;}

    But for a clean reduction of the number of words, you would need to go the Child theme / PHP route

    #65140
    Tooni
    Participant

    @scrambler: Thank you so much for your help and excellent suggestions!

    I added some minor modifications to your ideas and finally my CSS rules look like:

    .search .page-title {font-size:1em;} /* Styles the page title */
    .search .post-title {font-size:1.3em;} /* Styles the Post title */
    .search .wvrx-fi-link img {max-width:12%;} /* Styles the featured image */
    .search .cat-links {display:none;}
    .search .entry-summary {overflow:hidden;max-height:65px;}
    .search .entry-summary {padding-top:0.3em;}
    .search .nav-next {padding-bottom:1em;}
    .search .entry-utility {padding-bottom:0em;}

    The result shows more or less exactly what I wanted to have.
    Great support and thank you again!

    Best regards, Tooni

Viewing 16 posts - 1 through 16 (of 17 total)
  • You must be logged in to reply to this topic.