Sela theme – recipe page wanted in grid layout

  • Unknown's avatar
    bettinaschelkle · Member ·

    Dear all,

    I would like to create a recipe page on my website, but as a complete newbie, I feel completely lost in how to create it (and am unfamiliar with coding, so may need the idiot’s guide!).

    Ideally, I would like to use a grid page to set up categories for recipes (e.g. desserts, starters, smoothies), so each grid corresponds to one recipe category (so first thing would be on how to extend the number of grids on the sela page). Each grid should then link to a list of recipes which then link to the recipe itself.

    Alternatively, would it be easier to categorize my blog entries (which contain recipes at the moment), creating a recipe category with recipes in the blog included like suggested on https://en.support.wordpress.com/recipes/?

    If so, can I display the blog in a way in which on the blog page it just lists the blog entries (so that through clicking a separate link you get to the actual blog entry). At the moment the blog posts are showing one after the other completely, so if you don’t scroll through all the older ones will get lost for the viewer.

    I would really appreciate comments/suggestions/help with an idiot guide on how to implement said comments/suggestions/help.

    Many thanks in advance.

    Best wishes,
    Bettina

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    You could setup a grid, but it would take some manual HTML, probably a table, and you would need to maintain all of it manually through the HTML each time you wanted to make a change. It might be worth doing if you are willing to take the time to learn the HTML and if you’re main category list won’t change often once you get it established (so it depends a little on how you setup your categories).

    Alternatively, would it be easier to categorize my blog entries (which contain recipes at the moment), creating a recipe category with recipes in the blog included like suggested on https://en.support.wordpress.com/recipes/?

    I’d recommend categorizing the recipes either way, and the recipe shortcode at https://en.support.wordpress.com/recipes/ is a good idea too but that relates to how recipes are formatted—categorizing them is separate.

    See https://en.support.wordpress.com/posts/categories/

    If so, can I display the blog in a way in which on the blog page it just lists the blog entries (so that through clicking a separate link you get to the actual blog entry).

    The display posts shortcode has a category option and could work really well for this.

    Display Posts Shortcode

  • Unknown's avatar
    bettinaschelkle · Member ·

    Many thanks for your help, it is much appreciated. I have started using tags and categories now, as well as started on changing my layout for the recipes that I have posted so far.
    Looks like setting up a grid like I want my recipe page to look like will require me to learn some HTML, so I have postponed that project for a few weeks until I have the time to get my teeth stuck into it.

    I have tried changing the outlay of my blog post page, though, by incorporating the following code both into the CSS costum code part of the sela theme and into the blog page HTML.

    [display-posts include_excerpt="true" image_size="thumbnail" wrapper="div"]
    .display-posts-listing .alignleft {
    float: right;
    margin: 0 0 5px 5px;
    }

    Both time nothing happened (I also included the code into the HTML of an individual blog post and soon noticed that this would not work). I don’t know where else to include it, so would appreciate another bit of help here, please.

    Thanks again.

  • Unknown's avatar
    designsimply · Member ·

    I checked your custom CSS and I see that you have that entire block saved into the CSS editor:

    [display-posts include_excerpt="true" image_size="thumbnail" wrapper="div"]
.display-posts-listing .alignleft {
	float: right;
	margin: 0 0 5px 5px;
}

    The first line there is what is called a shortcode and that should not be in the css editor. That part should be in a post or page.

    Try this, put just the following shortcode into a post or page draft:

    [display-posts include_excerpt="true" image_size="thumbnail" wrapper="div"]

    With regard to the CSS, it looks like you may have copy and pasted it from online and it may not match with what you’re trying to do. If you’re trying to create a grid based on that, that’s a clever idea and I hadn’t thought of that! To make it work, I will need to see the display posts list and look at the generated HTML in this specific case before I can help with anything more specific. Based on what I see in your CSS so far, it looks like this rule was designed to make images in a list from left alignment to right alignment and it doesn’t seem like that’s complete to mel.

    .display-posts-listing .alignleft {
float: right;
margin: 0 0 5px 5px;
}

    Either way, remove the shortcode from the CSS editor so only CSS is shown there and get the display posts shortcode working as your next steps.

  • The topic ‘Sela theme – recipe page wanted in grid layout’ is closed to new replies.