Category: Blog

First Look Into the Next Major Release

The first beta version of WordPress 6.0 is finally ready, and the WordPress team is inviting everyone to install and test it.

WordPress 6.0 will introduce the new style switcher, block style retaining, and list view enhancements. Testing the beta version is the perfect opportunity to explore these new features and prepare yourself for the upcoming update.

If you’re unsure how to start, we’ll explain how to install and test the beta version and list new features and improvements worth testing.

How to Test the WordPress 6.0 Beta Version

First of all, we recommend using a development environment to test the beta version, whether it’s a staging environment or a directory separate from your live website.

That’s because the beta version may have bugs and compatibility issues with existing themes and plugins, making it potentially troublesome if you use it on your live site.

Once the development environment is ready for the beta testing, install the WordPress 6.0 beta version using one of these methods:

  • Use the WordPress Beta Tester plugin. Install and activate the plugin, then go to Tools -> Beta Testing. Select the Bleeding edge channel and Beta / RC Only stream. Save the changes and go to Dashboard -> Updates to install the beta version.
  • Download the .zip file and install it manually. To avoid using it on your live website, you can install the beta version on a local computer or a separate directory in the public_html folder. If you would like to learn how to install WordPress manually, we have a step-by-step tutorial to help you.
  • Use the WordPress command-line interface. If you have SSH access and WP-CLI installed, use the wp core update --version=6.0-beta1 command on the command line.

You can help the WordPress team develop the major release by reporting any bugs you find in the Alpha / Beta forum or on the WordPress Trac if you know how to reproduce them. We recommend reading the testing guidelines to know which features need testing.

What’s New In WordPress 6.0 Beta

We’ve tested this beta version and compared it to the previous release. Let’s take a look at some of its new features and improvements that enhance the full site editing experience.

Style Switcher

The style switcher is one of the features we are looking for in WordPress 6.0. This new tool lets users easily switch between theme variations in the site editor.

You probably won’t see this feature if you’ve just installed the beta version, as the Twenty Twenty-Two theme still doesn’t have theme variations by default.

If you want to add a theme variation to Twenty Twenty-Two to test this feature, create a new styles folder in the / wp-content / themes / twentytwentytwo directory. Then, add a dark.json file and paste the code snippet from this Github Gist.

The global style switcher is accessible using the Browse styles navigation on the global styles panel.

Browse styles button to show the available theme variations.

It will show all the available style variations. Click on one of them to switch the theme style quickly.

Theme variations options in the global styles panel.

Selecting Text Across Blocks

You can now select text across multiple text blocks such as paragraph, headingand quote. In the previous version, you could only select entire blocks.

This improvement lets you delete or replace specific text instead of entire blocks.

Selecting text across multiple blocks in the WordPress 6.0 site editor

However, this feature still has limitations. You can’t copy the selected text – instead, the editor will copy all blocks that contain it.

Webfonts API

The Webfonts API allows for easier management of the local fonts. This new feature helps theme developers to create a consistent theme across different websites.

If done correctly, the new web fonts will appear on the font family drop-down menu. We have tried this feature to add more typography options for the global styles.

Custom fonts in the typography drop-down menu.

You can test this feature by modifying the theme.json and functions.php files to register a new web font. WordPress developers have a GitHub issue containing detailed instructions and code snippets.

Block Style Retaining

The block style retaining feature keeps the block’s custom style when you transform it into another block or add a new button to a button block.

For example, if you’ve modified a paragraph block’s text and background color, the style will remain the same if you transform it into a heading block.

The same goes for the button block. It’ll use the same custom style for the new buttons you add.

Adding a new button in a buttons block.

Block Locking UI

WordPress 6.0 introduces the block locking UI to the WordPress block editor. You can now prevent any block from being moved or deleted.

Let’s look at the two ways of doing this.

The first one is via the block toolbar. Click on the three dots to open the settings menu and select Lock. A pop-up will appear where you can select specific block locking attributes.

The pop-up for choosing the block locking attributes.

The second method is via the list view. Select a block and click on the three dots to open the settings menu. Choose Lock, and the same lock attribute pop-up will appear.

Block lock option in the list view.

The steps to unlock a block are pretty much the same. Simply click on the Lock icon on the block toolbar to access the feature.

List View Enhancements

The most significant list view enhancement is the ability to select multiple blocks by using shift + click. This allows you to perform bulk actions like moving, deleting, copying, or duplicating multiple blocks.

The next change is the collapsed view by default. This tweak makes navigating the list view easier, especially for a complex page structure with many nested blocks.

Default collapsed list view.

If you open the list view while having a block selected on the editor, it will open the relevant block nest to show the active block.

Expanded list view to see the active block.

Lastly, the list view will also display the lock icon for locked blocks.

Block lock icon in the list view.

In WordPress 6.0, there’s a new option on the toolbar that lets you use the featured image in the cover block.

Using a featured image for the cover block.

Enabling this option will connect the cover block to the featured image. For example, if you update the featured image, the cover block image will change accordingly.

Block Improvements

The block enhancements in WordPress 6.0 include new blocks, more transformation options, and a new preview pop-up. Let’s see the new blocks available in the beta version:

  • The comment query loop block replaces the deprecated post comments block. This new block also comes with child blocks like comment author, comment date, comment edit, and comment reply.
Comment query loop block in the WordPress 6.0 editor.
  • Avatar block. A new dedicated block to display the username avatar image.
  • Read more. Use this block to add an anchor text that links to a post, page, or other content.

The new beta version also adds six more block transformation options. Along with the block style retaining, these new features should offer more flexibility when modifying content blocks.

  • Logo to Title
  • Excerpt to Content
  • Tag Cloud to Categories
  • Calendar to Archives
  • Paragraph to Code
  • Group to Row

Another improvement is the preview pop-up for the block style. Instead of showing permanent thumbnails as previews in the design tools, it will show a small preview pop-up as you hover over the style options.

The preview pop-up for the block style options.

Pattern Prioritization

The quick inserter will show relevant pattern options instead of blocks. For example, if you open the quick inserter near the end of the template, it’ll provide footer pattern options.

Pattern options in the quick inserter.

Improvements for the Design Tools

While these improvements are not as substantial as other features, they offer a better user experience and new customization opportunities.

  • Container block transformation. With the new layout transformer, you can easily switch the container block layout to group, rowor stack.
Layout transformer for container blocks in the design tool.
  • Featured image size selector. In the featured image block’s dimensions control, select a pre-defined image size using the drop-down menu.
The image size selector for the featured image block.
  • Layout transformation for multiple blocks. Select multiple blocks and transform them into group, rowor stack blocks using the new UI tool in the toolbar.
Layout transformation options in the block toolbar.
  • Gap support for the gallery block. This new feature lets you define a gap between the images in the gallery block, providing more layout possibilities.
  • Custom date format. A new option to use a custom date format for post date and comment date blocks.
  • Column block border. The column block now has a border control to define the border style, width, color, and radius.

New Template Types

In the previous version, users only had the front page option for creating a new template. WordPress 6.0 adds five more types to display posts based on author, category, date, tagand taxonomy. These new options reduce the need for custom page templates.

Upcoming Releases

WordPress will release two more beta versions and three release candidates every Tuesday until the final release date on May 24, 2022.

Each test release will contain improvements, bug fixes, and new features, so be sure to follow the development process. If you want to get more involved, download the beta versions to test the new improvements and report any issues you find to the WordPress team.

Source link

Read More
wpadmin April 19, 2022 0 Comments

Ira Lupu: Fighting Stereotypes With a Camera

A camera is an unusual weapon. But it’s Ira Lupu’s preferred piece for raising social awareness, normalizing taboo subjects, and building a better understanding of people living on the edge. “Some people like to construct their reality,” Ira says. “But I like to face reality and the miracles in it.”

Three years ago, Ira Lupu got a scholarship to study at the International Center of Photography in New York. One year later, she decided to settle in NYC permanently. Now Ira is an established photographer, multimedia artist, and writer, publishing stories in the New York Times and running fashion shoots and exhibitions.

Ukrainian-born photographer Ira Lupu is as colorful as the people on her website – brave, driven, and defiant of stereotypes. The role of an alternative documentary photographer suits her well because she always wanted to tell taboo-breaking stories through the lens of a camera. Whether it’s sexual minorities, mental health, or unconventional beauty, Ira Lupu gives everybody a chance.

“I Didn’t Choose Photography”

Ira started taking pictures in 2007. Her boyfriend didn’t allow her to continue, so she focused on writing. Through writing, Ira got to meet photographers.

Her breakthrough came in 2016 while assisting Yelena Yemchuk, a famous Ukrainian-American photographer, but Ira thinks 2015 was the real icebreaker. “I did my first conscious project in 2015. I feel that it was very connected to the first chapter of the war in Ukraine. It just happened that as a writer, I noticed that I don’t have any words left to express myself. ”

Photography helped Ira get through the beginning of the war in her country. Instead of hiring a photographer, she started taking photos for journalism projects. “Weirdly, it feels like it was meant to be. I didn’t choose photography, but photography gradually established itself in my life, ”she explains.

Ira has an extensive portfolio covering sexual identity, alternative lifestyles, censorship, and many other topics. In 2016, she decided her work needed proper online representation, and that’s where Hostinger stepped in.

“For me, the website is a representation. Recently, I’ve done some commercial fashion work. But I’m also focused on my art projects, and I’m not interested in pushing my fashion gigs forward. Instagram shows what I do and where most of my thinking goes. The website is more like my face. I’m very happy with my Hostinger experience. I’ve been with you guys from the very beginning of my website. “

A Human Face

Ira’s primary goal is to challenge people’s prejudices. While studying in New York, she noticed that people have warped perceptions of Eastern Europe. “I had to confront many stereotypes about ‘easy’ Ukrainian women. Once in a club, an American woman said to my face, ‘Oh, you are Ukrainian. I hear that women are “easy there.” And it was happening all the time. ”

Ira claims that the Eastern European female identity is often misunderstood. She states that certain conditions make girls think of their bodies as a source of income or a tool for survival. In her view, this is beyond mockery.

Instead of denying the existence of sex work, Ira decided to paint a more realistic image of the online sex worker. One of her projects touches on the life of cam girls in Ukraine. While the project initially started as a representation of cam girls, it became an outlet to discuss people’s virtual identities, double lives, and how it measures against our humanity. “Art enables a level of complexity impossible in straightforward journalism. I don’t even have a single picture of cam girls doing their work. I wanted to dig into the human psyche, not just the images of bodies making a living. ”

Ira doesn’t seek to please people with her work. She’s aware that many people will judge her photos in terms of aesthetics, but Ira’s ambition isn’t about portraying conventional beauty. “I don’t state that my pictures are beautiful per se. They might be beautiful to some and not beautiful to others. But if it helps to comfort someone, I’m happy about that. And if it’s disturbing to some – also good. “

War Brings New Perspectives

While Ira’s professional life is going well, she can’t help thinking about the ongoing war in Ukraine. Half of her family escaped to Romania, but Ira’s grandmother could not move due to health reasons, so her mother stayed behind in Odessa.

A day before the war started, the New York Times published Ira’s photos of Ukrainians in New York. The plan was to bring a native perspective to Ukrainian topics, usually covered by foreign journalists.

Ira is now trying to help Ukrainians by spreading awareness and helping with donations. She is also working on a fundraising exhibition in New York dedicated to artists who worked in Ukraine, with major news outlets already picking up at the event. She’ll also take part in an exhibition to benefit the Ukraine Heritage Response Fund.

A Ukrainian exhibition in New York seems like a dream come true. Ira just wishes it was under different circumstances.

Source link

Read More
wpadmin April 19, 2022 0 Comments

The 10 commandments of website navigation

Imagine that you enter a department store, ready to shop for a new t-shirt. You know the brand you want, the color you want, and you know you want 100% cotton, perfect for your sensitive skin.

Suddenly you realize the shop floor in front of you is a total mess.

Under a sign for jeans, you find piles of sweaters and cardigans. In a large display labeled ‘baseball caps’, socks of all sizes are muddled together, along with a winter scarf strewn across the top.

Bewildered, you glance at a map of the store, which turns out to be a little help in your t-shirt-finding mission, as it only contains directions to the Garden and Kitchenware sections.

Annoyed, you leave the store, vowing never to return.

An online customer can feel exactly the same type of frustration when a website’s navigation is confusing – not knowing where to go or being annoyed at the lack of information to help them do what they want.

However, all is not lost. In this article, you’ll learn about design practices, site maps, and the secrets to building the best navigation for your website.

books about information architecture

Introducing information architecture (IA), user interface (UI), and user experience (UX) design

Before we start delving into best practices for website navigation, it’s a good idea to have a basic understanding of the following types of design:

  • Information architecture (IA) – This type of design looks at the organization and structure of content. Once you understand the basics, you can help your customers find the information they need and complete the actions you would like them to take.
  • User experience (UX) – This type of design is about (you guessed it) how the user experiences your product or service and strives to make the overall feel of your website a positive one.

    A UX designer will look at or conduct research to understand user needs and pain points. They will consider the user journey, look at IA to determine what a user may need, and draw wireframes that include page elements.

    UX designers may work closely with web developers and content strategists to truly understand and serve the user.

  • User interface (UI) – This type of digital design is all about the touchpoints between a user and your product or service, such as icons, spacing, call-to-action buttons, and responsive design. The UI designer will look at how accessible a page is, whether the colors of the text are easy to read and if the page works across different screen sizes.

Each type of design is essential when it comes to creating your website — especially your website navigation.

A poorly executed user interface (IU) results in lousy navigation, resulting in a terrible user experience (UX). But a strong UI will make it easy for a user to figure out where to go to find what they want, producing a much better UX and therefore a much happier user. These happy users are more likely to buy something, subscribe to your newsletter, and share your products, services, and information with their friends.

Your main goal is to create easy-to-use navigation that will leave your users feeling positive about your site and what you’re offering so they leave your site feeling like they were able to accomplish what they wanted.

What is a sitemap – and why is it useful?

A sitemap is how search engine web crawlers understand your website. This includes information about the pages and files such as video and audio content. A sitemap also tells search engines the website’s hierarchy and which pages are important.

Once you’ve created your sitemap and submitted it to Google, you can use the Google Search Console to check everything is in order. It’s important to check that your links are correct to avoid disappointing visitors and web crawlers.

The sitemap will be handy when it comes to building your website navigation. After all, it will most likely have all the pages you include on your website. This means that you will be able to quickly identify the most important categories for your user and what you must include in your navigation.

alert on website

The importance of website navigation

Like in the shopping example at the start of this article, if a website is challenging to navigate, users and search engines will find it hard to understand what it’s about.

Website navigation is seen as part of Information Architecture (IA) design. Here are three reasons why it is so important to get right:

1. It affects SEO

Your homepage is typically the page with the most authority on your website. Any pages linked from here are also seen as important. If you’re not directing your users to relevant pages from your homepage, the chance for those pages ranking highly decreases.

2. It affects traffic

The longer a person stays on your site, the more search engines will love you. If a visitor lands on your homepage and doesn’t click a link or interact with your page and heads back to the search engine results page, it shows that the user isn’t interested in your content. This ‘bounce rate’ is calculated as the percentage of people that land on a page and leave. You can find this rate in Google Analytics.

3. It affects your conversion rate

If visitors to your website don’t want to stay and engage with your content, they will leave because they can’t find what they want. You won’t drive any traffic to your product pages, you won’t make any sales, and none of those visitors will convert into customers.

Navigation types

Here are three of the most common navigation styles for websites:

  • Standard horizontal – This is the most common navigation style and displays a list horizontally.
  • Drop-downs – If you have a lot of categories to cover, such as large department stores, drop-down navigation allows you to list your content easily. It expands to give the user more options. But be careful not to build in too many levels, as that can be difficult to use, especially for people who have disabilities.
  • Vertical sidebar – Although somewhat dated now, a sidebar will keep your navigation in one place. If you haven’t got many categories, it’s still a valid option for your navigation.

When you’re designing your navigation, it’s essential to understand how many pages you will be linking to. If the number is high, then drop-downs are a perfect choice, but if it’s fewer than seven, standard horizontal is best. Most websites use standard horizontal, so it’s quick and easy for your web visitors to know what to do.

hedgehog writing with quill

The 10 commandments to follow

Now that you have discovered why good navigation is so important, and the three most common navigation types, it’s time to give you the rules for getting it right.

  1. You shall write for the user – As soon as your user lands on your website, they will see the navigation bar. Avoid using overcomplicated, confusing, or vague language – use popular words or phrases to tell them what you have to offer. On the Namecheap navigation bar, you’ll find words like Domains, Hostingand WordPress. You won’t find words like TLDs, Hosting servicesor open-source content management systems.

    Think of your audience. If the majority wouldn’t understand an industry-specific term, don’t use it. This is also important for search engine optimization (SEO). If your navigation is descriptive and well structured, it helps search engine crawlers identify which of your pages are important.

  1. You shall try to minimize the number of items in your navigation – It’s very easy to overwhelm your visitors if you include too many options in your navigation. Less is more. The more succinct your categories and labels are, the better they are for search engine optimization (SEO) as well.
  1. You shall try to minimize navigation levels – When you minimize the number of clicks it takes for a customer to reach specific information on the site, the more satisfied a customer will be. The Nielsen Norman Group confirms that “the deeper a hierarchy becomes, the more likely visitors are to become disoriented.”

    A flat hierarchy with easily recognized categories helps the user to find what they’re looking for quickly. However, if your website has a huge number of categories, which could overwhelm the customer, it may make sense to add another level ahead of these categories to make it simpler.

  1. You shall update your navigation based on user flow – Google Analytics offers a report on user flow. If your homepage is the main page where your users interact with your website, you can view which of the navigation items are used and which are not.

    Make a point of checking this now and again to get a true idea of ​​which paths are most used. If many navigation items aren’t clicked on, just remove them, or rename items if you think it’s not clear enough to the user.

  1. Your navigation shall not be hard to find – Don’t try to be inventive with your navigation bar. Place it horizontally across the top or vertically on the left-hand side. If it’s difficult to locate, your visitors will get frustrated and are more likely to bounce back to the search engine results page and find another website instead.
  1. You shall consult the site map to decide positioning – By using the site map to create your navigation you will quickly know which pages are the most important, and therefore should be of the highest priority. There’s no point in burying the most important page deep within your menu. It needs to be front and center for the user to find.
  1. You shall design for navigation for mobile too – Fingers are different sizes, so account for this when it comes to links. Make sure they’re big enough. Think about reducing the items in your navigation and displaying the important pages first.
  1. You shall use hover-over effects – If a user has their mouse over some text, it’s a good idea to show them where they are so they can easily see what they are doing. It’s the equivalent of using your finger to point where you are on a map. You can also change the text color so it stands out. The clickable text needs to be obvious to the user so that they can interact with it.
  1. You shall test your navigation on different screen sizes – Don’t forget that your website visitors will be on a number of different devices with different screen sizes. Make sure it’s easy to navigate if a user is on a tablet or desktop.
  1. You shall be inclusive – Web users are not all the same. Some may be visually and hearing impaired or may have cognitive and learning disabilities, impacting website experience. Good navigation should be good for all users, so pay attention to contrasting colors, the ability to change font size, use descriptive labels for links and buttons, and offer keyboard access. You can find out more about guidelines and web accessibility standards at W3C.

A successful navigation

Carefully considered navigation is the key to a successful website. It’s a way of getting the important information in front of the user, making it easy, informative, and fast, resulting in a positive experience that will keep them coming back for more.

Hopefully, this blog post has provided some helpful guidance for planning your own website navigation.

Source link

Read More
wpadmin April 14, 2022 0 Comments