No luck with WordPress, will MODX be easier for me?

mrwriter · November 2, 2024, 9:25am

So I’ve spent the last month trying to get my head around WordPress to build a simple website – I’m a photographer, with a simple Home, Portfolio, About and Contact pages. I’ve watched about 40 hours of YouTube tutorials, set up an Ionos WordPress based hosting package, paid people (some dodgy) on Fiverr to help me out a little, but all to no avail. I just can’t get my head around the WordPress back end, the templates are impossible to edit to get them to look how I want and the whole system just seems to be a logistical nightmare that I find impossible to learn and figure out, even though it is supposed to be easy.

So my question is, will MODX be a better option for me, personally?

I’ve done some basic research and the general consensus is that MODX has a steeper learning curve and requires some coding skills etc, but it is easier to get websites to look exactly how you want them, is faster and more secure etc and is better for larger businesses that require larger more sophisticated websites.

So will it be a good choice for me, somebody who has zero coding skills and struggled, and gave up, with WordPress, hell, I even found WIX impossible to get the site to look exactly as the pages that I put together in Photoshop.

My site is only to be a simple one with: Home page, Portfolio page, About page and simple Contact page with basic form.

I’ve given up on trying to pay somebody to do it for me because after Googling ‘Web developer near me’ (and yes, I don’t want to get scammed by some dodgy guy from one of the usual geographical locations) all I have managed are people who will do a Squarespace site for me for a few hundred quid (this is not web developing and I could do that myself, but the site would not look ‘exactly’ as I’ve planned), or a WordPress site using Elementor, no thanks, looked into that and I’m sure you MODX people will be cringing at the thought so no need for me to explain why I don’t want to go that route. Finally there are the large agencies with a huge building (with huge rent and bills) and several staff all being paid a yearly wage, who typically say ‘Our packages start at 5k’, yeah, right. I haven’t earned 5k as a photographer in 30 years so that ain’t going to happen either.

I tried my luck on Fiverr, and had loads of chancers offering to do it for £150 to £250, but who knows which are scams and most only want to do it with WordPress and Elementor anyway so that’s out.

So back to MODX. I do have another website (I’m an author of fiction too, so have a site for my books) and this is built with MODX, but I didn’t do it, a friend from yesteryear did it for me and he always made any changes for me, but I’m no longer in touch with this person.

So I’m looking for guidance here with regard to MODX, so I suppose my questions are:

Is MODX the way to go, over WordPress for me personally, based on what I’ve said above?
I would not know where to start with MODX so are there any simple video guides or written tutorials with images on a MODX website somewhere?
Is there a help forum where I can annoy people with ‘How do I do this, that and the other, dumb questions’?
Are there any MODX developers in the UK who could perhaps develop this basic site for me, for a fee of course, but no ‘agency’ prices as I’m flat broke at the moment. Message me if you can help.

Thanks so much, guys and girls.

halftrainedharry · November 2, 2024, 2:01pm

Do you have some basic knowledge of HTML and CSS?

In contrast to WordPress where you usually start with an preexisting theme (and then maybe adjust it to your needs), there are (virtually) no themes in MODX. And there is no guidances from MODX regarding the layout and style of your website. This freedom is advantageous if you want to implement a custom design, but is probably quite overwhelming if you are unfamiliar with HTML/CSS.

This forum here is the place to “annoy people”.

smashingred · November 2, 2024, 2:45pm

If you’re willing to learn a little about HTML and CSS (not hard. I hate gatekeepers) you should be able to get something done but it may not be your end goal.

First, is getting a design into MODX which tyically starts with finding a page template, splitting out the header, footer and then whatever in-page content subcomponents into Chunks and included in your template.

This may be sacrilige to some folks here but I have had good luck with Claud AI in taking an image or some HTML and using a good prompt to have it give you the HTML and also include the dynamic MODX Resource and System Settings tags.

I prompt I used by uploading a screenshot of a webpage was as follows. In my case I asked it to give me the result using TailwindCSS, but this could be just standard CSS or Bootstrap or any other way you want.

Please analyze this image and create an accessible webpage implementation with the following specific requirements:

1. Semantic Structure & Accessibility:
   - Use semantic HTML5 elements throughout (header, nav, main, section, article, aside, footer, etc.)
   - Implement appropriate ARIA landmarks, roles, and attributes where semantic HTML alone isn't sufficient
   - Ensure proper heading hierarchy (h1-h6)
   - Include skip navigation links
   - Maintain logical tab order
   - Provide appropriate alt text for images
   - Ensure interactive elements are keyboard accessible
   - Add ARIA labels and descriptions for complex components
   - Implement proper focus management for interactive components

2. Layout & Styling:
   - Implement using Tailwind CSS utilities only (no custom classes)
   - Match the exact positioning of:
     * Logo placement
     * Hamburger menu location
     * [Any other key visual elements from the image]
   - Provide responsive behavior specifications
   - Ensure sufficient color contrast ratios

3. Technical Requirements:
   - Integration with MODX CMS and FormIt
   - Include a complete meta header section optimized for SEO
   - Implement a base element with `[[!++site_url]]`
   - Use relative URLs throughout

4. MODX-Specific Elements:
   - Identify all required MODX tags and their purposes
   - Flag any custom TVs that need to be created
   - Include FormIt snippet calls and parameters

5. Accessibility Documentation:
   - Document the purpose of each ARIA attribute used
   - Explain any complex interactive patterns and their accessibility implementations
   - Note any required screen reader considerations

Please provide the implementation with clear separation between:
- Semantic HTML structure
- ARIA attributes and roles
- Tailwind utility classes
- MODX template tags
- Required TVs and system settings

Additionally, please note any accessibility features that require JavaScript implementation.

smashingred · November 2, 2024, 2:57pm

Also, it may be worth watching YJ Tso’s video on building a Template in MODX. It’s a few years old but the only key difference between Revo 3 and 2 that’s in the video is the location of Manager Menu. The Resource, Elements and File trees are identical and all of the othe principlles are the same.

mrwriter · November 2, 2024, 3:44pm

Smash, I watched that video as part of my research before posting.

Haltraine, I have some basic HTML knowledge if the HTML is already in place, I can modify what is already there. No CSS knowledge, though I have a basic concept of what it does etc.

I suspect I’m going to need somebody to put the site together for me, so I can make tiny (simple) changes to it as and when.

smashingred · November 2, 2024, 4:44pm

@mrwriter It may be that you’re not ready for a custom site built on a CMS and that may be okay. It’s honestly possible to do this with a site bulder such as Wix.

The first thing I’d do is find the site(s) you want to replicate in terms of styels. It’s also possible to buy a theme or something to start with and then have it converted to a MODX theme. You may want to get in touch with someone like @designfromwithin who, while not in the UK is an expert MODX Theme Builder. In addition, other folks like @ysanmiguel might be able to help you.

You could also check out the MODX Professionals page for possible assistance. There are lots of people in the UK and in the Netherlands who might be able to help.

mrwriter · November 3, 2024, 9:54am

Thanks, Smash.

I actually found ysanmiquel via MODX ‘find a pro’ section, not many in the UK, three I think, but I’ve emailed him and spoke to him on the phone, just waiting for his quote.

I’ve started a WIX thing, but can’t quite get it right, impossible to edit their templates the way you want. Doesn’t work for me. Squarespace is the same and has the same issues.

dev_willis · November 3, 2024, 6:43pm

MODX is definitely the best way to get a site to look exactly how you want, and the MODX way of building templates/themes is very easy to learn. The rub will be in the CSS. Getting a site to look just right means getting your CSS just right. The learning curve with MODX, for theming/templating, isn’t really MODX itself but the HTML, CSS and JS needed. However, the rise of LLMs (ChatGPT, Claude, et al) has made this much easier for beginners. All you really need are critical thinking skills and the time and motivation necessary to learn it.

Fortunately, you’ve already found the help forum where you can annoy people with “how-to” questions. So good job there! There’s also a slack channel where you can ask questions as well: https://modx.org/

If you like, I offer consulting services and I’d be happy to spend an hour or two with you helping you get everything set up properly so you’re off to a good start with a solid foundation from which to build.

@smashingred Tailwind is the real sacrilege here

designfromwithin · November 4, 2024, 6:13am

@dev_willis is it? I absolutely love Tailwind. To many classnames for you?

dev_willis · November 4, 2024, 1:05pm

Yeah, not only does it make for a horrendously dirty DOM but it breaks separation of concerns. Markup, including class names and IDs, should not describe presentation. These problems can be avoided with @apply but I still find it philosophically objectionable lol

Me, I use and love PicoCSS.

smashingred · November 4, 2024, 3:16pm

I have been doing CSS since the dawn of CSS and I use a variety of techniques to build sites. There are advantages to all sorts of methods for building out CSS. For instance, I can argue to use hand written CSS, a tiny framework such as PicoCSS or Pure CSS (which I like quite a bit) or a large one like Bootstrap or Tailwind. The OP is trying to execute on building a website they can be proud of not to learn HTML/CSS.

A massive advantage of Bootstrap or Tailwind is the base rules are generally quite good for commonly used components and the documentation is stellar and there’s a massive community of folks who can build with them. In fact, whether i like it or not, there are more poeple who rely on the larger frameworks than write custom CSS on most projects.

For me personally, I’d write custom CSS using SaaS and CSS Custom Properties or pull in PureCSS for some foundational rules (especially forms) and then custom CSS for the rest.

I also work with folks that love Tailwind and others that love Bootstrap. If the OP was lerning CSS, I might dissuade the use of Tailwind or Bootstrap. But they want to build a custom photography site for their photography business. I was looking at the quickest way to the results with a certain level of maintainability for someone they might hire to help with the styling.

smashingred · November 4, 2024, 3:30pm

Something that I also forgot about is the “problem” with stylistic classes cluttering up the DOM. If you have a webite that has it’s CSS in version control but you want to quickly alter the padding on a container element or change the background using a utility class, I can say from experience this is signficantly nicer than having to either Edit live in GitHub and submit the PR or set up a local environment, check out a repo and then submit a PR, merge the PR and run the build and deploy to production.

An alternative would be to add a style element to the document and then submit the PR and go back and remove the Style element once the change has been deployed using whatever workflow your team has.

Anyhoo. There’s no one right way to do HTML/CSS and there 100 times more wrong ways to do it.

mmcgee · November 6, 2024, 2:07am

ysanmiquel was very very helpful in some of my early exploits with MODx. Yet another terrific aspect of the MODx forum.

might-e · November 6, 2024, 1:02pm

If you are new to MODX I think it’s still quiet daunting to start and understanding the tag syntax. Chunks and templates are quiet easy to understand. Snippets and passing parameters is a bit more complex, but template variables and what you can do with them is quiet a bit more complex.
Knowing which extras to use is easy when you work a lot with MODX, but if you are new to it looking at the package manager I don’t think it’s really obvious what to use. Some extras mention in the details that they are no longer maintained, but it’s not always as obvious. Sorry for going a bit of topic, but I think you might underestimate some of the challenges for new users.

@mrwriter You mentioned a few times that with other platforms you could not get it the way you want. Do you have an example of some of the challenges? That might provide some insight if MODX has some benefits.

dev_willis · November 6, 2024, 8:19pm

@might-e
Sure, you can do very complex things with TVs but the basic idea is pretty straight-forward. I agree with you about it not being obvious which extras to use and, without knowing that, it could be easy for someone to go off in the wrong direction (I’ve done that myself). But those questions are easily answered for anyone willing to ask them. It helps that the community here tends to be more friendly and helpful than a lot of what you find around the Internet. So I don’t really see why it should be daunting, but maybe it’s just been too long since I was new to MODX? I got started with it when it was in version 0.9.6.

@smashingred
I was really just shitposting. I do strongly dislike Tailwind but I recognize that it’s different strokes for different folks.

bobray · November 6, 2024, 11:17pm

I am not fluent in WordPress, but I will say that I tried to use it a while back and found it nearly impossible to get things to look like I wanted them to look. To be fair, it might have been because I was a beginner and chose to use the default “Kubrick” theme, which at the time was very poorly designed.

MODX, on the other hand, seemed completely natural and logical to me. MODX makes no assumptions and places no restrictions on your HTML or CSS work. It takes your code and shows it – just what I wanted.

That said, HTML just lets you record the basic markup for a page: Headings, text, and images. For the most part, it is CSS that determines what your page will actually look like, and adjusts that look for presentation on a phone, tablet, desktop, or printed page. Using it is not a trivial task, and you could spend many hours trying to do something an experienced developer could do in a few minutes.

I like learning new things, so my preferences is almost always to do things myself, no matter how long it takes. This might not be your preferred approach.

As you’ve seen, people on this forum are friendly and helpful. They will go out of their way to help you with any problems that have to do with MODX, though they usually prefer not to help people learn the basics of HTML and CSS. There are many good resources on the web for learning those.

FYI, here is another UK-based developer who works with MODX.

tonyr · November 10, 2024, 5:50pm

@smashingred - It’s very generous of you to share your prompt! I use Claude a lot and love it. I have been wondering how to get themes from Fiverr people, which seem mainly offered in Figma, into MODx, as pain-free as possible.
Thanks again,
Tony

todd.b · November 13, 2024, 3:34am

Thanks for mentioning PicoCSS @dev_willis, I wasn’t aware of it.

todd.b · November 13, 2024, 3:35am

Thanks for mentioning Pure CSS @smashingred, I wasn’t aware of it.

smashingred · November 13, 2024, 2:02pm

I actually tried out Pico CSS again this weekend on @dev_willis reminder and I remembered why I prefer Pure. While Pico aims to keep extra classes to a minimum, I find the default styles of Pure more to my liking having worked with so many CSS frameworks over the years. But, Pico may be to someone else’s taste. These are ice cream flavours, in my opinion.