Welcome to Girl Develop It
We create welcoming, supportive and accessible environments for women and non-binary adults to learn software development.
We are dedicated to providing a welcoming and comfortable environment for all to learn coding and every attendee is expected to uphold our Code of Conduct:
girldevelopit.com/codeofconduct/
bit.ly/gdi-incident-report
What Does
Girl Develop It
Teach?
Web Development
Data Science
UX Design & Research
Workforce Classes
Career-Building Events & Conferences
Find All Our Classes & Events:
www.girldevelopit.com
Housekeeping
- Display your preferred name and pronoun.
- We are here for you!
- Every question is important.
- Participate, Experiment, Have Fun!
Introduction to WordPress
Block Theme
Design & Development
Instructor Intro
Anne S. Katzeff
Web Designer, Artist, Teacher
ASK Design
- 20+ years in print design
- 10+ years in web design
- 15+ years teaching
- 15+ years painting
- Webmaestro: 20+ websites
- ASK Design specializes in designing custom websites for creative folks, small businesses, and nonprofits.
TA Intro
Name
Title(s)
Welcome!
Tell us about yourself:
- Name?
- Location?
Welcome!
Rate your experience with WordPress block themes:
- - Absolute beginner
- - Minimal experience (a few tutorials)
- - Some experience (familiar with the basics)
Agenda
- Figma basics
- WordPress and Block theme basics
- Child themes
- Full Site Editor (FSE)
- Version control in Github
- Q & A
Course Goals
- Get familiar with Figma wireframes, designs, layers
- Use blocks to edit content and form patterns, template parts, templates
- Use Create Block Theme plugin
- Create and Save Changes to a Child Theme
- Grasp core controls in Theme.json
- Customize a theme with the FSE
- Modify Global Styles
- Add Custom CSS
- Practice Version Control in Github
Figma basics
What is Figma?
Figma is a collaborative design and development tool.
DEMO
Wireframes, designs, layers
WordPress and Block Theme basics
What is WordPress?
Content Management System
- Separates Content from Design
- Started in 2003 as a blogging platform
- Has evolved into a website building framework & full-fledged CMS
- Currently the most prominent CMS in the world
What is a Block Theme?
3 Core Principles
Blocks, Templates, Styles
Block themes are built entirely with blocks.
Each content type and layout option is a block:
paragraphs, headings, images, navigation, headers, footers, etc.
DEMO
What is a Block Theme?
How Block themes differ from Classic themes
- Customization and Design
- Underlying Code
CLASSIC: Uses a Customizer. Theme settings, widgets, and Custom CSS.
BLOCK: Uses Full Site Editor. Global settings get stored in DB. Custom CSS.
CLASSIC: PHP templates - Functions.php
BLOCK: HTML templates - Theme.json
Let's Develop It!
Get Started:
Build a Basic Page with Blocks
- Create New Page
- Heading block: Type in a headline
- Text block: Insert placeholder text
https://www.launchthedamnthing.com/blog/15-fun-alternative-placeholder-text-generators - Image block: Upload an image file from your desktop
- Use another block
- Save the changes
Child Themes
Child Themes
Child themes are customized versions of an original (“parent”) theme. If you make changes to the parent theme directly, you risk losing those changes whenever the theme is updated. The key benefit of a child theme is that you retain all of your customizations when the parent theme is updated.
Child Themes
- Child theme inherits everything from parent
- Child theme overrides parent theme files or theme.json features
- Child theme extends parent theme with new files and theme.json features
Child Themes
Requirements
- Theme folder
- style.css - provides information about the theme
- optional, yet necessary: theme.json - customizations
Child Themes
Create Block Theme plugin
One great feature of the Create Block Theme plugin is its ability to generate a child theme.
DEMO
- Install and activate 2024 Theme
- Make and Save Changes to a Child Theme
- Grasp core controls in Theme.json
Let's Develop It!
Get Started:
Create a Child Theme
- Use a unique name "xyz-child"
- Export .zip archive of the child theme
- View theme folder and its contents, esp. theme.json file
Full Site Editor (FSE)
Full Site Editor (FSE)
DEMO
- Introduce the FSE UI
- Admin. menu
- Global Styles area
Let’s get started with this editing interface
and learn about some of its key features!
Customize a theme with the FSE
DEMO
- Global Styles
- Modify Global Styles: colors, fonts, sizes
- Add Custom CSS: unique color and size for a section heading
Let's Develop It!
Get Started:
Modify Global Styles
- Color: Body text and heads
- Fonts: Body text and heads
- Size: Body text and heads
Get Started:
Custom CSS
- Create a custom style for an ID or a class of your choosing
Put it Together
Update Child Theme
- Export .zip archive of the child theme
- View changes in theme.json
Questions?
Version Control in Github
Github Desktop
In order to take advantage of Github, we'll use Github Desktop. This application allows you to send and receive copies of files to and from your desktop and your Github repository.
Since I’m a visual person, I shy away from Terminal (Command Line), which is the native app for Git. Github Desktop has a simple, friendly user-interface.
Download Github Desktop and install.
Alternative GUIs
Visual Studio Code
Visual Studio Code (VS Code) is my current preferred code editor, but you can use whatever you’re most comfortable with. VS Code is streamlined and has lots of features, such as a smooth integration with Github Desktop.
Download Visual Studio Code and install.
Alternative Code Editors
Repositories!
Github Desktop
Create Project Folder
There are various ways to add projects to Github as repositories: directly in Github or on your desktop. In my workflow, I usually create the project folder locally and then upload it via Github Desktop, to a repository in Github.
Github Desktop
Add Existing Repository
DEMO
Go to the upper-left corner of the Github Desktop window and click on the down arrow next to “Current Repository”.
The “ADD” button offers 3 options:
Clone, Create, Add.
- Clone = Duplicates an Existing Repo
- Create = Create a New Repo
- Add = Adds an Existing Repo
Add Existing Repository is discussed here.
Github Desktop to Github
DEMO
Using Github Desktop, you can add repositories to Github. Go to the upper-left corner of the Github Desktop window and click on the down arrow next to “Current Repository”.
- ADD button > Add Existing Repository
NOTE: This is the same as Create New Repo without naming it, reviewed in an earlier slide. - Local path field: click on the “Choose…” button to select the local path
- Click on the blue “Add Repository” button
- Click on the blue “Publish repository” button to publish the local repository to Github
Github Desktop to Github
DEMO
- ADD button > Add Existing Repository with prompt to create repository
- Local path field: click on the “Choose…” button to select the local path
- Sometimes, you’ll get an alert: “This directory does not appear to be a Git repository. Would you like to create a repository here instead?” Click on create a repository.
Github Desktop to Github
DEMO
- ADD button > Add Existing Repository with prompt to create repository
- Fill in the fields for: Repository name (required) and Description (optional)
- Check the box next to: “Initialize this repository with a README” (unless the project already has a README file)
- Git Ignore = None
- License = GNU GPLv3
- Keep the same Local path as in the previous window
- Click on the blue “Create Repository” button
- Click on the blue“Publish repository” to publish the local repository to Github
Let's Develop It!
Get Started:
Use Github Desktop to Synchronize a Local Repo to Github
- Add Existing Repo
- Add Existing Repo with prompt to create repo
Review:
How Do We Get Our New Repo from Our Desktop to Github?
We could create a new repo on Github and upload the desktop repo files to it.
OR
We could synchronize Github Desktop with Github.
Github Desktop
Synchronize Github Repositories with Local
No matter where the repository is originally created-–Github or local machine-–an exact duplicate of it should exist in both places. If anything is adjusted on Github, the modifications should be incorporated into your local files. Similarly, when you work on the files locally, send those changes to Github. For these reasons, you need to synchronize Github with Github Desktop.
Github Desktop
Synchronize Github Repositories with Local
Push Changes from Local to Github
It’s a good idea to periodically send any local repository changes to Github. I tend to group my edits into categories, like navigation, fonts, mobile-responsive, etc. For example, when finished with a series of refinements to the navigation, I’ll commit them to the main branch.
Github Desktop
Launch VS Code and Github Desktop
DEMO
With both programs open, you can easily move from one to the other. Do a few file edits in VS Code, then go to Github Desktop.
Github Desktop
DEMO
- Find the repository in the listing in the left sidebar and select it
- Click on the “Changes” tab on the top of the left sidebar
- At the bottom of the sidebar, fill in the fields for Subhead (“Update xyz.css”) and Description. The descriptions, which can be brief, will help you remember what you did and assist colleagues who may be working with you on the project.
- Click the blue “Commit to main” button
- Push the committed changes to Github by clicking the blue “Push origin” button
Let's Develop It!
Get Started:
Use Github Desktop to
Push Local Changes to Github
- Edit Local File
- Commit to main
- Push origin
You did it!
Photo credit: Hannah Busing cc
Share What You've Learned!
Provide your Github handle in the chat!
Give Us Your Feedback
Survey Link
Q&A
External Resources
Upcoming Class:
Hands-On Python Projects: A Code-Along Series
Keep in Touch