• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Foodie Pro

  • FAQ
  • Bloggers
  • Layouts
  • Recipes
  • Contact
menu icon
go to homepage
  • Bloggers
  • Recipes
  • FAQ
  • Contact
  • Subscribe
    • Terms & Conditions
    • Privacy policy
    • Disclaimer
    • Facebook
    • Instagram
    • Twitter
  • subscribe
    search icon
    Homepage link
    • Bloggers
    • Recipes
    • FAQ
    • Contact
    • Subscribe
      • Terms & Conditions
      • Privacy policy
      • Disclaimer
    • Facebook
    • Instagram
    • Twitter
  • ×

    Home → Lunch

    Sample Post to Explore Foodie's Style

    Published: Jan 6, 2016 · Updated: Jan 17, 2022 by Feast Design Co. · This post may contain affiliate links · Leave a Comment

    Above this paragraph should be the H1 heading for your web page. Do not use H1 within your blog post area. The first paragraph is there to tell your readers what the recipe is about, and entice them to read further. Make it punchy!

    Inside of this test data section, you'll find most of the basic HTML and XHTML and CSS styles that you might use within your WordPress Theme.

    This is the H2 Heading

    Headings are meant to make your content easily scanable by your readers. We recommend breaking down content by sections that people typically scan by such as:

    • ingredients
    • instructions
    • nutrition and calories
    • substitutions
      • gluten free
      • dairy free
      • low carb

    H2 headings should be used to separate chunks of your post text.  It also helps search engines to scan your content easily and serve up keyword-rich content to people searching for you.  Always start with H2 and then if you need to divide up a chunk of content further, use your H3.

    Cooking Tips

    • This is a sample cooking tips list
    • tip #2
    • tip #3
    • and then we wrap it up

    This is the H3 Heading

    We recommend avoiding h3 headings whenever possible

    Learn the best practices for optimizing images!

    Do not use h4 headings

    H4 headings are generally too nuanced for recipes and unnecessary.

    • General Lists using the <ul> tag
    • Ordered Lists using the <ol> tag
    • And that's the end of the lists

    And we’ve just tested a paragraph before and after a general list along with a nested list to help you see what at least three levels of the list will look like. Make sure that each level of the list is styled to match your specific needs.

    You might want to use the default disc or circle, or you might want to add graphic bullets to your list, too.

    Do not use h5 headings

    H5 headings are generally too nuanced for recipes and unnecessary.

    We also need to look at the other two lists and then add some images and other styles to flesh out your WordPress site.

    1. You need to do this first.
    2. You need to do this second.
      • You could do this in between.
      • Or give this a try, too.
    3. But this is the third and last thing to do.

    And here is another paragraph to show the relationship between the various parts and pieces.

    Do not use h6 headings

    H6 headings are generally too nuanced for recipes and unnecessary.

    See the modern guidelines for page headings for how to properly structure recipe posts.

    This is another H2 Heading

    This is a test of the WordPress captioning system. This is a test of the WordPress captioning system. This is a test of the WordPress captioning system.

    Let's take a look at how images work in the theme. Typically, most food bloggers are going to use full-width centered images within the body of a post, but we'll explore the right and left alignment options here just in case. This photo is using the medium image size and is aligned to the right. In order to clear the space below this image, I'm going to use the "clear" div class in the text editor for this post. Otherwise, things would look very misaligned.

    A centered image is a little different. It is centered in the middle and the text is pushed above and below it. This is the way we prefer food bloggers to use images: full-width and centered.

    How to add the CSS styles for images is discussed in the Codex article, Using Images.

    Testing Font Looks

    You will need to test the looks of the different font styles, too. This is bold and THIS IS BOLD. This is italic and THIS IS ITALIC. This is bold and italic and THIS IS BOLD AND ITALIC. This is code and THIS IS CODE. And now let’s look at what the PRE tag, also known as the preformatted tag, looks like:

    This is the pre tag.
    It should be formatted as written
         so if you add spaces to the front of the line
      it will show the spaces and the <code> as written

    This should be back to the normal paragraph style and we hope you have been paying attention to the margins and padding around each element, including the paragraph, so you can position things appropriately to the rest of the content.

    Your CSS Here

    Let’s look at the blockquote, one of the most common tags used in most blogs. It is designed to “frame” a quote from another blog, website, or reference that you are “quoting” from. For the most part, there are three examples of usage:

    This is a simple quote. It is either preceded or followed by a link within the text to the credited source. A blockquote must be designed to stand out from the rest of the text content, but it does not have to “really” stand out, just separate itself from the content so we know it’s not your words.

    Each website is unique with it’s own look and feel for the various parts and pieces. This cut and paste section looks only at what you might have within your content section. So if you will have boxes for lists or little aside information, you will need to add them so you can see how they will look in the overall page layout.

    Some elements in a WordPress Theme are controlled by the style sheet, while others are controlled by the Template files. Try to work on as much as you can from the style sheet first, then you can mess with the template files.

    Remember, any changes you make to the style sheet and template files will be not available if you change themes. If you want them carried over, you will need to copy and paste them into the new Theme folder.

    More Lunch Recipes

    • Example Post Showing Block Editor ("Gutenberg") Styling
    • Get the Garnish Intensive Discovery Workshop!
    • Put Your Best "Food" Forward with A Great Theme
    • Download Your Free Checklist Right Here!

    Reader Interactions

    Leave a Reply Cancel reply

    You must be logged in to post a comment.

    Primary Sidebar

    We also have the full width modern homepage demo.

    Welcome, Y'all!

    headshot of Shay Bocks

    You've got a divine gift designed to serve the world. It's a special something – small and mighty – that merges passion with purpose, and purpose with joy.

    This simple yet powerful belief is why I've built my design business out of a desire to serve, and why I feel most alive when I'm taking your business, blog, or product to places that soar.

    More about me →

    This demo site has enhanced customizations from the Feast Plugin that are not included in the theme. For a demo site that doesn't use the Feast Plugin, visit FoodieProClassic.com

    FEATURES

    Genesis 3.3 + HTML5 Markup + Mobile Responsive! Customizer options for color & typography, Recipe card styling, Widgetized Home & Recipe pages, Upload your own custom background, Upload your own header design, Create your own custom menus, Featured Images, Fixed width design

    theme sale, click to view offer

    We recommend:

    • Hosting from WPEngine or Bigscoots
    • Domains from NameCheap
    • Recipe Plugin from WP Recipe Maker or Tasty Recipes

    Popular

    • Example Post Showing Block Editor ("Gutenberg") Styling
    • Get the Garnish Intensive Discovery Workshop!
    • Put Your Best "Food" Forward with A Great Theme
    • Download Your Free Checklist Right Here!

    You can duplicate your homepage's trending recipes section in the sidebar to reinforce the internal linking.

    We no longer recommend using a search bar, newsletter form or category drop-down menu in the sidebar. See the Modern Sidebar post for details.

    If the block editor is not narrower than usual, simply save the page and refresh it.

    Footer

    ↑ back to top

    About

    • Privacy Policy
    • Disclaimer
    • Terms & Conditions
    • Accessibility Policy
    • Tutorials
    • Customization

    Newsletter

    • Sign Up! for emails and updates

    Contact

    • Contact
    • Services
    • Media Kit
    • FAQ

    Brand + web designer. I’ve built my design business out of a desire to serve, and why I feel most alive when I’m taking your business, blog, or product to places that soar. 

    Let's dig in →

    Copyright © 2023 Foodie Pro on the Foodie Pro Theme with the Feast Plugin

    Copyright © 2023 Foodie Pro on the Foodie Pro Theme