ThePixelMe

You can add a javascript snippet to close it, like it:

(function($) {
    var menuLink = $('.main-navigation a');
    var siteNavWrapper = $('.site-navigation-wrapper');

    menuLink.on('click', function() {
        siteNavWrapper.removeClass('is-visible');
    });
})(jQuery);

Note: you need to enqueue that snippet after jQuery because it relies on jQuery lib.

A good example of what I mean is at wuxiaworld.com

Okay, so we want:

— get the categories
—- get the posts inside each category (maximum of 2)
——get the excepts for each post.

default state of posts is hidden; only show when their category is clicked.

.

And the code references for each of those:

— get_categories ()
—- get_posts()
——the_except()

and we can use some basic css + javascript for the hide/show thing

.

As for the foreach loop, just nest your posts’ foreach loop inside your categories’ foreach loop, like so:

foreach($categories as $category) {
    // some stuffs here

    foreach($posts as $post) {
        // some stuffs here
    }
}

Not as complicated as it seems.

.

.

Here’s a demo I made, in case you need a working, basic example:

I grabbed the default theme Twenty Sixteen and created a child-theme call Twenty Sixteen Child. Then I create a custom page template call tpl-test.php to test this out. Here are the codes:

custom.js — basic scripts to add/remove class on click (to hide/show content)
functions.php — enqueue the parent theme & enqueue child-theme’s custom.js
styles.css — child-theme name and some basic styles
tpl-test.php — where the main codes for expandable/collapsible posts lies

.

And the result: http://i.imgur.com/VwDEwxo.gifv

This is just the barebone version, but it can get you started.

You can add these to your custom CSS area or your child-them CSS file:

For the menu tabs:

.pws_tabs_controll {
    text-align: center;
}

For the content inside the tabs:

.pws_tab_single {
    width: 100%;
}

I’m going to base this reply off the site at https://www.storquest.com/ that you’ve linked in your original post.

All I see on that site is a theme, some contact forms, and a store locator. It isn’t very complicated. About 1 or 2 weeks for design, then 2 or 3 weeks for coding, plus 1 week for QA/bug fixes, it’s possible to finish something like that in around 4 to 6 weeks.

.

Theme
The theme should be custom coded. You can base it off Underscores Starter Theme (it’s pretty much the official starter theme for WordPress) or Genesis Framework (if you’re into dealing with child themes).

Don’t use a pre-made theme. Only when dealing with low-budget projects (around $1000 or $2000 USDs) should we resort to a pre-made themes; they’re bad news in general.

Since you’ve never mention the budget in your original post, I’ll assume that the client has adequate budget–around $10000 to $15000 USDs. That’s enough to build a custom theme for the client.

.

Plugin

Store locator plugin — If you Google/Bing search for “WordPress store locator plugin” (without the quotes), I’m sure you’ll find many plugins to use.

Advanced Custom Field (Free or Pro) — Your client will need to edit the content of the site without your help. And this makes it easy for you to implement custom fields for those content.

Contact Form 7 (free option) or Gravity Form (paid option) — That example site has many contact forms. Anyone of these would satisfy that need.

Also, Redux Framework is an option if you wish to give your client some control over the theme, but I generally dislike allowing the client too much control over the theme. They’ll ruin it. Better to not allow them those customization in the first place.

.

That’s pretty much it.

Color background
I have by Custom CSS the color of the letters already in white, but I don’t get the background in black..

I have this: .page{
background-color:#000000;
}

I got a part of the background of the site in black, maar as you see, i part stays in white, how can I change that?

You missed the background-color of several other elements:

.site,
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.page-content {
    background-color: #000;
}

Size sidebar:

I want to change the widht of the sidebar. It must by widhter, because I want my opening hours on the same rule and now it is on 2 rules.

This will work, see the css comments to see which block of codes does what:

@media screen and (min-width: 1008px) {

    /* move site-content a bit to the right to leave room for larger sidebar */
    .site-content {
        margin-left: 240px;
    }

   /* increase width of sidebar */
    #secondary {
        width: 180px;
    }
}

This should work:

div.widget_search button[type="submit"] {
    background: #37474F !important;
}

Just add font-size to that code, like this:

#intro h4 {
    text-align: center;
    font-size: 24px;
}

Change the number as you see fit.

You can add this to your custom CSS area or child-theme’s CSS:

/**
 * Make header image and header menu
 * stay side-by-side, each take 50% of container's width
 */

.site-header-main {
    float: right; /* stick header menu container to the right */
    max-width: 50%; /* limit menu's width to 50%, giving the other 50% to header image */
}

.header-image {
    clear: none; /* remove parent clearing to work with header menu's float */
    max-width: 50%; /* limit image's width to 50% of the container, giving the other 50% to header menu */
}

.site-header {
    clear: both; /* clear header menu float */
}