Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
Are you include images in your web pages? Visual Studio Code (VS Code), a powerful and popular editor, makes this task seamless. Whether you’re a beginner or just need a quick refresher, this step-by-step guide will walk you through the...
The post How to Include Images in HTML with Visual Studio Code appeared first on Treehouse Blog.
Breadcrumbs are now baked into SmartCrawl, along with another hotly requested feature… setting primary categories for posts and products!
SmartCrawl 3.5 gives you the ability to improve your WordPress site navigation for users and search engines with two new powerful features: breadcrumbs, and the ability to specify primary categories when assigning multiple categories to your posts or product pages.
In this article, we explain the benefits of using SmartCrawl’s latest new features and how to get the most out of them. We’ll cover:
Let’s get cooking…
In the classic fairytale, siblings Hansel and Gretel left a trail of breadcrumbs when they went deep into the forest so they would not get lost and have a path to navigate on their return.
Aptly named, breadcrumbs are an essential navigation aid that can help visitors and search engines better understand your website’s structure.
According to research, 38% of first-time website visitors look at navigational links on a page. So, the easier you make it for users to navigate your site, the better their experience. Especially if your website has a hierarchical structure with lots of nested pages.
And it goes without saying that improving your site’s navigation is also good for SEO, as it helps search engine bots crawl your pages and index your content more efficiently.
Here are some other reasons why you should use breadcrumbs on your WordPress site:
Breadcrumbs are a type of secondary navigation scheme that show users the path they have taken to reach a particular page on a website.
They don’t replace your site navigation menu, they support and complement it. So, a good place to put them is at the top of a page, just below your site’s primary navigation menu or the main header section.
However, you can also use them at the bottom of your page or even on your sidebar.
As you will see later in this post, you can pretty much add a breadcrumb anywhere on your site using a shortcode.
The best way to find what works best for your site is to test different locations and use tools like heatmaps or analytics to measure your results.
What happens if you assign multiple categories to a post? How do breadcrumbs choose which path to display?
The answer is… breadcrumbs will choose whichever category you have specified as the primary category for the post.
Primary categories are the main classification of your business, product, or service and can help search engines understand the primary focus of your website, so the ability to select primary categories in SEO is important.
If you assign a primary category to your posts, breadcrumbs don’t have to guess. It’s as simple as that!
SmartCrawl not only makes it easy to add breadcrumb navigation to your website and assign primary categories to your posts and product pages, but it automatically adds structured data to your breadcrumbs. This helps search engines to understand and categorize your content and present it correctly to users.
Plus, SmartCrawl gives you complete control over how your breadcrumbs appear, making it easy to provide visitors with the information they need to navigate your site.
To activate SmartCrawl’s breadcrumb feature, go to SmartCrawl > Advanced Tools > Breadcrumb and click on activate.
Activating the feature gives you access to a range of settings and options for configuring your breadcrumbs.
Let’s go briefly over SmartCrawl’s breadcrumb settings:
Let’s look at a few ways to customize breadcrumbs by tweaking SmartCrawl’s settings.
The Breadcrumb Separator section lets you specify a separator symbol from a list of presets, but you can also add your own by entering HTML characters.
So, for this example, let’s add an emoji into the custom separator field…
Here’s the result…
You can also add a prefix to your breadcrumbs in the Configurations section…
And here’s the result…
Let’s do one more tweak and hide the post title from our breadcrumb trails…
And here’s our customized breadcrumb sans title…
SmartCrawl gives you additional options to customize breadcrumb label formats across your site.
Customize breadcrumb label formats with a wide range of options.
This allows you to add additional information to your breadcrumbs such as post authors, dates and time, your site title, etc.
Breadcrumbs improve your website’s SEO and search engine visibility, provide visitors with an easy way to navigate your site, reduce bounce rates, and increase click-through rates.
Smartcrawl’s breadcrumb feature is customizable, flexible, user-friendly, SEO-friendly, and compatible with all WordPress themes and plugins.
Additionally, SmartCrawl automatically ads breadcrumb schema markup and the ability to specify a primary category for posts and product pages with multiple categories assigned.
SmartCrawl is the free SEO plugin that lets you have your cake and eat it too… right down to the tastiest breadcrumbs!
See our documentation section for more information on using this feature and, if you have any questions, ask our 24/7 support team or check out our new AI Assistant by clicking the Support tab inside The Hub.
Autocomplete is a feature that can save users’ time by suggesting previously entered information when filling out forms. Although it can be a helpful feature, sometimes it can be a privacy concern, especially when users share devices or work on public computers. In this case, users may want to disable the autocomplete feature for specific input fields or forms. In this article, we will discuss how to disable autocomplete for input elements.
The autocomplete attribute is used to control this feature. This attribute can be applied to different form elements, including input tags. It takes two values: “on” and “off.” By default, the browser sets the value to “on” for input tags. When set to “off,” the browser will not suggest previously entered values for that particular input field.
To disable auto-complete for a specific input field, you can use the following code:
<input type="text" name="username" autocomplete="off">
In the above code, we have added the autocomplete attribute to an input tag and set its value to “off.” This will disable it for that particular input field. You can apply this attribute to other input tags as well, including password fields, email fields, and search fields.
If you want to disable it for a whole form, you can add the attribute to the form element and set its value to “off.” The following code demonstrates this:
<form method="post" action="/submit-form" autocomplete="off"> <input type="text" name="username"> <input type="password" name="password"> <input type="email" name="email"> <button type="submit">Submit</button> </form>
In the above code, we have added the autocomplete attribute to the form element and set its value to “off.” This will disable it for all the input fields within the form.
When disabling autocomplete, it is essential to keep in mind that it can impact the user experience. Some users may appreciate the feature, as it can save time and make filling out forms easier. Therefore, it is recommended to disable it only when necessary, such as when the user is working on a public computer.
Another best practice is to use the attribute only for specific input fields, such as search fields or email fields, to provide a better user experience.
This post is originally published on Designmodo: Create a Drop Down Menu with Search Box in CSS3 and HTML
Topic: CSS3 Difficulty: Intermediate Estimated Completion Time: 45 min In this tutorial, we will be creating a flat style navigation with a search box and dropdown menu from the Square UI. Slides: HTML Static Website Builder Search Bar with Dropdown …
For more information please contact Designmodo
This post is originally published on Designmodo: Create a Product Page with Interactive Colors in HTML, CSS3 & jQuery
Topic: HTML / CSS3 / jQuery Difficulty: Intermediate Estimated Completion Time: 30 minutes In this tutorial, we are going to create a website product page using HTML, CSS3 and jQuery. You can use it for product presentations on your shop …
For more information please contact Designmodo
A user might be operating in front of a mobile screen and a desktop screen, but their expectation changes widely on both devices. A user in front of a mobile device is a little less patient, as they are mostly “on the go” compared to when they are in front of a desktop. Mobile devices have changed the overall user experience and how a user perceives a website nowadays. In short, we need our content to render dynamically on mobile and desktop screens abiding by their requirements. If we could do that, we could create a responsive design with content specific to the device users.
For example, you cannot hide a “Login” button on a dropdown or hamburger menu in the corner. While you can do that on a desktop screen (even though it’s a bad design!) and the user will find it. The developers cannot mess up with the mobile design, considering the traffic size and data generation a mobile device is responsible for. Also, we have a lot to share with our users on the developer's end and want a large screen space to accommodate everything.
Do you want to show Google Maps on your WordPress website?
If you’re running a local business, then displaying Google Maps on your site can help users easily find your location. It can also help improve your site’s search engine visibility so you can attract more website visitors.
In this article, we will show you how to add Google Maps in WordPress.
Did you know that Google Maps is the most popular navigational app on all platforms?
If you have an office or physical store address, then adding Google Maps to your WordPress website makes it easy for users to quickly locate your physical stores, restaurants, or retail outlets. This helps you attract more customers and generate more business.
Not only that, but embedding Google Maps can also improve your WordPress SEO. According to Google, 46% of all searches are local. Adding Google Maps to WordPress can boost your local SEO and improve your visibility in local searches.
Now there are two ways to embed Google maps in WordPress, and we will show you both of them.
The benefit of the second method is that it follows all local SEO best practices, so if you use it, then Google will start to include your location on Google Maps. It will also display your business information like name, logo, address, phone number, open hours, and more in local search results.
Below are the quick links that you can use to go to the section you prefer:
That being said, let’s see how you can add Google Maps to WordPress.
If you just want to quickly embed Google maps in a WordPress post or page, then you can use the default iFrame method.
Simply go to the Google Maps website and type in any street address in the search area.
Next, you need to click the Share icon and it will show a popup with the option to either Send a location link or Embed a map. You need to select the Embed a map option.
After that simply copy the HTML code for Google maps, and then open the page where you want to embed the map. Inside the block editor, you need to add a Custom HTML block.
Now you can simply paste the embed code you copied from Google maps, and then update or publish the page to preview the changes.
This method works for quickly embedding Google maps, but it doesn’t give you maximum SEO benefits.
If you’re a small business, restaurant, or online store with either a single or multiple physical location, then we recommend using the next solution to maximize your Local SEO rankings because it uses proper open graph data to help you rank higher in Google.
The best way to add Google Maps and optimize your site for local SEO is by using All in One SEO (AIOSEO).
It’s the best SEO plugin for WordPress because it helps you get higher SEO rankings without editing code or hiring a developer. Over 3 million professionals use AIOSEO to improve their search engine rankings.
For this tutorial, we’ll be using the AIOSEO Pro version because it includes the Local SEO feature and other powerful optimization options. There is also a free version of AIOSEO that you can use to get started optimizing your site for search engines.
First, you’ll need to install and activate the AIOSEO plugin in WordPress. For more details, please see our tutorial on how to install a WordPress plugin.
Upon activation, the plugin will launch the setup wizard. You can click the ‘Let’s Get Started’ button to configure the plugin. If you need help, then please refer to our guide on how to properly set up All in One SEO in WordPress.
Next, you can head over to All in One SEO » Local SEO from your WordPress dashboard.
Then click the ‘Activate Local SEO’ button to get started configuring the local settings.
Once the Local SEO addon for WordPress is activated, you can add a single location or multiple locations in AIOSEO and display them on Google Maps. We’ll show you how to add both to your website.
Adding a Single Location
To add your locations, business information, open hours, and more, first you need to go to the ‘Location’ tab under All in One SEO » Local SEO.
If you have a single physical location, then keep the ‘Multiple Locations’ option set to No.
After that, scroll down to the ‘Maps’ section to pin your exact location.
Simply enter your address in the ‘Enter a query’ field and Google Maps will show your location.
Once you’ve entered your location, don’t forget to click the Save Changes button.
Adding Multiple Locations
If you have more than one physical location, then you’ll need to enable the ‘Multiple Locations’ setting under the ‘Location’ tab in Local SEO.
After that, a new Locations menu will appear in your WordPress admin panel.
Go ahead and navigate to Locations and then click the ‘Add New’ button.
Once you’re in the WordPress editor, scroll down to the ‘Map’ section.
Here you can enter your address in the ‘Enter a query’ field.
After entering your location on the map and adding location information, go ahead and click the ‘Publish’ button.
You can now repeat this step and add as many locations as you want for your business.
Once you’re finished adding your locations, you can go to the ‘Maps’ tab back in the All in One SEO » Local SEO menu.
Here you will have to enter a Google Maps API key.
Now, let’s see how to create an API key for Google Maps.
To start, you’ll need to visit the Google Maps Platform website and click the ‘Get Started’ button.
After signing in with your Google account, you’ll need to set up a billing account.
Google Maps Platform has pay-as-you-go pricing, and they offer the first $300 of monthly usage for free for all users. For most websites, that will easily cover a simple map embed like the one we’re creating in this tutorial.
Don’t worry, they will not charge you any fees unless you manually upgrade to a paid account.
To get started, go ahead and click the ‘Create Billing Account’ button.
Next, you can select your country and choose what best describes your organization from the dropdown menu.
Once you’ve selected this information, click the checkbox for Terms of Service and then click the ‘Continue’ button.
On the next screen, you’ll need to enter your phone number for verification and click the ‘Send Code’ button.
After verifying the code, the next thing to do is enter your business name, payment method details, and billing address.
Once you’ve entered these details, click the ‘Start my Free Trial’ button.
Next, you’ll be asked a series of 4 questions about your organization and how you’ll use the Google Maps Platform.
Google Maps will ask about your primary goal for using the platform, which industry you’re in, select a use case, and your company size.
After answering these questions, go ahead and click the ‘Submit’ button.
You’ll now see a popup with your Google Maps API key.
You can copy and save this key in a text file for future use.
Now that you’ve created a Google Maps API key, you’ll need to head back to your WordPress dashboard to enter it in AIOSEO Local SEO settings.
You can now go back to All in One SEO » Local SEO from your WordPress dashboard and then navigate to the ‘Maps’ tab.
Go ahead and enter the Google Maps API Key in the ‘API Key’ field. You’ll see a preview of the map in AIOSEO as soon as you add the key.
Next, you can scroll down to edit the map settings.
AIOSEO lets you display Google Maps using a Gutenberg block, shortcode, widget, or PHP code. It also lets you choose different map styles and add a custom marker to your map.
Don’t forget to click the ‘Save Changes’ button when you’re done.
Next, you can add Google Maps to any WordPress post or page. To start, simply edit or add a new page on your website.
Once you’re in the block editor, click the ‘+’ button at the top and add the ‘AIOSEO Local – Map’ block anywhere on the page.
After that, your Google Map will be added to the page.
AIOSEO also lets you edit the map settings from the options on your right. For instance, you can show labels and icons, add a custom marker, and edit the map’s width and height.
If you have multiple locations, then you can select which location to highlight by choosing from the options given in the menu on your right.
Simply click on the ‘Location’ dropdown menu and select your preferred location to display on your website.
Once you’re satisfied with your settings, go ahead and publish the page.
Now you can visit your website to see Google Maps in action.
You can also add Google Maps to your site’s widget section, like the sidebar or footer.
To start, head over to Appearance » Widgets from your WordPress admin panel. Next, click the ‘+’ button and add the ‘AIOSEO Local – Map’ widget block where you’d like to display your location.
After that, you can edit the widget settings.
For example, you could add a title, change the width and height of the map, choose which location to display if you have multiple locations, and edit the label.
That’s it!
Now when you update your website you’ll see Google Maps in your widgets area.
We hope this article helped you learn how to add Google Maps to your WordPress site. You can also check out our guide on the best WordPress plugins for small business, and our expert pick of the best identity theft protection service for entrepreneurs.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Add Google Maps in WordPress (The RIGHT Way) first appeared on WPBeginner.
This post is originally published on Designmodo: How to Create Forms Using Slides and Collect Data on Static.app
Web forms are everywhere. Almost every person on this planet who uses the internet will fill in at least one form occasionally. A web form, also called an HTML form, is an essential part of a website that allows user …
For more information please contact Designmodo
Scott digs into the history of the <menu> element. He traced it as far back as HTML 2 (!) in a 1994 changelog. The vibe then, it seems, was to mark up a list. I would suspect the intention is much like <nav> is today, but I really don’t know.
Short story: HTML 4 deprecated it, HTML 5 revived it—this time as a “group of commands”—and then HTML 5.2 deprecated it again. Kind of a bummer since it has some clear use cases.
So, it’s been quite the roller coaster for ol’ <menu>! There never seems to be any easy wins for HTML evolution. As of now, it’s in “don’t bother” territory:
I really wrote this post as a sort of counter point to the often uttered phrase “use semantic HTML and you get accessibility for free!” That statement, on its surface, is largely true. And you should use semantic HTML wherever its use is appropriate.
<menu>, unfortunately, doesn’t really give us all that much, even though it has clearly defined semantics. Its intended semantics and what we actually need in reality are better served by either just using the more robust<ul>element, or creating your ownrole=toolbar,menubar, etc.. Using this semantic element, for semantics sake, is just that.
To Shared Link — Permalink on CSS-Tricks
The post Semantic menu context appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
Do you know that both the grids and alignment CSS properties are always talked about together? Why? Because of the nature of their existence and the mess that alignment creates on different screen devices. How easy and convenient would web developers’ lives become if all the devices in this world existed with the same screen size. That would be a dream! But coming back to reality, we have to deal with hundreds of devices with varying screen sizes, and the problems they create for the developers with alignment is an add-on. CSS grids and CSS subgrids were introduced to tackle the alignment problem with multiple elements existing side by side.
Grids were responsive, and instead of the “hit and try” of pixel and margin values, setting display: grid worked like a charm. As time stands witness to the issues tackled by web developers, if they do not have one, they invent one themselves. Now the developers have started to create complex web designs with one grid nested with other grids. That was a makeshift arrangement, and making it work was an endeavor in itself.
You know what tabs are, Brian.I mean… You use them every day, on every OS. Everybody knows they exist in every toolbox. All that’s left is to “just pave the cowpaths!” But when you get right down to it, it’s a lot more complicated than that.
Brian Kardell shares a bit about the progress of bringing “Tabs” to HTML. We kinda think we know what they are, but you have to be really specific when dealing with specs and defining them. It’s tricky. Then, even if you settle on a solid definition, an HTML expression of that isn’t exactly clear. There are all kinds of expressions of tabs that all make sense in their own way. Imagine marking up tabs where you put all the tabs as a row of links or buttons up top, and then a bunch of panels below that. They call that a “Table of Contents” style of markup, and it makes some kind of logical sense (“the markup looks like tabs already”). But it also has some problems, and it looks like sections-with-headers is more practical (“If you have the heading, you can build the TOC, but not vice-versa”). Spicy sections are a totally different pattern. And that’s just one problem they are facing.
I don’t envy the work, but I look forward to the progress in no small part because authoring tabs is tricky business. Not hard to do, but very hard to do right. I’ve talked in the past about how I’ve built tabs many times in jQuery where just a click handler on a row of links hides or shows some matching divs below. That “works” if you ignore accessibility entirely (e.g. how you navigate between tabs, focus management, ARIA expectations, etc).
Here’s the ShopTalk discussion and here’s a different perspective in a chat I had with Stephen on CodePen Radio where we get into our <Tabs /> React component on CodePen.
Direct Link to Article — Permalink
The post Tabs in HTML? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
This post is originally published on Designmodo: How to Quickly Deploy a Static Website Online with Static.app
In recent years, static websites have gone from simple layout pages to becoming a widely used ecosystem to power-up robust SEO-friendly and lightning fast websites. Because of the wide range of benefits it offers, static websites are now used to …
For more information please contact Designmodo
The name zero-width space is antithetical, but it’s not without uses. In text, maybe you’d use it around slashes because you want to be sure the words are treated individually but not have any physical space around the slash:
That’s pretty theoretical though—I’ve never once needed to do that. It might be useful in a long word to suggest that it can be broken there… but that’s also rare as we have the soft-hyphen (­) which is designed for that and leaves a typically appropriate hyphen at the break.
What I have needed to do is exactly the opposite: trick a system into thinking a single word is two words. Like on Twitter, if I @username or #hashtag in the text of a tweet, those will be linked up respectively. But I don’t always want that. On CSS Twitter, I might want to refer to a @media query or show an #id-selector. Toss a zero-width space between the symbols and the text and I’m all set.
Here’s a Pen I created ages ago that will help you do that:
There is also a quick trick for doing it from the browser console:
copy('u{200B}')via:
And for yet another way that may appeal to you, a bookmarklet!
The danger with the zero-width space is, well, you can’t see it. If someone were to, for example, copy your @media query using the zero-width space trick from a tweet, it won’t work in their code editor (because it will invalidate the rule) and it might be extremely confusing. For that reason, it’s probably good to avoid using it in anything that might be copied as a code example, but probably fine when explicitly trying to not autolink something.
The post Zero-Width Space appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
When you apply a CSS property to an element, there’s lots of things going on under the hood. For example, let’s say we have some HTML like this:
<div class="parent">
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
</div>And then we write some CSS…
.parent {
display: flex;
}These are technically not the only styles we’re applying when we write that one line of CSS above. In fact, a whole bunch of properties will be applied to the .child elements here, as if we wrote these styles ourselves:
.child {
flex: 0 1 auto; /* Default flex value */
}That’s weird! Why do these elements have these extra styles applied to them even though we didn’t write that code? Well, that’s because some properties have defaults that are then intended to be overridden by us. And if we don’t happen to know these styles are being applied when we’re writing CSS, then our layouts can get pretty darn confusing and tough to manage.
That flex property above is what’s known as a shorthand CSS property. And really what this is doing is setting three separate CSS properties at the same time. So what we wrote above is the same as writing this:
.child {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}So, a shorthand property bundles up a bunch of different CSS properties to make it easier to write multiple properties at once, precisely like the background property where we can write something like this:
body {
background: url(sweettexture.jpg) top center no-repeat fixed padding-box content-box red;
}I try to avoid shorthand properties because they can get pretty confusing and I often tend to write the long hand versions just because my brain fails to parse long lines of property values. But it’s recommended to use the shorthand when it comes to flexbox, which is…weird… that is, until you understand that the flex property is doing a lot of work and each of its sub-properties interact with the others.
Also, the default styles are a good thing because we don’t need to know what these flexbox properties are doing 90% of the time. For example, when I use flexbox, I tend to write something like this:
.parent {
display: flex;
justify-content: space-between;
}I don’t even need to care about the child elements or what styles have been applied to them, and that’s great! In this case, we’re aligning the child items side-by-side and then spacing them equally between each other. Two lines of CSS gives you a lot of power here and that’s the neatest thing about flexbox and these inherited styles — you don’t have to understand all the complexity under the hood if you just want to do the same thing 90% of the time. It’s remarkably smart because all of that complexity is hidden out of view.
But what if we want to understand how flexbox — including the flex-grow, flex-shrink, and flex-basis properties — actually work? And what cool things can we do with them?
Just go to the CSS-Tricks Almanac. Done!
Just kidding. Let’s start with a quick overview that’s a little bit simplified, and return to the default flex properties that are applied to child elements:
.child {
flex: 0 1 auto;
}These default styles are telling that child element how to stretch and expand. But whenever I see it being used or overridden, I find it helpful to think of these shorthand properties like this:
/* This is just how I think about the rule above in my head */
.child {
flex: [flex-grow] [flex-shrink] [flex-basis];
}
/* or... */
.child {
flex: [max] [min] [ideal size];
}That first value is flex-grow and it’s set to 0 because, by default, we don’t want our elements to expand at all (most of the time). Instead, we want every element to be dependent on the size of the content within it. Here’s an example:
.parent {
display: flex;
}I’ve added the contenteditable property to each .child element above so you can click into it and type even more content. See how it responds? That’s the default behavior of a flexbox item: flex-grow is set to 0 because we want the element to grow based on the content inside it.
But! If we were to change the default of the flex-grow property from 0 to 1, like this…
.child {
flex: 1 1 auto;
}Then all the elements will grow to take up an equal portion of the .parent element:
This is exactly the same as writing…
.child {
flex-grow: 1;
}…and ignoring the other values because those have been set by default anyway. I think this confused me for such a long time when I started working with flexible layouts. I would see code that would add just flex-grow and wonder where the other styles are coming from. It was like an infuriating murder mystery that I just couldn’t figure out.
Now, if we wanted to make just one of these elements grow more than the others we’d just need to do the following:
.child-three {
flex: 3 1 auto;
}
/* or we could just write... */
.child-three {
flex-grow: 3;
}Is this weird code to look at even a decade after flexbox landed in browsers? It certainly is for me. I need extra brain power to say, “Ah, max, min, ideal size,” when I’m reading the shorthand, but it does get easier over time. Anyway, in the example above, the first two child elements will take up proportionally the same amount of space but that third element will try to grow up to three times the space as the others.
Now this is where things get weird because this is all dependent on the content of the child elements. Even if we set flex-grow to 3, like we did in the example above and then add more content, the layout will do something odd and peculiar like this:
That second column is now taking up too much darn space! We’ll come back to this later, but for now, it’s just important to remember that the content of a flex item has an impact on how flex-grow, flex-shrink, and flex-basis work together.
OK so now for flex-shrink. Remember that’s the second value in the shorthand:
.child {
flex: 0 1 auto; /* flex-shrink = 1 */
}flex-shrink tells the browser what the minimum size of an element should be. The default value is 1, which is saying, “Take up the same amount of space at all times.” However! If we were to set that value to 0 like this:
.child {
flex: 0 0 auto;
}…then we’re telling this element not to shrink at all now. Stay the same size, you blasted element! is essentially what this CSS says, and that’s precisely what it’ll do. We’ll come back to this property in a bit once we look at the final value in this shorthand.
flex-basis is the last value that’s added by default in the flex shorthand, and it’s how we tell an element to stick to an ideal size. By default, it’s set to auto which means, “Use my height or width.” So, when we set a parent element to display: flex…
.parent {
display: flex;
}
.child {
flex: 0 1 auto;
}We’ll get this by default in the browser:
Notice how all the elements are the width of their content by default? That’s because auto is saying that the ideal size of our element is defined by its content. To make all the elements take up the full space of the parent we can set the child elements to width: 100%, or we can set the flex-basis to 100%, or we can set flex-grow to 1.
Does that make sense? It’s weird, huh! It does when you think about it. Each of these shorthand values impact the other and that’s why it is recommended to write this shorthand in the first place rather than setting these values independently of one another.
OK, moving on. When we write something like this…
.child-three {
flex: 0 1 1000px;
}What we’re telling the browser here is to set the flex-basis to 1000px or, “please, please, please just try and take up 1000px of space.” If that’s not possible, then the element will take up that much space proportionally to the other elements.
You might notice that on smaller screens this third element is not actually a 1000px! That’s because it’s really a suggestion. We still have flex-shrink applied which is telling the element to shrink to the same size as the other elements.
Also, adding more content to the other children will still have an impact here:
Now, if we wanted to prevent this element from shrinking at all we could write something like this:
.child-three {
flex: 0 0 1000px;
}Remember, flex-shrink is the second value here and by setting it to 0 we’re saying, “Don’t shrink ever, you jerk.” And so it won’t. The element will even break out of the parent element because it’ll never get shorter than 1000px wide:
Now all of this changes if we set flex-wrap to the parent element:
.parent {
display: flex;
flex-wrap: wrap;
}
.child-three {
flex: 0 0 1000px;
}We’ll see something like this:
This is because, by default, flex items will try to fit into one line but flex-wrap: wrap will ignore that entirely. Now, if those flex items can’t fit in the same space, they’ll break onto a new line.
Anyway, this is just some of the ways in which flex properties bump into each other and why it’s so gosh darn valuable to understand how these properties work under the hood. Each of these properties can affect the other, and if you don’t understand how one property works, then you sort of don’t understand how any of it works at all — which certainly confused me before I started digging into this!
But to summarize:
flex shorthand The post Understanding flex-grow, flex-shrink, and flex-basis appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Back in August 2020, when the content-visiblity property in CSS trickled its way into Chrome browsers, Una Kravets and Vladimir Levin wrote about it and we covered it. The weirdest part is that to get the performance value out of it, you pair it with contain-intrinsic-size on these big chunks of the page where you insert some arbitrary guess at a height. I wrote:
That part seems super weird to me. Just guess at a height? What if I’m wrong? Can I hurt performance? Can (or should) I change that value at different viewports if the height difference between small and large screens is drastic?
Jake Archibald and Das Surma just did a video on all this and it helped clarify that a bit. You can see at about 7:30 in just how confusing it is. Jake used this massive HTML spec page as a demo, and made <section> wrappers around big chunks of HTML, and applied:
section {
content-visibility: auto; /* this is the thing that delays painting */
contain-intrinsic-size: 1px 5000px; /* this is the guess at the height of the content, and also saying width doesn't matter */
}Apparently that 5000px isn’t the height of the element, it’s the size of the content of that element. I guess that matters because it will push that parent element taller by that number, unless the parent element overrides that with a height of its own. The magic comes from the fact that the browser will only paint¹ the first section (where it’s very likely the viewport isn’t over 5000px tall) and defer the painting on the rest. Sorta like lazy loading, but everything rather than media alone. It assumes the next section is 5000px tall, but once the top of it becomes visible, it will actually get painted and the correct height will be known. So assuming your page is just big ass blocks on top of each other, using an extremely large number should work fine there. Godspeed if your site is more complicated than that, I guess.
It’s a good video and you should watch it:
This is yet another thing where you have to inform the browser about your site so that it can Do Performance Good™. It is information that it can figure out by itself, but not until it has done things that have a performance cost. So you have to tell it up front, allowing it to avoid doing certain types of work. With responsive images, if we give images a srcset attribute with images and tell the browser in advance how big they are, including a sizes attribute with information about how our CSS behaves, it can do calculations ahead of time that only download the best possible image. Likewise, with the will-change property in CSS, we can tell the browser when we’re going to be doing movement ahead of time so it can pre-optimize for that in a way it couldn’t otherwise. It’s understandable, but a little tiresome. It’s like we need a stuff-you-need-to-know.manifest file to give browsers before it does anything else — only that would be an additional request!
The accessibility implications are important too. Steve Faulkner did a test applying content-visibility: auto to images and paragraphs:
The content is visually hidden, but in both JAWS and NVDA the hidden
<img>is announced but the content of the<p>element is not. This has to do with how theimgand thepelement content are represented in the browser accessibility tree: Theimgis exposed in the accessibility tree with thealttext as the accessible name. The content of thepelement is not present in the accessibility tree.
He notes that content hidden this way should not be available to screen readers, per the spec. I could see it going either way, like hide it all as if it was display: none, meaning none of it is in the accessibility tree. Or, leave it all in the accessibility tree. Right now it’s a tweener where you might see a bunch of stray images in the accessibility tree without any other context than their alt text. This is an interesting example of new tech going out with more rough edges than you might like to see.
Speaking of alt text, we all know those shouldn’t be empty when they represent important content that needs to be described to someone who can’t see them. They should be like paragraphs, says Dave:
I finally made the simplest of all connections:
alttext is like a paragraph. Word pictures. Basic I know, but it helps me contextualize how to write goodalttext as well as source order of my code.
I don’t want to be overly negative here! The performance gains for setting up a long-scrolling page with content-visibility is huge and that’s awesome. Being able to inform the browser about what is OK not to paint in two lines of code is pretty nice.
The post More on content-visibility appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
CSS Grid is a collection of properties designed to make layout easier than it’s ever been. Like anything, there’s a bit of a learning curve, but Grid is honestly fun to work with once you get the hang of it. One area where it shines is dealing with headers and footers. With a little adjustment in our thinking, we can pull off headers and footers that behave like they are fixed, or have that “sticky” treatment (not position: sticky, but the kind of footer that hugs the bottom of the screen even if there isn’t enough content to push it there, and is pushed away with more content).
Hopefully this sparks further interest in modern layouts, and if it does, I can’t recommend Rachel Andrew’s book The New CSS Layout strongly enough: it covers both of the major modern layout techniques, grid and flexbox.
Let’s implement a fairly classic HTML layout that consist of a header, main content and footer.
We’ll make a truly fixed footer, one that stays at the bottom of the viewport where the main content scrolls within itself, as needed, then later update the footer to be a more traditional sticky footer that starts at the bottom of the viewport, even if the main content is small, but gets pushed down as needed. Further, to broaden our exposure to grid, let’s design our main content holder so that it can either span the whole width of the viewport, or take up a nicely centered strip down the middle.
A fixed footer is slightly unusual. Footers are commonly designed to start at the bottom of the viewport, and get pushed down by main content as needed. But a persistent footer isn’t unheard of. Charles Schwab does it on their homepage. Either way, it’ll be fun to implement!
But before we move on, feel free to actually peek at the fixed footer implemented on the Charles Schwab site. Unsurprisingly, it uses fixed positioning, which means it has a hard-coded size. In fact, if we crack open DevTools, we see that right off the bat:
body #qq0 {
border-top: 4px solid #133568;
background-color: #eee;
left: 0;
right: 0;
bottom: 0;
height: 40px!important;
}Not only that, but there’s the balance of making sure the main content doesn’t get hidden behind that fixed footer, which it does by setting hard-coded paddings (including 15px on the bottom of the <footer> element), margins (including 20px on <ul> in the footer), and even line breaks.
Let’s try to pull this off without any of these restrictions.
Let’s sketch out a bare minimum UI to get us started, then enhance our grid to match our goals. There’s a CodeSandbox below, plus additional ones for the subsequent steps that get us to the end result.
First, let’s do some prep work. We’ll make sure we’re using the whole height of the viewport, so when we add our grid, it’ll be easy to put the footer at the bottom (and keep it there). There’s only going to be one element inside the document’s <body> with an ID of #app, which will hold the <header, <main> and <footer> elements.
body {
margin: 0; /* prevents scrollbars */
}
#app {
height: 100vh;
}Next, let’s set up our header, main, and footer sections, as well as the grid they’ll all sit in. To be clear, this will not work the way we want right out of the gate. It’s just to get us started, with a base to build from.
body {
margin: 0;
}
#app {
height: 100vh;
/* grid container settings */
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
'header'
'main'
'footer';
}
#app > header {
grid-area: header;
}
#app > main {
grid-area: main;
padding: 15px 5px 10px 5px;
}
#app > footer {
grid-area: footer;
}We’ve created a simple one-column layout, with a width of 1fr. If that 1fr is new to you, it essentially means “take the remaining space” which, in this case, is the entire width of the grid container, #app.
We’ve also defined three rows:
#app {
/* etc. */
grid-template-rows: auto 1fr auto;
/* etc. */
}The first and third rows, which will be our header and footer, respectively, are sized with auto, which means they’ll take up as much space as needed. In other words: no need for hard-coded sizes! This is a super important detail and a perfect example of how we benefit from using CSS Grid.
The middle row is where we’ll put our content. We’ve assigned it a size of 1fr which, again, just means it takes up all of the remaining space that’s left over from the other two rows. If you’re wondering why we aren’t making it auto as well, it’s because the entire grid spans the viewport’s whole height, so we need one section to grow and fill up any unused space. Note that we do not have, nor will we ever need at any point, any fixed heights, margins, paddings — or even line breaks! — to push things into place. Such is the good life when working with grid!
You’ll notice in the Sandbox that I used React to build this demo, but since this isn’t a post about React, I won’t belabor those details; React has absolutely nothing to do with any of the CSS Grid work in this post. I’m only using it as an easy way to navigate between different chunks of markup. If you hate React, that’s fine: hopefully you can ignore it in this post.
We have Header, Main and Footer components that render the expected <header> , <main> and <footer> elements, respectively. And, of course, this all sits inside our #app container. Yes, in theory, #app should be an <article> element, semantically speaking, but that’s always looked weird to me. I just wanted to covey these details so we’re all one the same page as we plow ahead.
For the actual content, I have Billing and Settings sections that you can navigate between in the header. They both render fake, static content, and are only meant to show our layout in action. The Settings section will be the content that we put in a centered strip on our page, Billing will be the one that spans our whole page.
Here’s the Sandbox with what we have so far.
The Billing section looks good, but the Settings section pushes our footer off screen. Not only that, but if we scroll, the entire page scrolls, causing us to lose our header. That may be desirable in some cases, but we want both the header and footer to stay in view, so let’s fix that.
When we initially set up our grid, we gave it a height of 100vh, which is the entire height of the viewport. We then assigned the rows for the header and footer an auto height, and the main a height of 1fr to take up the remaining space. Unfortunately, when content exceeds the space available, it expanded beyond the viewport bounds, pushing our footer down and out of view.
The fix here is trivial: adding overflow: auto will cause our <main> element to scroll, while keeping our <header> and <footer> elements in place.
#app > main {
grid-area: main;
overflow: auto;
padding: 15px 5px 10px 5px;
}Here’s the updated demo that puts this to use.
We want our <main> element to either span the whole width of the viewport, or be centered in a 600px space. You might think we could simply make <main> a 600px fixed width, with an auto margins on either side. But since this is a post about grid, let’s use moar grid. (Plus, as we’ll see later, a fixed width won’t work anyway).
To achieve our centered 600px element, we’ll actually make the <main> element a grid container. That’s right, a grid within a grid! Nesting grids is a totally legit approach, and will even get easier in the future when subgrid is officially supported across browsers. In this scenario, we’ll make <main> a grid with three column tracks of 1fr 600px 1fr or, stated simply, 600px in the middle, with the remaining space equally divided on the sides.
#app > main {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 600px 1fr;
}Now let’s position our the content in the grid. Our different modules all render in a <section> child. Let’s say that by default, content will occupy the middle section, unless it has a .full class, in which case it will span the entire grid width. We won’t use named areas here, and instead specify precise grid coordinates of the form [row-start] / [col-start] / [row-end] / [col-end]:
#app > section {
grid-area: 1 / 2 / 1 / 3;
}
#app > section.full {
grid-area: 1 / 1 / 1 / 4
}You might be surprised to see a col-end value of 4, given that there’s only three columns. This is because the column and row values are column and row grid lines. It takes four grid lines to draw three grid columns.
Our <section> will always be in the first row, which is the only row. By default it’ll span column lines 2 through 3, which is the middle column, unless the section has a full class on it, in which case it’ll span column lines 1 through 4, which is all three columns.
Here’s an updated demo with this code. It’ll probably look good, depending on your CodeSandbox layout, but there’s still a problem. If you shrink the display to smaller than 600px, the content is abruptly truncated. We don’t really want a fixed 600px width in the middle. We want a width of up to 600px. It turns out grid has just the tool for us: the minmax() function. We specify a minimum width and a maximum width, and the grid will compute a value that falls in that range. That’s how we prevent the content from blowing out of the grid.
All we need to do is swap out that 600px value with minmax(0, 600px):
main {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr minmax(0, 600px) 1fr;
}Here’s the demo for the finished code.
Earlier, we decided to prevent the footer from being pushed off the screen and did that by setting the <main> element’s overflow property to auto.
But, as we briefly called out, that might be a desirable effect. In fact, it’s more of a classic “sticky” footer that solves that annoying issue, and places the footer on the bottom edge of the viewport when the content is super short.
How could we keep all of our existing work, but allow the footer to get pushed down, instead of fixing itself to the bottom in persistent view?
Right now our content is in a grid with this HTML structure:
<div id="app">
<header />
<main>
<section />
</main>
<footer />
</div>…where <main> is a grid container nested within the #app grid container, that contains one row and three columns that we use to position our module’s contents, which go in the <section> tag.
Let’s change it to this:
<div id="app">
<header />
<main>
<section />
<footer />
</main>
</div>…and incorporate <footer> into the <main> element’s grid. We’ll start by updating our parent #app grid so that it now consists of two rows instead of three:
#app {
/* same as before */
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
'header'
'main';
}Just two rows, one for the header, and the other for everything else. Now let’s update the grid inside our <main> element:
#app > main {
display: grid;
grid-template-rows: 1fr auto;
grid-template-columns: 1fr minmax(0, 600px) 1fr;
}We’ve introduced a new auto-sized row. That means we now have a 1fr row for our content, that holds our <section>, and an auto row for the footer.
Now we position our <footer> inside this grid, instead of directly in #app:
#app > footer {
grid-area: 2 / 1 / 2 / 4;
}Since <main> is the element that has scrolling, and since this element now has our footer, we’ve achieved the sticky footer we want! This way, if <main> has content that exceeds the viewport, the whole thing will scroll, and that scrolling content will now include our footer, which sits at the very bottom of the screen as we’d expect.
Here’s an updated demo. Note that the footer will be at the bottom of the screen if possible; otherwise it’ll scroll as needed.
I made a few other small changes, like minor adjustments to paddings here and there; we can’t have any left or right paddings on <main>, because the <footer> would no longer go edge-to-edge.
I also made a last-minute adjustment during final edits to the <section> element—the one we enabled adjustable width content on. Specifically, I set its display to flex, its width to 100%, and its immediate descendant to overflow: auto. I did this so the <section> element’s content can scroll horizontally, within itself, if it exceeds our grid column boundary, but without allowing any vertical scrolling.
Without this change, the work we did would amount to the fixed footer approach we covered earlier. Making section> a flex container forces its immediate child — the <div> that contains the content — to take up all of the available vertical space. And, of course, setting that child div to overflow: auto enables scrolling. If you’re wondering why I didn’t just set the section’s overflow-x to auto, and overflow-y to visible, well, it turns out that’s not possible.
We haven’t done anything revolutionary in this post, and certainly nothing that couldn’t be accomplished before CSS Grid. Our fixed width <main> container could have been a block element with a max-width value of 600px, and auto margins on the left and right. Our fixed footer could have been made with position: fixed (just make sure the main content doesn’t overlap with it). And, of course, there are various ways to get a more traditional “sticky footer.”
But CSS Grid provides a single, uniform layout mechanism to accomplish all of this, and it’s fun to work with — honestly fun. In fact, the idea of moving the footer from fixed to sticky wasn’t even something I planned at first. I threw it in at the last minute because I thought the post was a bit too light without it. It was trivial to accomplish, basically moving grid rows around, not unlike putting lego blocks together. And again, these UIs were trivial. Imagine how brightly grid will shine with more ambitious designs!
The post How to Use CSS Grid for Sticky Headers and Footers appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Do you want to add a hyperlink in WordPress? Recently, one of our users asked us how to add a link in WordPress.
There are several different ways to add links in WordPress. You can add links in your posts, pages, navigation menu, sidebar widgets, footer area, and more.
In this comprehensive beginner’s guide, we will show you how to add a link in WordPress posts, pages, widgets, navigation menus, and more.
Since this is a detailed tutorial, please use the navigation below to quickly jump to the section you need:
Links are the bloodstream of the internet, which makes them really important.
Basically, most websites on the internet are connected via links, which is why the term ‘web’ or ‘World Wide Web’ was introduced in the first place.
These are the hyperlinked text, buttons, and other elements that you click to go from one page to another or from one website to another.
Imagine visiting a web page with no link for you to click on. You’ll have no option but to click on the back button in your browser.
For individual websites, links tell your users where to click to view more information.
Properly placing links on your website allows you to increase the time users spend on your website. It also helps users discover more content, make a purchase on your online store, or subscribe to your email newsletter.
That being said, let’s take a look at how to easily add links in different areas of your WordPress website.
WordPress makes it really easy to add links in your blog posts and pages using the block editor.
Simply edit your post or page, or create a new one.
Next, highlight the text that you want to attach the link to. This selected text is called the anchor text for the link. Now click on the ‘Link’ button:
You’ll see a box where you can enter a URL. A URL is a web address. For instance, WPBeginner’s guide on how to start a WordPress blog has the URL https://www.wpbeginner.com/start-a-wordpress-blog.
You can simply copy and paste the URL of the post or page you want to link to, like this:
Click the Apply (Enter) button to insert the link into your post.
If you’re linking to content on your own site, then it might be quicker to search for it. Type a word or two from your content title, and WordPress will find it:
Click on the title of the page or post you want to link to, and the URL will be automatically added for you. Again, you’ll need to click the Apply button to put the link into your post.
If you want to set your link to open in a new tab, then click the arrow on the right. You can then click the toggle and set your link to open in a new tab.
Note: We recommend that you only use this option for links to third-party websites. This way your users don’t leave your website while visiting it.
Adding Link in Old WordPress Editor
If you are using the older classic editor instead of the block editor, then the process for adding a link is quite similar.
Open up the post that you want to edit, or create a new one. Find the text you want to use as the link’s anchor and highlight it. Then, click the ‘Link’ button which should appear in the first row of toolbar buttons.
You can then copy and paste the URL you want to link to, or search for it, as in the block editor.
Pasting your URL directly onto the anchor text
Another, even quicker, way to add a link in both the block editor and classic editor is to simply paste the URL onto the anchor text.
First, copy the URL you want to link to. Then, highlight your chosen anchor text in your post.
Next, you can either right-click and select ‘Paste’ or simply press Ctrl+V (Windows) or Command+V (Mac) to paste the URL.
WordPress will automatically detect that you’re pasting a URL, not text, and will turn the anchor text into a link.
Take a look at our tips for mastering the WordPress content editor to learn more about using the block editor effectively.
WordPress allows you to add widgets to your site’s non-content areas like sidebar, footer, or other widget areas.
Some of these widgets are automated and do not have many options. For example, the Recent Posts widget will automatically show links to your recent posts. You don’t need to do anything extra.
However, if you want to add some custom text with links in your sidebar, then you can use the Text Widget.
Go to the Appearance » Widgets page and then drag ‘Text’ widget into your sidebar or other widget area.
You can then type in your text and add a link just as you would when adding one to a post or page.
Make sure you click the ‘Save’ button beneath your widget after making changes.
Do you want to add links to your site’s navigation menu? WordPress comes with a built-in drag and drop menu editor which allows you to create and manage navigation menus on your WordPress site.
Go to the Appearance » Menus page. If you don’t already have a menu set up, then you can create one by entering a menu name.
Next, select the pages you want to add to your menu on the left-hand side, then click the ‘Add to Menu’ button.
WordPress will automatically link to your selected posts and pages. You can move menu items and up and down to rearrange them.
You can also add any link you want to your menu. It doesn’t have to be a page or post on your site. For instance, you could enter the URL of your Twitter profile and add that to your navigation menu.
To enter a link, just click the arrow next to the ‘Custom Links’ section on the left. You can then type in the URL and the text you want to use for the link.
For more help with creating your menu, take a look at our beginner’s guide on how to add navigation menus in WordPress.
It’s often useful to give your links a title. This is the text that appears when someone runs their mouse cursor over the link, like this:
Adding a title often makes it clear where the link leads to. It can be helpful or even reassuring for your readers.
However, WordPress does not allow you to add title to the links with the default editor. You can still add it, and we’ll show you how to do that in a bit.
You may also want to add a nofollow tag to external links. This tells search engines not to pass your site’s SEO score to that link because you don’t own or control the content on that website.
WordPress also does not support nofollow by default either.
Method 1. Use AIOSEO plugin in Gutenberg
All in One SEO plugin (AIOSEO) for WordPress automatically adds the title, nofollow, sponsored, and UGC attributes to your links.
Method 2. Use HTML code in Gutenberg
If you’re using the Gutenberg editor, and don’t want to use AIOSEO, then you’ll need to manually edit the HTML to add title and nofollow attributes to your links.
First, add your link within your paragraph block in the usual way. Next, click on the three vertical dots and select ‘Edit as HTML’ as shown here:
You’ll now see the HTML code for your block.
You can add a title and/or a nofollow attribute to the link like this:
<p>You can find out more about our company on our <a href="https://www.examplecompany.com/about-us/" title="About Us" rel="nofollow">About Us</a> page.</p>
For the title, you can change “About Us” to be whatever you want. With the nofollow attribute, this should always be rel="nofollow". Don’t forget the double quotation marks around the title and the “nofollow” as your link won’t work correctly without them.
Method 3. Use a Plugin with the Classic Editor
If you’re using the Classic Editor, you can install and activate the the Title and Nofollow for Links plugin.
This plugin will add title, nofollow, and sponsored checkbox options to the insert link popup.
Highlight your anchor text and click the ‘Link’ button, then click the cog:
You’ll then see the additional options:
For more help, take a look at our guide on how to add title and nofollow to the insert link popup in WordPress for more information on this plugin.
Do you want to add a button to your WordPress posts or pages? There are many ways you can do this. The easiest is using WordPress’s built-in Button block.
Create a new post or page, or edit an existing one. Then, click the (+) icon to create a new block. Select ‘Button’ from the ‘Layout Elements’ options, or simply search for the Button block.
You can type the text for your button by clicking in the colored area. Enter the URL that the button should go to in the ‘Link’ box.
To change the button’s alignment, or to make the text bold or italic, just use the controls at the top of the block itself.
You can make more changes to how the button looks in the block options on the right-hand side of your screen. For instance, you might want to change the color or add a wider border.
You can also change the link settings here. You can set your link to open in a new tab, and if you want, you can also add the ‘nofollow’ attribute to the link by typing it in the ‘Link rel’ box.
What if you’re still using the old WordPress classic editor? You can install the “Forget About Shortcode Buttons” plugin to easily create buttons while you’re editing a post or page.
Simply install and activate the Forget About Shortcode Buttons plugin. Then, create a new post or edit an existing one.
You’ll see the ‘Insert Button’ icon in the toolbar, on the right hand side:
Click on the button, and you’ll see a popup. Here, you can customize your button, choose colors, borders, add text, add an icon, and include the link itself while seeing a live preview.
For more information and details take a look at our guide on how to add buttons in WordPress without using shortcodes.
You can easily embed certain types of content in WordPress by simply inserting its URL in your post. This is sometimes called creating a “content card” in your post.
Just paste the whole URL into its own paragraph block. The whole tweet, including images, likes, timestamp, and more will be embedded like this:
The process is the same for YouTube videos. Simply find the video you want to use on YouTube and copy the URL from the top of your browser window:
Next, paste the link into your post or page. It’ll automatically embed the video:
As well as being great for Twitter posts and YouTube videos, this method also works for many other types of content. You can find out more from WordPress’s support article on ‘Embeds’.
Do you want to increase your site’s revenue by using affiliate links? Affiliate marketing provides a steady income to many blogs and websites.
All you need to do is add special referral links to products and services that you recommend. When your visitors purchase these products after clicking your links, you get a commission.
The problem that most beginners face is that each product or website they want to recommend has a different URL. It’s tricky to keep track of these, especially if you’re recommending lots of products.
The best way to add and manage affiliate links is by using an affiliate management plugin. We recommend using either Pretty Links or Thirsty Affiliates.
Both of these plugins work by creating redirect links such as www.yoursite.com/refer/partnersitename that send people to your special affiliate link.
The plugins will add a new option to your WordPress menu where you can add your affiliate links. Here’s how that looks with ThirstyAffiliates. You simply copy and paste your special affiliate link into the ‘Destination URL’ box.
You can set specific options for your link on the right hand side, deciding whether to nofollow it, open it in a new window/tab, and more.
Once you’re done, click ‘Save Link’.
After you’ve set up your affiliate links, you can easily add them into your posts and pages. In a paragraph block, click the down arrow then select the ‘Affiliate Link’ option:
Next, type in the start of whatever you named that affiliate link. In our example, that’s “Our Affiliate Partner”.
You can then click the name and click ‘Apply’ to add the affiliate link to your post.
If you ever need to change an affiliate link (e.g. if the company you’re linking to moves to a different affiliate program) then that’s really easy to do.
You just change it once in your dashboard, under “ThirstyAffiliates” or “Pretty Links”. The redirect link stays the same as before, but it’ll now redirect to the new affiliate link everywhere it’s used.
For more handy affiliate plugins, check out our post on the best affiliate marketing tools and plugins for WordPress.
Occasionally, you might want to add a link to your site using HTML code. This could happen if you need to use a custom HTML block or widget.
You might also need to directly edit a link in your theme file. Just make sure you always use a child theme so you don’t lose your changes when you update the parent theme.
It’s easy to create a link in HTML. To try it, add a custom HTML block to a post or page. You can find this block under ‘Formatting’ or you can search for it using the search bar.
Next, you’ll see a box where you can write HTML. Copy this code into the box:
<a href="https://www.yourlinkhere.com">Text</a>
It should look like this:
You can click the ‘Preview’ tab to see how your code will look in your post or page:
Now click back to the ‘HTML’ tag. Change the URL to the URL you want to link to. Change the word ‘Text’ to whatever word or words you want to use for your link.
To add a title to your link, you’ll need to include it in the code like this. You can change “This is the title” to anything you want.
<a href="https://www.yourlinkhere.com" title="This is the title">Text</a>
If you want your link to open in a new tab, simply add target="_blank" to the HTML code, like this:
<a href="https://www.yourlinkhere.com" target="_blank">Text</a>
If you want your link to be nofollowed, add rel="nofollow", like this:
<a href="https://www.yourlinkhere.com" rel="nofollow">Text</a>
You can include all of these at once. This is how a link with a title, that opens in a new tab and is nofollowed, would look:
<a href="https://www.yourlinkhere.com" title="This is the title" target="_blank" rel="nofollow">Text</a>
That’s how you create a link in HTML, if you ever need to.
An anchor link is a type of link on the page that brings you to a specific place on that same page. It allows users to jump to the section they’re most interested in.
Take a look at the animated screenshot below:
These type of links are really helpful when writing longer tutorials or content, so your users can easily jump to the section they’re most interested in.
We have created a detailed step by step guide on how to easily add anchor links in WordPress.
Want to add social share links or buttons on your site?
These links make it easy for your users to share your content on their favorite social networks. Sometimes social share links or buttons are also accompanied by total share count.
We don’t advise users to add these links manually. Instead, you should always use a social share plugin.
We have a step by step guide on how to add social share buttons in WordPress.
We hope this article helped you learn how to add a link in WordPress. You may also want to see our beginner’s guide on how to create a professional business email address, and how to start an email newsletter to grow your audience.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post Beginner’s Guide on How to Add a Link in WordPress appeared first on WPBeginner.