I’ve had a couple of questions recently about ‘read more’ buttons. Usually a Read More button in the WordPress archive takes you to the relevant post page, but what if it just revealed the full content on the archive page instead?
WordPress by default has two kinds of content that can appear in the Archives, or Post List. The Page Content, or an Extract. WordPress can also automatically create an extract from your content, but often the automatic extract will have no formatting, making the extract preview hard to read.
A solution I’ve occasionally used, is an Archives page using Elementor Loop Grid, set to display the whole post content. A ‘read more’ button is added, where clicking the button expands to display the full post. The post can be contracted to a preview.
To do this you will need to use CSS for the box, and some Javascript to control the box size and change the ‘read more’ button to a ‘read less’ button.
Start by creating your Elementor Loop Grid. This will display your post name, featured image, post meta, and use Post Content rather than extract. Add a button with ‘Read More’ text below the Post Content Widget (or text widget populated by dynamic content).
The Read More button and the Post Content Container, will need a custom class, which you can add on the ‘advanced’ tab of each widgets settings.
I have given the Read More button a custom class of .read-more-btn and the Post Content container is .readmorecontainer
Add the following CSS to your sites global CSS or on the Loop Grid Widgets Advanced page if you prefer.
/* Container for the post content */
.readmorecontainer {
overflow: hidden;
max-height: 24em;
transition: max-height 1s ease-in-out;
}
/* Expanded state of the post content */
.readmorecontainer.expanded {
max-height: none;
}
.read-more-btn {
cursor: pointer;
display: block;
margin-top: 2%;
}
Now add the following Javascript to Elementor’s custom code section.
document.addEventListener('DOMContentLoaded', function() {
const readMoreButtons = document.querySelectorAll('.read-more-btn');
readMoreButtons.forEach(button => {
const postContent = button.previousElementSibling;
if (postContent.scrollHeight <= postContent.clientHeight) {
button.style.display = 'none';
}
button.addEventListener('click', function(event) {
event.preventDefault();
if (postContent.classList.contains('expanded')) {
postContent.style.maxHeight = postContent.scrollHeight + 'px';
postContent.offsetHeight;
postContent.style.maxHeight = '24em';
postContent.classList.remove('expanded');
this.textContent = 'Read More';
postContent.scrollIntoView({ behavior: 'smooth', block: 'start' });
} else {
postContent.style.maxHeight = postContent.scrollHeight + 'px';
postContent.addEventListener('transitionend', function handler() {
postContent.style.maxHeight = 'none';
postContent.removeEventListener('transitionend', handler);
});
postContent.classList.add('expanded');
this.textContent = 'Read Less';
}
});
});
});
(Original Post 3:50pm 24 June 2024)
I did have a preview of this on my FAQ page, but I’ve temporarily removed it as I didn’t have time to update and keep it tidy, it looked a bit messy with latest Elementor updates. I’ve added it to the bottom of this post instead! (Sorry it’s messy, on my todo list…)
(Updated 7 Nov 2025)
‘Read More to expand’ example from FAQ’s.
I bet you can’t believe I’m writing the same blog post for the 3rd or 4th year in a row? (Who’s counting?)
But it’s that time of year again! The kōwhai and cherry trees are blooming and it’s time for an unsolicited lecture on how to spring clean your poor neglected website. (Skip this one if we are already managing your site for you, you can just relax).
Lets start with the ABCs….
If you’re one of our clients on a long-term maintenance plan, you have access to backups of your website completely separate from our copies. If you have forgotten how to find them give us a yell!
Next… SPRING!
Now if you are a truly dedicated blog reader you may have noticed I changed the acronym again. I make no apologies and will likely change it every year, so keep checking in.
Let’s start!
Previously I’ve had Server or SEO in this spot, because Security is a year round consideration, but I thought I’d give Security the leading spot this year. Here are some points to consider in your website spring cleaning.
Admin Access
Go through your website user list and check who has access. Do you know every admin account holder? Does anyone have an admin account they don’t really need? Perhaps an author or editor account would be more appropriate in a lot of circumstances.
Login Security
Use 2FA, passkeys where possible, don’t create logins associated with shared email addresses. Don’t reuse passwords.
Your email address is probably used to login to a lot of accounts, including your website. So make sure your email address is secure, has 2FA, is free from forgotten or malicious forwards and auto-replies. Check DMARC, SPF, and DKIM records are correct.
Data
Is your website hoarding data it doesn’t need to? 10 years of contact form questions? Customer accounts and purchases beyond what’s required for tax purposes? Reducing the data your website holds for other people, can help protect them in a security breach. Also, make sure you know your obligations under the Privacy Act. Your business should have a Privacy Officer, and they should be fully aware of the responsibilities of their role.
Plan
What’s your plan if your website or email did get hacked? Whether by a disgruntled ex-employee or a quiet little malicious script? What is at risk? Your content? Other peoples data? Your business’s reputation? Your main lead generator? Have a think, and make a plan. Your plan may involve restoring from a back-up, so remember those ABC’s from earlier!
Now I don’t mean to be WordPress-centric, but update your plugins. And if you haven’t been doing this regularly you might need to weigh up the risks and benefits of enabling auto-updates.
Plugins are a great way to add functionality and solve a problem. Sometimes, they get forgotten after a problem is solved. Sometimes multiple plugins get added that solve the same or similar problems. Its never a bad time to review your plugins and see if you can remember what they all do. Keeping a spreadsheet of plugins and notes about their purpose is a great idea if you genuinely need a lot of plugins and a method to keep track of them.
And tying Plugins back to Security… watch out for plugins that haven’t been updated in a long time, they may be abandoned or no longer maintained, and they may have unpatched security risks or not be compatible with newer versions of WordPress etc.
Not on WordPress? The equivalent may be called apps or extensions or modules. Essentially a way that extra code and functionality is added to the base model of your website platform. Check what you have, and that its still what you need and still functions correctly. No point paying for an extra SquareSpace Ecommerce subscription if you’re not actively using your website to sell products.
Look at your website on every different device you can find, and start a task-list of problems. Next, complete basic website functionality on every different device you can find, and start a task-list of problems. Finally, set yourself to solving the problems. (It’s ok, we can help if you get stuck!)
Every year, there are more devices available, and every year there seem to be more techniques for solving the problems of getting every page to work nicely on every device.
Accessibility also fits well within this topic. Your website not only should work for every device, but also every human associated with a device. Human-first design. Does your website work with screen reading software, keyboard first navigation, dark and light mode, is it simple to navigate, can it be zoomed in on without breaking responsiveness? Does language translation work on your website? This can be a topic that sometimes gets a bit overwhelming especially when creating a DIY website with a small budget. If you can’t get things perfect right away, work on continuous improvement.
Pagespeed Insights have also added a new metric I’m going to shoehorn in here, Agentic Browsing. How does your website appear to the allegedly friendly robot citizens of the web? Can they find the information they need to help their humans? Standards for this are still emerging at the time this post is being written, but if you’re aiming to ensure your website is accessible to a wide range of humans, that will likely assist with this category too.
Previously this section was Intention – which I still think is important, and Integrations has some crossover with Plugins, but I think Integrations needs its own section this year. You can check out a previous year if you have a basic brochure site where Integrations are less relevant.
What other platforms or 3rd party software is your website integrated with? Try and count them, unless you have a very basic brochure site you might be surprised. Think about what you consider an integration as well. Can your website automatically send emails? Can it process purchases? This comes back again, to security. If your website is hacked, what could the knock-on effects be? Think about this carefully when adding any new integrations. Especially integrations that may involve unpredictable effects, like LLM’s and Agentic AI.
Do you have a development site and staging site where you can test integrations before they go live?
This one relates closely to responsiveness, in that the Navigation needs to work on all those devices and for people who use websites in a variety of ways.
Your website should have a menu at the top of the page. I know, boring right? These ‘boring’ design aspects are what humans expect. And when they don’t get what they expect they don’t usually say ‘wow, this website is so interesting and subversive’ they just click the back button and move on with their lives.
Usually. Unless the website is generally extremely cool and fun like this one crossstmusicfestival.co.nz
Cross Music Festival (at time of writing) have their menu at the bottom of the page, and the whole site seems to spin around you when you use it. It’s quite a dizzying experience, and very cool for a music festival, but if you’re a B2B or service business or pretty much anything outside of experience based arts, then just put your main navigation menu at the top.
Your website should usually have a footer (unless you are a cool music festival in which case you are exempt) and the footer should contain helpful common links like terms and conditions, contact, and the business location or address. NZ businesses often include their NZBN, which is a helpful signal for local customers these days as a lot of overseas businesses seem to have a .nz version of their website to appear more local than they really are.
You can use heatmapping to track customer journeys and see where people click as they use your website. This can help guide decisions around whether your navigation is currently helping or hindering your potential customers.
Check that images are of a decent resolution, have Alt Text describing them, and are relevant.
Ensure that logos are used as directed in the brand guidelines provided by your graphic designer, eg correct spacing around them.
Doublecheck you’re using the fonts and colours your designer recommended, or if you have decided to go off on your own tangent and just have fun with it, try to be consistent.
the rest of the things on the never-ending to-do list?
Try to incorporate as much as you can on a monthly to-do list… and consider outsourcing some of the workload to us if your website is too big and getting out of hand!
For our clients sites we always have these things and more in mind when providing monthly care plans. This becomes a considerable workload on websites with hundreds of products, pages, and posts, or multiple authors and editors, at which point our focus is on the pages that seem most valuable to customers. We may use analytics to track user journeys and make recommendations for focus areas, to keep within your budget as your website grows.
Have a lovely spring, and do let us know if this post has been helpful, or if you need our help with any of the topics.
Cheers,
Kristie.
Things have been busy here, and I just realised it’s been roughly a year since I last posted an update. Here’s broadly what I’ve been up to in the past 12 months:
Thanks for dropping by!
Cheers,
Kristie
I keep telling myself I’ll write a daily update, a weekly update, at least a monthly update, perhaps even a yearly update…
I can’t just go a year without posting an update but I’m getting close to it!
Here’s a brief summary of what I’ve been up to lately:
Thanks for dropping by!
Cheers,
Kristie
I’ve had this question a few times recently, and at the time of writing (a grey Monday afternoon in Autumn 2025 while a warm norwester is giving way to a chilly southerly*) it looks like the Elementor documentation is out of date, so I can’t refer people directly to the Elementor documentation.
Why trigger an Elementor Pop-up with a button or link? You might want to use a button to open a booking form or contact form in a Pop-up, rather than sending a customer to a different page.
So here’s how to do it. (And if you get stuck, you can always give us a yell.)
Before you begin, create your Pop-up and save it without any triggers (so it won’t ever appear unexpectedly). The Elementor documentation is correct for creating popups, at the time of writing (autumn 2025) so if you haven’t already created your Pop-up and you don’t know how, follow Elementors instructions first then come back and follow mine: https://elementor.com/help/how-do-i-create-my-first-popup/
1. Go to the link that you want to trigger the pop-up from, and select the Dynamic Tag Button on the link (pictured below).
2. Scroll down to find ‘Popup’ in the dynamic tag menu.
3. Select the spanner icon to view the options to set up the Pop up.
4. Find and Link the Popup you’ve previously created. (In the example below I’d named the popup Contact Popup, but I used the term ‘book’ to search for it as it related to a booking page.)
The original Elementor documentation for this is here: https://elementor.com/help/how-to-trigger-a-popup-on-a-link-click/ Last time I had tried to refer someone to this, it was out of date and gave incorrect instructions. Hopefully it gets updated by the Elementor team at some point in the future 🙂
Fun fact**: There is some debate about whether Pop up should have a hyphen, no hyphen, or be a single word. Pop up, Pop-up, Popup. What’s your preference?
*I’m in New Zealand, in the Southern Hemisphere. We have autumn 6 months before the Northern Hemisphere gets it, not 6 months later ok.
**Disclaimer: Fun facts may not actually be fun, or even facts.
Unbranded or White-label services are services provided by one business then rebranded and sold by another as their own.
Easy Web Things provides unbranded web-development services to Digital Marketers, Graphic Designers, and IT Companies, enabling other businesses to provide our services under their own brand.
Converting designs to fully functioning websites.
Providing Technical assistance to other agencies
From custom functionality to full website design.
Easy Web Things provides unbranded services, working behind the scenes for other agencies to deliver high-quality WordPress solutions under our partners own brands.
From implementing custom designs to creating fully functional websites, we allow agencies to expand their services without taking on additional full time staff.
We generally don’t display the names or projects of companies who use our unbranded services. This ensures our partners can confidently make us part of their team and present our work under their own branding.
We honour our non-compete agreements. If we are approached directly by our partners clients we refer them back to our partners.
Our partners often face challenges such as:
Easy Web Things provides a range of WordPress services tailored to each partner’s needs:
For a Designer:
A designer for a Digital Marketing Company provides designs for their clients websites. Some designs feature custom interactive elements that the designer struggled to achieve in WordPress. Easy Web Things implemented the design using custom code. This allowed the designer to provide a unique end product to their client, without needing to learn complex development skills themselves.
For a Digital Marketing Company:
A Digital Marketing Company often receives requests for integrations and troubleshooting WordPress websites, that is outside their usual expertise. We work with their clients as requested, to provide WordPress technical support, troubleshooting, and development services.
For an IT and Hosting Company:
An IT and hosting company receives requests for web design services. Easy Web Things provides an unbranded solution, taking on the entire web design and development process. The IT company delivers sites to their clients under their branding, enabling them to provide a complete WordPress design and development solution.
Agencies save time and avoid technical hurdles by outsourcing tasks that are outside of their area of expertise.
Agencies can confidently offer additional services, boosting their value to clients.
Agencies can meet intermittent demand increases, without the ongoing cost of hiring full-time in-house WordPress experts.
This time last year, I posted about spring cleaning your website. And guess what… it’s September again, and I’m going to write about it again!
Time to review and consider S.P.R.I.N.G – Server, Plugins, Responsiveness, Intent, Navigation, Graphics.
Important: Backup your site before making changes. I know Spring doesn’t have a B for Backup which ruins our acronym, so lets just remember A.B.C. – Always Backup Computer-stuff.
Also Important: If we are managing/maintaining your website, you don’t need to do this! We do it all for you. This guide is just to help people who are doing this on their own.
Review your websites server or hosting requirements.
Is your website hosted on a shared server?
Do you have still have sufficient space and speed for your website?
Do you know where your website is hosted? Do you know how your website is hosted? Are you happy with performance?
Has your website grown with additional pages and posts, or additional functionality?
One of the most common WordPress performance problems I see, are e-commerce stores being run on cheap shared hosting. If your site is large or complex, consider moving to more than just the bare minimum. You and your customers will be glad you did it!
If your hosting says certain resources are ‘unlimited’ this is often a sign that the server resources are shared between a number of websites without any set limitations between sites. This could mean that when one site is busy, other sites on the same server are affected.
This is fine for smaller websites, but if your website has a certain level of complexity or traffic, it may struggle for resources, resulting in reduced performance. Slow sites are frustrating for customers, and for anyone trying to work on the website.
Consider moving to a Virtual Private Server, a dedicated server, or managed/premium shared hosting which ensures that there are plenty resources for the sites on the server.
Plugins can add valuable functionality to wordpress. And it often seems like there really is a plugin for everything.
Many plugins have multiple features.
Sometimes, you might add a plugin to complete a short task with just one feature, and neglect to remove the plugin. If this happens a few times, or if there are a few people working on a site, the number of excess plugins can get out of hand. This can affect the performance of your site.
Go through every plugin and check what it does, and if you still need it. I like to keep a document of plugins I’ve installed for each site, with notes on when I installed them and why.
Spring clean your plugins by removing any you don’t need. This could include:
Last year I had Review and Refresh content for R. But, since I’m the one making up this list, I can just change my mind.
I’ve decided Responsiveness is more important to check over (if you’re not already doing it regularly, and don’t have a maintenance plan that includes it).
Check the following pages on the following devices:
Pages to check:Check on different operating systems and browsers for each type of device, and even consider checking the browsers built into apps such as FaceBook.
If you want to be really thorough, you can even check your website on a Smart TV and a Smart Watch.What was your intention when you built your website? What was your website intended to do? To advertise your business? To allow customers to easily purchase something? To communicate a schedule? To deliver learning?
Have things changed? Does your still website fit its intention and purpose?
Do you need to add features to get what you need from your site? Do you need to remove features that add clutter and don’t fit the true intention of your website?
Check out your menus and make sure it’s still easy for customers to find important information.
If your site regularly has new products or pages added, ensure these are arranged well, with appropriate tags and categories.
Ensure your menu takes people to helpful pages, and only helpful pages. If you have a lot of those uh… SEO pages… use internal linking or have a few links to the useful ones in your footer, rather than adding literally everything to your main menu.
Too many options confuse people.
And the thing about people… When driving, and when trying to find a specific product on a website, they don’t like to read a lot of words. They just want to get where they’re going.
Think about how effective road signs are, and let it inspire your main navigation menu. A stop sign doesn’t say “You should stop your car here and check for traffic before proceeding.” It just says “STOP”. Likewise your main navigation menu doesn’t need to say “Read about our services” when it could just say ‘Services’.
Are your graphics and images good quality and the appropriate resolution?
Ideally you’ll be updating your site regularly with fresh content and images. But… if it’s got to Website Spring Cleaning Month and you haven’t done it since last year, do it now. It’s an easy thing for busy business to overlook.
Also… check that your website has a favicon. This is the little logo that appears on the browser tab, making it easy to spot your website amongst a myriad of open tabs.
Sell and send tickets within the event website, without sending purchasers to third-party sites.
Updating the site with a fresh fun look, and simplifying content.
Maintain and manage all aspects of the website, so the event organisers can concentrate on the event.
In 2023 the new owners of the Christmas Country Fête wanted to incorporate ticketing into their website.
We built an ecommerce site with integrated ticketing, allowing tickets to be purchased direct within the website, and scanned at the gate of the event.
We look forward to another year of The Christmas Country Fête for 2024!
Hello again!
We’ve been busy, which is great of course. But naturally, our website and socials get a little neglected because…
Thanks for dropping by though, and we’ll endeavour to update more often… soon…
-Kristie, and Mosaic the Office Cat.
Happy New Year, a big welcome to 2024.
One question that seems to come up often, especially in this economy, is ‘how do I build my own website, myself, all by myself’?
I’m going to try to write this as fast as I can, because time is short, but I think I can do it, I think I can write something helpful very quickly… lets go!
Now, if you want to live life on easy mode and you only need something genuinely basic, don’t even read this. Go straight to SquareSpace.com or for a kiwi option, rocketspark.co.nz
Need something free and don’t mind the hosts advertising all over your page, try wix.com
But if you want more than the basics, and the opportunity to expand on the usefulness of your website and add extensive features over time, go with WordPress.
Read through this as a starting point, and do give me a yell if you need help.
Most people start here, with a web address. This is often your business name or idea name, followed by .com or .net or .co.nz or similar.
You can buy your URL from a Domain Registrar, and you usually pay for it yearly.
If you’ve bought a domain on its own, your domain name won’t do anything until you’ve pointed it to a website.
When someone visits your domain name in their browser, your website data is fetched from where your website is hosted.
Hosting is when special computers (servers) have the files and database of your website saved on them.
Cloud hosting, is, essentially a bunch of servers joined together with fancy software. It’s not up in the sky, it’s in data centres all over the world. If anyone tells you “My website doesn’t have a server, it’s up there on the cloud” and then they point upwards, at the sky, they’re sadly misinformed.
Your hosting may be combined with website-building software. SquareSpace, Wix, Shopify, Webflow and RocketSpace combine hosting and website-building software into one product. They can make building a basic website an easy streamlined experience. If you buy your domain name through them as well, you might not even realise your website has html files and a database saved somewhere.
But there are thousands of hosting options out there, and the kind of website you are creating will determine what kind of hosting you need.
If you are using WordPress you can choose to host with wordpress.com or you can upload the WordPress files to nearly any host/server. This is made easier if you use a hosting control panel software like Cyberpanel or CPanel, both of which have extremely quick WordPress set-up times.
Hosting can vary greatly in price and quality. Shared hosting is usually cheapest, and for a basic website it’s fine. If you are running an online store you may need to upgrade your hosting to get good performance. Some cloud hosting allows you to scale quickly if you suddenly need more resources. This can be quicker and easier than moving your website to a different server.
When you have chosen your hosting, you need to link the URL to where your website files are hosted.
This is done using something called Nameservers.
A DNS (Domain Name System) record associates important information with your URL.
The A Record tells what IP address your domain should point to. The MX record tells where your email should be sent. And the Name Server or NS record, tells where a computer should look to find the A record and other records.
Your host will provide you with Nameservers, and you can add these to your URL’s records to direct your URL to where your website is hosted.
You also need to ensure your URL is entered at the host end, it should have an A record and other records recorded with the host.
You will need to ensure you have the correct MX records for your email. If you use Google Workspace or Outlook, they will provide you with the appropriate MX records to add.
When setting up email you can add a handful of other records to ensure deliverability DMARC, SPF, DKIM, actually, this deserves its own post I think. Put it on my to-do list please.
Now for the fun part.
How you go about this will all depend on the web-builder you’ve chosen.
With WordPress you can add website-builder plug-ins such as Elementor and Divi. This gives you more customisation options than just using a theme.
To add a plug-in, you can search for it in the plug-ins menu, or upload a .zip folder containing the files. Plug-ins can also allow you to add a wide variety of other functionality. Be careful not to use more than you really need, as too many can affect website performance on cheaper hosting.
In WordPress (and many other website-builders) you can select a theme, which controls how the website looks. You can usually adjust colours, fonts, content, and images. Some themes are made to work well with website-builders, like the Hello Theme for Elementor.
Websites usually divide each page into 3 sections. The header, the body, and the footer.
The header goes at the top of the page, and should remain the same for each page of the site.
The header should contain your business name, your logo, and a menu.
The footer goes at the bottom of the page, and also should stay the same on each page. Popular inclusions for the footer are; contact details, links to terms and conditions, and links to important pages in list form.
The body is where each page’s content is. The body should be different for each page.
Important pages to include are:
Homepage, Services, About, Contact, and News.
In WordPress, you have ‘Posts’ as well as ‘Pages’. Posts are for news items and are displayed as full posts or extracts on the news page. In the settings section of WordPress, you can choose for your homepage to be a page you’ve created or a list of your posts.
In this day and age, with the great website-building software about, you shouldn’t need to touch code to create a basic website.
But if you’re a bit curious try this out…
Create a new .txt (plain text) document in textEdit or notepad.
Type in:
<html>
<head></head>
<body> Hello World
</body> </html>
Now save and close the file. Change the extension of the file from .txt to .html
Double-click the file to open it.
Woah! It should open in a browser, and look you’ve made a website! It’s hosted on your own computer, and not accessible to the public, but it’s a very very very basic starting point.
If you put in the time and effort you can make a whole website this way. You can also learn to use a code editor like Visual Studio Code, which makes your code easier to read when there is a lot of it, and helps you to locate problems with your code.
There are a tonne of learn-html resources online, a lot of them free. You should also learn CSS to style your website, and you could learn a bit of JavaScript, how about some PHP, SQL… it’s a slippery slope. You might spend more time on your website than on your business!
WordPress itself gives the code-curious a great learning opportunity. You can build your entire website without needing to look at all that lovely open-source code… But you can look if you want… then you can dive right into the files and break stuff! Then learn a lot while you fix it. Fun times!
Ah! I’m out of writing time!
I hope this was at least a little helpful as a starting point for anyone wanting to do a DIY website.
I often run out of time for news posts, but this year I’m going to try harder to include some helpful information in my monthly news posts, addressing more frequently asked questions, or problem-solving situations.
If you have a question you’d like me to answer, or something you’d like me to write about, flick me an email at hello@easywebthings.com or message Mosaic on socials.
