Skip to content Skip to footer

How To — Start A Food Blog — Customize WordPress

How To — Start A Food Blog — Customize WordPress

I have already imported the demo content (provided by the theme maker), personalized my WordPress settings, and installed and configured all the essential WordPress plugins. And the next step is to customize WordPress the way I want. The goal here is to create a WordPress site exactly as it is on the demo site.

Prerequisites:

  • You have purchased a domain name and web hosting plan.
  • You have installed WordPress on your server.
  • You have purchased and installed Foodie Pro Theme + Genesis Framework on your WordPress site.
  • You have imported the demo content and widgets provided by Foodie Pro.
  • You have personalized your WordPress profile and settings.
  • You have installed and configured essential WordPress plugins on your WordPress site.

So let’s get started!

1. New WordPress Dashboard

Now that’s your WordPress Dashboard after installing all the necessary plugins recommended by the theme maker.

2. WordPress Posts

If you’re really serious about blogging then “Posts” will be the most-visited section of your blog. That’s right! “Posts” lists all the blog posts (published, scheduled, private, drafts) on your blog in a reverse chronological order so that the latest blog post is always at the top. And there’s also a Trash available, so that you can recover deleted blog posts or permanently delete it.

2.1 Delete Default Blog Post

When you enter “Posts”, you can see a sample blog posted titled “Hello world!”. And if you hover your mouse over it, it will display the following quick actions: Edit, Quick Edit, Trash, View. Delete “Hello world!” as it’s just a sample blog post without any images.

2.2 Deleted Default Blog Post

After deleting the default “Hello world!” blog post by WordPress.

3. WordPress Editor

When you want to create a new blog post, simply click the “Add New” submenu under “Posts” and it will take you to the WordPress WYSIWYG (“What You See Is What You Get”) editor.

You can write content on a WordPress editor just like you do it on a Microsoft Word or Apple Pages. And you can use the “Add Media” button to upload files from your computer or from another URL.

You can start writing a blog post by entering a title in the title field and the actual content in the post editing area. Apart from that, you can also see a lot of other widgets called Publish, Format, Categories, Tags, Featured Image, etc.

You can easily minimize or expand widgets by clicking on its title bar and can reposition them using drag and drop (except the title and post editing area). Also, you can add/remove widgets using the “Screen Options” of the WordPress editor page.

For instance, if you have multiple authors on your blog then you can enable the “Author” widget so that you can change the authorship of the blog post that you’re currently editing.

The WordPress editor gives you a handful of formatting options and you can enable even more options by clicking on the “Toolbar Toggle” button (the last button in the row of formatting options).

Again, the WordPress editor offers two modes of editing: Visual and Text. You can click the appropriate tab to switch between the two. Visual mode gives you a WYSIWYG editor (similar to Microsoft Word) and you can format your blog post using the row of formatting options. Text mode lets you add HTML code along with regular text and you can switch modes accordingly.

When you finish composing a blog post, you can optionally select tags and categories to associate with the post. And if you do not wish to publish the blog post immediately then you can save it as a draft and can even publish it as a private post by changing the settings in the “Publish” widget.

Posts can also be scheduled to be published at a future time by clicking on the “Edit” next to “Publish Immediately” and selecting a future date and time. When you choose a future date and time, the “Publish” button changes to “Schedule” and you can click on it to schedule the blog post.

4. WordPress Categories

Categories as the name sounds helps to keep your blog posts organized, and also improves the user experience. You can create as many categories as you want and a blog post can be assigned to more than one category.

Categories can have a hierarchy as well. It means you can create categories and its subcategories if you want to. If you haven’t created any categories, then all blog posts will automatically be added under a default category called “Uncategorized”.

5. WordPress Tags

Tags are like keywords, and you can optionally assign tags to your blog posts (to self-explain what your blog post is about). Unlike categories, tags do not support a hierarchy. It means, there’s no relation between one tag and the other.

So, what’s the difference between a category and a tag? Well, tags are more specific while categories are typically more general in nature.

For instance, if I have a tech blog then I can organize the categories and tags like this:

Technology (Category)

  • Apple (Subcategory)
    • iPhone (tags)
    • iPad
    • Mac
    • OS X
  • Google (Subcategory)
    • Android (tags)
    • Chrome
    • Gmail
  • Microsoft (Subcategory)
    • Lumia (tags)
    • Windows Phone
    • Surface

Of course, I can create as many categories as I want but if I do that then the blog will have uncountable number of categories and it results in a poor user experience.

6. WordPress Media Library

“Media” menu takes you to the Media Library. It shows all the media files — images, videos, etc. — that you have uploaded while creating blog posts and pages (recent uploads are listed first).

You can click individual items to view/edit its details or to get its direct link. You generally do not need to access the Media Library unless you want to manage a previously uploaded file or want to upload another file manually.

7. Manually Upload Files To Media Library

Click “Add New” to manually upload files from your computer. And hey, you can upload ANY file format (not just images or documents).

8. WordPress Pages

Pages are similar to posts in a sense that they can also have a title, body, media, metadata, comments, etc. but they’re different from blog posts as they’re not part of chronological blog posts.

Pages do not support categories or tags but it can have a hierarchy. That is, you can create nested pages by making one page a parent of another page. And just like the Posts, you can customize the Pages screen using Screen Options.

Also, you can add a date and time and adjust the visibility and privacy of a Page just like you do on a Post page.

Bloggers usually prfer a Page over a Post when they want to publish a static page like About Me, Contact, Sitemap, etc. and it’s also relevant when you want to create a web page that requires continuous updation.

For instance, when you republish an old blog post it will appear on your homepage and all your blog subscribers will be notified (RSS and Email) — even if you didn’t want to. But when you update a Page, your blog subscribers won’t notice it unless you are linking to it as Pages don’t appear in a blog’s RSS feed.

9. WordPress Comments

Comments section lets you manage all the comments that you have received on your WordPress site. It shows the comments in a reverse chronological order. When you hover the cursor over a comment, it shows some quick actions that lets you approve, reply, edit, spam, or even trash it. You can also moderate multiple comments at the same time by using the “Bulk Actions” menu at the top.

10. Preview mKitchenette

What’s missing? Oh yeah, menus!

11. WordPress Menus

“Menus” are custom menus usually used to create the navigation and footer links (unless the theme supports more).

They are displayed in a predefined location by the theme hence you can’t change its location. But you can change the links or its sorting order from the “Edit Menus” by customizing the “Menu Structure”.

12. Manage WordPress Menu Locations

You can check the “Manage Locations” to see how many menus are supported by the theme and can assign a menu to a location.

12.1 Update WordPress Menu Locations

Select the “Primary Navigation” and click “Save Changes”.

12.2 Updated WordPress Menu Locations

You can create as many menus as you want and then assign a menu to a location or can assign a single menu to all the locations.

13. Customize WordPress Menu

Once you create a menu, you can add pages, posts, custom link, categories, tags, etc. (use Screen Options to make all the options visible) and can easily change its sort order by using drag and drop.

13.1 Add Custom Link

“Custom Links” can be used to add a custom link (with a custom label) to your own website or to another website.

13.2 Added Custom Link

Here I have used a “Custom Link” box to create a link to my homepage.

13.3 Add Pages To WordPress Menu

Select all the pages that you want to show on the navigation menu.

13.4 Create Custom WordPress Menu Structure

Now that I have added all the required “Pages” to the navigation menu.

13.5 Customize WordPress Menu Structure

And here I have renamed the label of the page “Contact Page” to just “Contact”. But it doesn’t rename the actual title of the page which is “Contact Page” itself.

13.6 Updated WordPress Menu

Click “Save Menu”.

13.7 Rearrange Menu Items By Dragging

Rearrange the menu items by using drag and drop.

13.8 Organized WordPress Menu Items

Click “Save Menu”.

14. Customize WordPress

“Customize” (WordPress Dashboard > Appearance > Customize) lets you modify several aspects of your WordPress site in real-time. Some of the items that you can change this way are Site Title, Tagline, Color, Header, Background, Navigation Menus, Sidebar Widgets, etc.

As you change a setting, it’s immediately reflected in the preview (on the right frame). However, the options available for customization depends entirely on the currently active theme.

14.1. Change Header/Logo

For StudioPress themes, the header Image is actually your logo. For other themes, the header image can be a wide image to show at the top of your WordPress site.

14.2. Add New Header Image

It’s best to upload an image based on the suggested image dimensions (640 x 340 in this case) as otherwise, the header may not look like the way you want.

14.3. Upload/Select A New Header/Logo Image

Upload your logo and add a “Title” as well as “Alt Text” (usually the name of your website) for the image.

14.4. Crop Logo

Crop the image if its dimensions are not equal to the recommended dimensions and if it’s same as the recommended size then click “Skip Cropping”.

14.5. Save & Publish Logo

Click “Save & Publish”.

14.6. Customize Colors

Colors let you change the colors of various sections of your theme. The available options depend on the theme that you have selected.

14.7. Customize Fonts

Typography lets you change the fonts of your body and various headings. Again, the available options depend on the theme that you have selected.

15. Original StudioPress Demo

That’s a screenshot of the original demo.

16. mKitchenette Preview

And here’s the screenshot of mKitchenette.

As you can see, I have customized it exactly as it is on the demo site. Just in case, here is a full mKitchenette preview.