search

WordPress / Learn

WordPress.org Learn - The canonical source for the code and content behind https://learn.WordPress.org
272 stars 98 forks source link

How To Add and Remove Logo And Site Icon in Site Editor - Tutorial #512

Closed courtneyr-dev closed 3 months ago

courtneyr-dev commented 2 years ago

Workshop is submitted through https://learn.wordpress.org/workshop-presenter-application/ https://learn.wordpress.org/lesson-plan/how-to-add-and-remove-logo-and-site-icon-in-site-editor/

Topic Description

FSE

Related Resources

Links to related content on Learn, HelpHub, DevHub, GitHub Gutenberg Issues, DevNotes, etc.

Guidelines

Review the [team guidelines] (https://make.wordpress.org/training/handbook/guidelines/)

Workshop Development Checklist

azhiya commented 2 years ago

Lesson plan issue https://github.com/WordPress/Learn/issues/645

wparasae commented 2 years ago

Status Update - Visuals recorded; audio needs re-recording and piecing together.

wparasae commented 2 years ago

I am working on finishing this workshop this month, by September 1st.

wparasae commented 1 year ago

Picking this tutorial back up to finish (at long last!) - Video tutorial will be based off of the(condensed) lesson plan here:

https://learn.wordpress.org/lesson-plan/how-to-add-and-remove-logo-and-site-icon-in-site-editor/

It might be helpful to break this up into two interrelated tutorials (Adding a Site Icon in Classic and Block Themes and Adding a Site Logo in Classic and Block Themes), but I'm not sure about that yet. Considering both for now. Actively working on this at the moment.

wparasae commented 1 year ago

Setting a Site Icon and Site Logo in WordPress Update: February 2nd, 2023: This text has been moved into the Google Slides and will continue to be edited there

Tutorial Rough Draft Script (In Progress) Hi, and welcome to Learn WordPress! Today, we will explore how to add site logos and site icons in both classic and block themes.

What is a logo--and why do you need one? A logo is a graphical representation of you, your brand, your company, or even simply your website and all the ideas it contains. A logo represents your brand and helps people recognize and trust you.

Once you see the logo of a well-known brand, such as WordPress, you often immediately know who the company is--or if you're unfamiliar with that company, you might draw some assumptions about each one based on their logos and site icons.

First, let's add a logo! To start, head to your WordPress Dashboard and select, "Appearance".

What buttons appear there?

If you are on a desktop computer and see the word, "Customize", you are using a classic theme. If you see the word, "Editor", you are using a block theme -- And if you're on a mobile device, you might see both -- if you are using your phone and see both "customize" and "editor", this most likely means that you are using a block theme. Adding a site logo and icon is different with each theme editing experience, and there are pro's and con's to each.

Adding Site Logos and Icons in Block Themes To set a site logo in a block theme, you'll head to Appearance > Site Editor. Site logos usually appear in someone's header, so it's a best practice to navigate to Template Parts > Header and edit it there. Your block theme may already include a site logo in its header parts, such as if you are using the Twenty Twenty-Two theme; however, how do you add a site logo if one doesn't already appear? Using your inserter, add a site logo to your theme.

Let's say I want my logo to appear at the top of my theme in the left-hand corner. I use and expand my list view to make sure I am editing the right block, use my inserter, and select 'upload' the logo. From here, I can upload an image.

A Logo Best Practice: IMPORTANT! Make sure to use alternative text, (which can be found either from the site editor or the media library). This is excellent for both accessibility and for search engines to find your site! A best practice is to use the name of your website or business, the word "logo" -- make sure to include any text that might appear on your logo, such as a name or phone number.

Using the site editor, you now have many more options on how your logo displays, all without using code. You can...

With Block themes, you have a lot of control over where your logo appears. Do be aware that you may need to experiment with columns, rows, or groups to get the visual effect you would like with your logo, but you will not need to use code to make immediate changes.

Site Icons in Block Themes: Once you've set a site logo, you'll notice in this Site Icon's block settings that you have the option to use it as a site icon as well. However, not all logos make the best site icons -- for example, this one might look like a parrot and be easily readable in logo form, but it becomes unrecognizable and unreadable in logo form -- If this is the case for you, deselect the 'use as site icon' button, and you will be taken to a very abbreviated version of the customizer.

(Check this for 6.2) Please note: as of WordPress 6.1, you have to add a site logo in order to be able to add a site icon--even if you remove it later! That might change in the future, but know that you can briefly add a logo in order to access your site icon setting, then delete that logo later by pressing X, Y, Z. Your site icon will remain, even if your logo has been removed.

Adding a Site Logo and Site Icon to a Classic Theme

To set a site icon and logo, click Appearance > Customizer > then the button, Site Identity.

From there, you can usually (but not always!) set a site logo--in classic themes, it's important to note that these logos are hard-coded into the theme. you'll notice that you don't have a lot of flexibility to move your site logo, make it larger or smaller, or add any sort of color effect--at least, not without using some code, often CSS. If your classic theme does not even include a space for a logo or the logo does not appear the way you would like, you will either need to use code to get the desired effect, or switch your theme to one that includes a logo that appears the way you'd like. However, this can be a great option for people who want to set up a website quickly and get started writing posts or pages immediately -- for those people, they can find a classic theme with a logo already set into a layout that they like, click a few buttons, and get started writing immediately.

This is also the section of the classic-themed customizer where you can add a site icon in a classic theme, which appears in the top left-hand corner of a tab or window or in someone's list of bookmarks. Your site icon, also known as a favicon, is displayed in the browser tab and bookmark bar, as well as in some other places, such as mobile home screens.

One last thing -- if you are adding a site logo and/or site icon to a block theme on a mobile device, you'll do this in two different places! To add an icon, select Appearance > Customize, and you should be able to add an icon there. If it's a classic theme, the same rules apply -- the pre-coded theme will determine how your logo looks unless you use CSS coding or a child theme and PHP. If you're on a block theme, head to appearance > editor, and follow X process to add a site logo.

wparasae commented 1 year ago

Potential Quick Video: WordPress-Tok? Did you know? You can add a site icon to your WordPress block theme using your mobile device by going to Appearance > Customizer. This will take you to an abbreviated customizer where you can select an icon from your camera roll or files. Learn more about Site Icons at Learn.wordpress.org!

wparasae commented 1 year ago

A link with screenshots and resources for potential future updates (experiment): https://drive.google.com/drive/folders/17G7UGyGPNEe_UMhNCB7eOYsiiRC3vUi2?usp=sharing

wparasae commented 1 year ago

My script definitely got off-topic. I feel like a high school kid whose essay devolved into some other stuff ahaha. However, I fixed it!

The best part about this project is that almost all of it was created with free software. The only part that a general contributor may not have access to is the microphone, but that's just because my inexpensive gaming headset is rather broken at the moment. Sound quality was comparable aside from it blipping in and out halfway through the first take I did.

Rough draft is here (and imperfect). I am going to make a few final changes to this on Tuesday and then submit it for public review:

https://drive.google.com/file/d/1-iDKxCM0D0bZFvoWfWbKjsiQqQErrmwI/view?usp=share_link

wparasae commented 1 year ago

Pausing on some final changes to wait for the new Beta release, in case that changes the UI. The general content is ready for review ^ in that link above. Please review this tutorial by clicking the Google link above, and adding any comments, questions, or suggestions for changes in this GitHub issue.

Some targeted questions:

westnz commented 1 year ago

Review: Excellent video! It is informative, clear and easy to follow. The video is high-quality! You have used transitions effectively.

Well done Sarah ⭐

nomad-skateboarding-dev commented 1 year ago

This was great, Sarah! I agree with @westnz comment above.

Your video had all the information I felt I needed to know about, and even some pointers about switching back and forth between logo and icon that I was unaware of. Clear, concise, and your tone of voice and cadence are perfect. 👏

I didn't notice any bad transitions or anything that stuck out to me that this was made on different software.

Nicely done! The information and the entire video. 🙌👏

Specific Feedback

askdesign commented 1 year ago

You cover a lot in this tut and explain everything well. The pace is really good. Your tone is encouraging and enthusiastic.

Only 1 thing I noticed: I couldn't see your browser tab. So, when you refer to the site icon, it wasn't visible to me. Hope I viewed the correct video!

wparasae commented 1 year ago

Published! Please check the transcript on the tutorial except for the final draft if you would like to translate this content.

westnz commented 1 year ago

Published version: https://learn.wordpress.org/tutorial/how-to-add-and-remove-a-logo-and-site-icon-in-a-wordpress-block-theme/

courtneyr-dev commented 1 year ago

https://make.wordpress.org/core/2023/05/04/whats-new-in-gutenberg-15-7-03-may/#site-logo-replacement-via-the-sidebar 6.3

courtneyr-dev commented 1 year ago

(49992)

wparasae commented 1 year ago

This needs revision, probably with the 6.3 release -- Feedback:

A recommendation in https://learn.wordpress.org/tutorial/how-to-add-and-remove-a-logo-and-site-icon-in-a-wordpress-block-theme/ for including the word "logo" in the alt text for a site logo, which is not generally what we'd recommend. (It's a minor issue, and not a WCAG violation, just not the best practice we'd generally advise.)

I need to dig into this, but if anyone knows what we would recommend instead so I can replace that when I revise this, that would be great! I will look into our docs again and see what I can find otherwise.

wparasae commented 1 year ago

Due to a transition, I have removed myself from this issue to allow someone else to work on this. :) If I find time to work on this in the next two weeks, I will comment below and happily reassign myself to this issue.

Piyopiyo-Kitsune commented 3 months ago

@westnz Is this covered in a Learning Pathway lesson?

westnz commented 3 months ago

No, we cover this when getting into headers and footers.