FSE FTW - Full Site Editing For The Win - WordCamp 2022

Personal branding and online presence are made easier with full site editing! Do you have a personal site? Is it attractive? Is it current? No more excuses, full site editing makes it too easy not to put your best website out for the world to see. Put up a photo with a few links, a resume, recent projects, a collection of your favorite social media, a simple linktree, etc. We’ll go through some fun examples and see some blocks and block patterns to quickly get up and running.

1. FSE FTW
Full Site Editing For the Win

2. Evan Mullins
@circlecube

WordPress Engineer at Bluehost focused
on building tools for customers and
contributing to WordPress.
Away from the keyboard, I have enjoyed
traveling as a digital nomad family for the
past 4 years, but have just recently settled
down for a season in Atlanta, Georgia.

3. Personal branding and online presence are made
easier with full site editing!

Do you have a personal site? Is it attractive? Is it
current? No more excuses, full site editing makes it
too easy not to put your best website out for the
world to see. Put up a photo with a few links, a
resume, recent projects, a collection of your favorite
social media, a simple linktree, etc. Weʼll go through
some fun examples and see some blocks and block
patterns to quickly get up and running.
FSE FTW

4. Follow along with notes, examples and code! Links on my personal site:









evanmullins.com
FSE FTW

5. The Case For
A Personal Website

6. Do you have a personal website?
●Is it WordPress?
●Is it updated to latest version?
●Is it version controlled?
●Is the content current?
●Is it sometimes overwhelming?

Those of us that do have a site may find it is hard to keep current
and we end up leaving it to languish for far too long.
Often we find that the Cobblerʼs Children Have No Shoes

7. Many many reasons and uses for a personal site
●Personal Branding
●Control your online identity
●Share thoughts - Write a blog
●Own your content
●Contact info
●Social Media links
●Resume (can lead to a job)
●Portfolio
●Testimonials
●Code examples and walkthroughs
●Speaking engagements
●Itʼs a great way to get started building sites!
●All the cool kids are doing it!

8. Things to Consider with your personal site:
●Your purpose/focus
○Sharing links
○Write posts or poetry
○Code
○Post Images
○Sell things
●Domain name
○Use your own name (or handle) if you can.
○Find something that is available (and affordable) but also simple.
○TLDs: .com .blog .me .site .online .xyz … (or get creative with a vanity url)
●Remove Barriers to keeping it current
○Find your focus and start there
○Start small and iterate
○Enable Auto Updates

9. Some Helpful
Block Examples

10. Great Blocks and Patterns for Personal Sites
●Business Card
●Cover block
●LinkTree Pattern
●Social Links
●Resume - Job Block
●Resume - Skills Block
●Speaking - Talk Block
●Code Examples
●Contact Form
●Testimonials
●Portfolio
●etc.

11. Business Card Block Pattern
Block pattern
resembling a
business card.
Meant for a quick
easy setup for a
personal site.
Create a site, make
a single page your
home page and
add this block
pattern.

12. Cover Block
Simply use a cover block to
give some easy nicely
formatted content on your
site. It's a simple and
modern way to start a site
with a landing page or
panel.

13. Link Tree Block Pattern
This block pattern recreates the
popular linktree design pattern
where social users can only share
a single link in their bio. This
makes it easy to create a page
containing all the links and direct
visitors to that single page. If you
want a personal site but use social
media primarily, this could be a
nice block to showcase or even
just use as your whole site.

14. Social Links Block
A social block is a handy way to
include a lot of links to other
social networks. This is great for
a personal site so visitors can
find you elsewhere online.
Pro Tip: add classes to any
custom links and css styles to
add a background image to
keep the link styles nice,
recognizable and consistent.

15. Job Block
A block to list your job experience
on a resume page.
Hereʼs a custom block as a
variation on columns block. There
are some preset values and
layout, but this didn't require full
on custom block development.

16. Skills Block
A custom block that lists skills
and a star rating for each skill.
This could be useful if you
want a visual on a resume for
example.

17. Talk Block
A custom block to
display a talk with details
and format links to the
talk, slides and video.

18. Get Inspired

19. Some Inspiration
evanmullins.com
aarondcampbell.com
jonathandesrosiers.com
wpscholar.com
wearnhardt.com
helen.blog
nomad.blog
jeanbaptisteaudras.com
matiasventura.com
hellofromtonya.com
jeffpaul.com
ma.tt
josepha.blog
atlantawpcoach.com
angelajin.blog
courtneyr.dev
jjj.blog
felix-arntz.me
noisysocks.com
ryanwelcher.com
fabian-kaegy.com
joesnellpdx.com
corymiller.com
justintadlock.com
tammielister.com
chriscoyier.net
…

20. Questions?

Win big with your own FSE site!

Examples:
evanmullins.com

Talk notes:
https://github.com/circlecube/evans-block-them
e/blob/main/docs/talk-fse-ftw/index.md

THANK YOU!