WORDPRESS PLUGINS & SHORTCODES
Shortcodes: A WordPress shortcode is a small piece of code enclosed in square brackets, such as [shortcode], that allows you to embed dynamic content or functionality into your WordPress posts, pages, or widgets. Shortcodes are a convenient way to add complex features or elements to your website without needing to write custom code.
WordPress provides some built-in shortcodes for common tasks like embedding videos, creating galleries, or adding contact forms. Additionally, many plugins and themes also include their own custom shortcodes to extend the functionality of your website.
For example, if you’re using a contact form plugin, it might provide a shortcode like [contact_form] that you can place on a page to display a contact form. When you publish the page, WordPress will replace the shortcode with the corresponding functionality or content generated by the plugin.
Shortcodes are user-friendly and make it easy to incorporate various elements and functionality into your WordPress site, even if you don’t have extensive coding knowledge.
Introduction to WordPress Plugins, Shortcodes, and Galleries & Contact Forms:
Notes Link: https://www.inmotionhosting.com/support/edu/wordpress/318-adding-a-form-using-contact-form-a-in-wordpress/
WORDPRESS CSS
Knowing how to add custom CSS to a WordPress website is important for several reasons:
Customization: WordPress themes provide a certain degree of customization, but to achieve a unique and personalized look for your website, you often need to modify its appearance using CSS. Custom CSS allows you to change fonts, colors, layouts, and other styling aspects to match your brand or design preferences.
Responsive Design: CSS is crucial for creating responsive designs that adapt to different screen sizes and devices. You can use CSS media queries to adjust your website’s layout and styling for mobile, tablet, and desktop users.
Fixing Issues: Sometimes, WordPress themes or plugins may not perfectly align with your vision or may introduce styling conflicts. Custom CSS can help you fix layout issues, adjust spacing, or override default styles to make your website look and function as intended.
Accessibility: Custom CSS can be used to improve the accessibility of your website. You can adjust text sizes, contrast, and other design elements to ensure that your site is usable by individuals with disabilities.
Branding: To create a cohesive online presence, you may want to incorporate your brand’s colors, typography, and visual elements into your website. Custom CSS allows you to align your website’s design with your brand identity.
Performance: While this isn’t the primary purpose of CSS, efficient CSS coding can help improve your website’s loading speed. By minimizing redundant code and optimizing styles, you can enhance performance.
Troubleshooting: When issues arise on your website, having a basic understanding of CSS can be invaluable for troubleshooting. You can inspect elements, identify problematic styles, and make quick adjustments as needed.
Future-Proofing: As your website evolves, you may want to make design changes or add new features. Knowing how to work with CSS gives you the flexibility to make these updates without relying solely on theme or plugin developers.
Learning and Control: Learning CSS is an essential skill for anyone working with web design and development. It empowers you with greater control over your website’s appearance and functionality.
In summary, adding custom CSS to a WordPress website is essential for achieving a unique and tailored design, resolving styling issues, ensuring accessibility, and maintaining control over your site’s appearance and behavior. While you don’t need to be an expert in CSS, having a basic understanding of it can greatly enhance your ability to create and maintain an effective WordPress website.
Using HTML Inspector & Adding CSS Style Code into WordPress:
Notes Link: https://www.hostinger.com/tutorials/wordpress-custom-css
Discussion 4 - Exploring WordPress Plugins
*Submit Discussion into D2L
Search for WordPress Plugins on Google… Share a link to two plugins that you find looks interesting or helpful for a website! And you can’t share the same plugin that someone else has shared!
Assignment 4: Win a Trip Multiple Page WordPress Website
*Submit Assignment into D2L
Win a TRIP! WordPress Website:
A new client has reached out after seeing your Win a Trip website, and they would like one as well! However this time they are requesting that it needs to be built in WordPress with the default Twenty Twenty Theme… You can still decide where the trip is, and what it all includes…
Start by creating a brand new WordPress website in your web host.
Your new WordPress Website should include the following pages:
-Home (A basic overview of the entire trip, similar content from past assignment)
-Photo Gallery
-Sweepstakes Sign Up
Your new WordPress Website should include the following plugins:
-Photo Gallery Page should use the Modula Photo Gallery Plugin
-Sweepstakes Sign Up should use the Contact Form 7 Plugin
Your new WordPress Website should include the following content:
-Home page should have at least 1 photo, and include a short description of the trip, as well as a bulleted list of features of the trip that is all included. Also include a Total Trip Value, and a Sign Up Now link or button linking to the Sign Up page.
-Photo Gallery should have at least a dozen images showing off the destination or attractions or activities of the trip (Use pexels.com Free Stock Photo Website or Google Images however if you do use any content please make sure you give credit to where the content comes from under your content), also include another Sign Up Now link or button linking to the Sign Up page.
-Sweepstakes Sign Up form should be asking for Name, Email, and Why They Should Win The Trip!
OPTIONAL CHALLENGE: Add the following CSS Code into your WordPress website and see what it does! Try adding your own styles and changing these as well!
a {
font-weight:normal !important;
text-decoration:none !important;
}
a:hover {
font-weight:bold !important;
text-decoration:none !important;
}
ul li a {
font-weight:normal !important;
}
ul li a:hover {
font-weight:bold !important;
text-decoration:none !important;
}When finished, submit a link! Also, if you added the optional CSS code above, what is it actually doing to your website? Did you notice the change it made? Are there any other CSS code changes you’d like to try making on your own?
Thank you and Good Luck! Look forward to sharing your work!
Sample Student Work
