how to add different styles to pages?

Envato Authors Theme Authors
,
1

Hello everyone

I am creating a wordpress site using next.js. I need help with something as I am new to wordpress.
I want to add different styles to the pages of the creative portfolio site I am creating. So if I had to give an example;

There are two different layouts for the portfolio page, the first layout shows my portfolio items as a grid and the second as a slider. The user can choose between two layouts and the layout is visible in the page editor.

I’ve been experimenting with page templates for a few days, but I couldn’t reach the result I wanted. thank you in advance for your help.

2

With respect, only you know how you want the styles or layouts to look.

This is a long way from the more complicated side of getting a theme approved - if you are struggling to develop those or are “new to WordPress” then how are you going to manage, maintain, bug fix or update things going forward?

4

Hi, I am the IT manager of papedawson and we had this problem before. To achieve the desired functionality of allowing users to choose between two different layouts for your portfolio page, you can make use of Custom Post Types and Custom Fields in WordPress.

Here are the steps you can follow:

Create a Custom Post Type for your portfolio items. You can do this by using a plugin like Custom Post Type UI or by adding code to your functions.php file.

Add Custom Fields to your portfolio items. You can use a plugin like Advanced Custom Fields or create your own custom fields using code.

In your Next.js code, you can use the WordPress REST API to fetch the portfolio items and their custom fields. You can then use this data to render the portfolio page with the chosen layout.

To allow users to choose between the two layouts, you can add a Custom Field to the portfolio page itself. This field can be a dropdown or radio button that the user can select to choose the desired layout.

In your Next.js code, you can check the value of the Custom Field for the portfolio page and use it to render the page with the chosen layout.

6

hi, first of all thank you for your reply.

I’ve already done everything we explained to me. but what I want is more than that, when the user selects a layout, I want the selected layout to appear in the gutenberg editor. i.e. I want the user to see what type of layout they have selected and make minor changes to that layout. I think special blocks are necessary for such customizations. Thanks again for your help.