Vill du skapa en custom page i WordPress?
En customize page låter dig använda en annan layout än resten av din website. Många WordPress-webbplatser använder custom page layouts för sina försäljningssidor, landing pages, webinar pages, med mera.
I den här artikeln visar vi dig hur du enkelt skapar en customize page i WordPress.
Varför skapa en Custom Page i WordPress?
Varje gång du skapar en new page kontrollerar your WordPress theme hur sidan ser ut med hjälp av en template-fil.
Denna template page.php påverkar alla enskilda pages som du skapar i WordPress. Men du kanske inte vill använda samma design varje gång.
Landing pages har ofta ett annat content jämfört med vanliga pages, till exempel en stor hero image eller en call-to-action (CTA). Det innebär att de ofta ser helt annorlunda ut än resten av din website.
Att försöka skapa unika mönster med hjälp av standardmallen för page kan dock ta mycket tid. Du är också limitad av page.php templates och kanske inte kan skapa exakt den design du vill ha. Detta kan göra det svårt att få bra resultat. Om du till exempel bygger en försäljningssida kanske du inte får många konverteringar på grund av dålig siddesign.
Med det sagt, låt oss se hur du kan skapa en customize page i WordPress, med exakt den design, layout och content du vill ha. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda.
- Method 1. How to Create a Custom Page in WordPress Using the Block Editor (No Plugin Required)
- Method 2. How to Create a Custom Page Using the Full-Site Editor (Block-Based Themes Only)
- Method 3. Create a Custom Page in WordPress using SeedProd (Recommended)
- Method 4. Using Thrive Architect to Create a Custom Page in WordPress
Metod 1. Hur man skapar en Custom Page i WordPress med hjälp av Block Editor (inget plugin obligatoriskt)
Block Editor gör det enkelt att designa dina egna templates med hjälp av de tools du redan känner till.
Detta är ett bra val om du har planer på att återanvända samma design på flera pages, eftersom du helt enkelt kan tillämpa samma template. Om du vill skapa en helt unik design är ett annat alternativ att skapa sidan som vanligt och sedan editera layouten med hjälp av Full Site Editor, som vi kommer att täcka i metod 2.
Tänk bara på att dessa metoder endast fungerar med block-baserade themes som ThemeIsle Hestia Pro eller Twenty Twenty-Three. Om du inte har ett block-baserat theme rekommenderar vi att du använder en page builder istället.
För att börja öppnar du bara en page eller post. Sedan väljer du tabben ”Page” i menyn till höger och klickar på texten bredvid ”Template”.
De alternativ du ser kan variera beroende på ditt WordPress-tema, men texten kommer vanligtvis att visa ”Page”, ”Default template” eller liknande.
I popupen som visas klickar du på ikonen ”Add Template”.
I popupen som visas skriver du in ett namn för din template och klickar sedan på ”Create”.
Namnet är bara för din referens så du kan använda vad du vill.
Detta öppnar templates editor, som fungerar på samma sätt som WordPress content editor.
Om du vill add to block till designen av din custom page klickar du bara på den blå knappen ”+”. Du kan sedan dra and drop för att add to block.
Du kan add to content till ett block eller ändra dess format med hjälp av de välbekanta tools för redigering av post i WordPress. Du kan till exempel skriva in text i ett ”Heading”-block, tillämpa fet formatering eller ändra text från H2 till H3.
Du kan också skapa en customize page med hjälp av mönster. Patterns är samlingar av block som ofta används tillsammans, t.ex. en lista över händelser, en image med en caption eller en pristabell.
De mönster du ser varierar beroende på ditt WordPress theme, men du kan se vilka mönster som finns tillgängliga genom att clicka på tabben ”Patterns”.
Du kan antingen dra and drop ett block pattern till din layout eller click på mönstret för att lägga till det längst ner i din template. När du är nöjd med hur templaten ser ut klickar du på knappen ”Publicera” och sedan på ”Save”.
Du kan nu tillämpa denna template på vilken page som helst. Öppna helt enkelt sidan i Editorn och klicka sedan på texten bredvid ”Template”.
I popupen som visas, select the template the template the template you just created.
När du har gjort det kan du add to content till sidan, precis som med alla andra sidor i WordPress.
Metod 2. Hur man skapar en Custom Pagemed hjälp av Full-Site Editor (endast block-baserade teman)
Om du använder ett blockbaserat theme kan du också skapa en custom page med hjälp av full-site editor. Detta allow you att ändra layouten på en enskild page, utan att skapa en custom template.
Med det i åtanke är detta ett bra val om du vill skapa en helt unik design som du inte kommer att återanvända på någon annan page.
För att komma igång skapar du helt enkelt sidan som vanligt genom att gå till Pages ” Add New. Du kan sedan skriva in en titel, lägga till kategorier och tags, ladda upp en featured image och göra alla andra ändringar du vill.
När du är nöjd med den grundläggande page, save dina ändringar och sedan head över till Appearance ” Editor.
Som standard visar den fullständiga Site Editor ditt temas hemmamall.
I menyn till vänster klickar du på ”Pages”.
Nu ser du alla pages som du har skapat på din website WordPress.
Leta bara upp den page du vill göra om och gör ett click.
WordPress kommer nu att visa en preview av designen.
För att gå vidare och edit denna template, click på den lilla penna iconen.
Du kan nu editera sidans layout med hjälp av verktygen för hela Site Editor. Du kan till exempel klicka på den blå ”+”-knappen för att add new block, eller click för att select något block som du vill customize.
När du är nöjd med de ändringar du har gjort, clickar du på knappen ”Save”.
Nu, om du besöker den här page på your website, kommer du att se den nya siddesignen i action.
Metod 3. Skapa en Customize Page i WordPress med hjälp av SeedProd (rekommenderas)
Tidigare skapade du en customize page genom att skriva kod, vilket inte var särskilt nybörjarvänligt. Om du gjorde ett misstag med din HTML-, CSS- eller PHP-kod kunde det orsaka vanliga WordPress error eller till och med förstöra din site helt.
Med detta i åtanke rekommenderar vi att du använder en page builder istället.
SeedProd är den bästa drag-and-drop page buildern för WordPress. Den levereras med mer än 350 templates, vilket allow you att skapa customizes pages utan att skriva någon kod.
Om du använder en custom page för att få fler konverteringar, så fungerar SeedProd med många populära tredjeparts tools som du kanske redan använder för att få konverteringar. Detta inkluderar marknadsföringstjänster för e-post högst upp, WooCommerce, Google Analytics och mer.
Först måste du installera och aktivera SeedProd. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.
Note: Det finns också en gratis version av SeedProd som allow you att skapa customize pages oavsett din budget. Men för den här guiden kommer vi att använda SeedProd Pro eftersom den har många fler templates och integreras med all de bästa tjänsterna för e-postmarknadsföring.
Efter att ha aktiverat pluginet kommer SeedProd att be om din license key.
You can find this information under your account on the SeedProd website. När du har enter nyckeln klickar du på knappen ”Verify Key”.
Välj en custom page template
När du har gjort det, gå till SeedProd ” Landing Pages och klicka på knappen ’Add New Landing Page’.
Du kan nu välja en template för din custom page.
SeedProds templates är organiserade i olika kampanjtyper som ’lead’, ’squeeze’ och ’coming soon’. Du kan klicka på tabbarna högst upp på vyn för att filtrera templates baserat på kampanjtyp.
Om du vill börja från scratch har SeedProd också en tom template som du kan använda.
Om du vill titta närmare på en design håller du bara muspekaren över templaten och klickar sedan på ikonen med förstoringsglaset.
När du hittar en design som du gillar klickar du på ”Choose This Template”. Vi använder mallen ”Course Sales Page” i alla våra images, men du kan använda vilken template du vill.
Gå sedan vidare och skriv in ett namn för den customize page. SeedProd kommer automatiskt att skapa en URL baserat på sidans Rubrik, men du kan ändra denna URL till vad du vill.
En beskrivande URL hjälper också sökmotorer att förstå vad sidan handlar om så att de kan visa den för rätt användare, vilket förbättrar din sökmotorsoptimering i WordPress.
För att ge din custom page bästa möjliga chans att appear i relevanta sökresultat kan du add to eventuella keywords som saknas i URL:en. Mer detaljer finns i vår guide om hur du söker efter keywords.
När du är nöjd med den information du har enter klickar du på knappen ”Save and Start Editing the Page”.
Designa din custom page
SeedProd kommer nu att öppna din valda template i sin användarvänliga drag and drop editor. Du kommer att se en live preview av din page till höger, och några block inställningar till vänster.
För att customize ett block klickar du bara för att välja det i page editor. I den vänstra toolbaren visas då alla inställningar för det blocket.
I Följer image ändrar vi texten i ett ”Headline”-block.
Du kan formatera texten, ändra justering, add to links med mera med hjälp av inställningarna i menyn till vänster.
Det är också lätt att edit images med hjälp av SeedProd page builder. Klicka bara på ett ”Image” block och använd inställningarna för att lägga till alt-text, ladda upp en new image eller göra andra ändringar.
Om du vill ta bort ett block från custom page klickar du bara på för att välja det blocket.
Klicka sedan på ikonen för papperskorgen i mini-toolbaren.
För att add new block till din design, hitta bara ett block i menyn till vänster och dra det sedan till Editorn.
Du kan sedan klicka för att välja block och göra ändringar i menyn till vänster.
SeedProd kommer också med ”Sections”, som är row- och block templates som kan hjälpa dig att skapa en custom page, snabbt. Om du till exempel skulle designa en Google Ads landing page, kan du använda SeedProds färdiga Hero, Call-to-action eller Features sections.
För att se all available sections, klicka på tabben ”Sections”.
För att titta närmare på en section, hoverar du musen över den och klickar sedan på magnifying glass icon.
När du hittar en section som du vill add to i din design, för du bara muspekaren över den och klickar sedan på den lilla iconen ”+”.
Detta addar section till längst ner på din page. Du kan flytta både sections och blocks runt din design med drag and drop.
Om you gör ett misstag eller ändrar dig, så oroa dig inte. You can reverse your last change by clicking on the ”Undo” button at the bottom of the left-hand toolbar.
Här hittar du också en knapp för att göra om, revisionshistorik, navigation i layouten och globala inställningar.
Dessa extra knappar gör det enkelt att skapa en customize page i WordPress.
Längst ner i toolbaren hittar du också en knapp för mobil preview som allow you to view the mobile version of the custom page.
Detta kan hjälpa you att designa en custom page som ser lika bra ut på mobila devices som den gör på din dator.
När du är nöjd med din custom page är det dags att publicera den genom att clicka på dropdown-pilen bredvid ”Save” och sedan välja alternativet ”Publicera”.
Din customize page kommer nu att gå live på din WordPress blogg.
Om du vill redigera den custom sidan vid någon tidpunkt, gå bara till SeedProd ” Landing Pages i din WordPress dashboard. Du kan sedan hitta den page som du vill ändra och klicka på dess ”Edit”-länk.
Detta kommer att öppna designen i SeedProds editor, redo för dig att göra dina ändringar.
Metod 4. Använda Thrive Architect för att skapa en Custom Page i WordPress
Du kan också skapa en customize page med hjälp av Thrive Architect. Thrive Architect är en annan populär drag-and-drop page builder för WordPress.
Den levereras med över 300 professionellt utformade templates som är utformade för att hjälpa dig att få fler konverteringar.
Först måste du installera och aktivera pluginet Thrive Architect. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.
Efter aktivering, gå till Pages ” Add New i din WordPress adminpanel för att skapa en custom page. Klicka sedan på knappen ”Launch Thrive Architect”.
Därefter kan du välja om du vill skapa en vanlig sida eller en pre-built landing page.
Vi rekommenderar att du clickar på ”Pre-built Landing Page” eftersom det ger dig tillgång till alla Thrive landing page templates. Dessa templates är helt anpassningsbara, så du kan finjustera dem så att de passar din WordPress website.
När du hittar en uppsättning som du gillar, klickar du bara för att välja den.
I den följande bilden väljer vi ”Smart Landing Page Sets.
På nästa vy måste du välja en specifik template från uppsättningen.
Välj en template genom att clicka på den och sedan trycka på knappen ”Tillämpa template”.
Detta kommer att öppna templaten i Thrive Architect Editor. Härifrån kan du enkelt customize page template för att matcha din blogg, website eller online store.
Som exempel kan du ändra ”Heading” genom att clicka på den och sedan skriva in your egen custom message.
Du kommer nu att se alla alternativ för customize i menyn till vänster. Här kan du ändra typografi, fontstorlek, färg, format och mycket mer.
From the left-hand panel, you can also adjust other settings for your custom page, such as the layout, background style, borders, animations, and scrolla behavior, just to name a few.
I likhet med SeedProds block kommer Thrive Architect med många pre-built element som du kan add to din custom page.
För att add a new element to the page, click on the ”Add Element (+)” button on the right-hand side of the screen.
Du kan nu välja mellan element som gillar images, knappar, lead generation-formulär, pristabeller, nedräkningstimer och mycket mer.
För att add to ett element drar du det från höger menu och släpper det på din page.
Återigen kan du edit alla nya element som du addar till din page genom att clicka på dem.
När du är nöjd med hur sidan ser ut klickar du på pilen (^) bredvid knappen ”Save Work”. Klicka sedan på alternativet ”Save and Return to Post Editor”.
Du kan sedan save the page som ett draft eller publicera den så att den visas på din website i WordPress.
När din customize page är publicerad kan you besöka din site för att se den i action.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar en customize page i WordPress. Du kanske också vill se vår guide om hur du ökar trafiken på din blogg, och våra expertval av de bästa tilläggen för kontaktformulär för WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Hemant Kuswah
Hiii, Thanks for the information.
I have a little problem/confusion. I had made the custom page as you described in the tutorial above. But i want to add custom php code to fetch data from other place and display on the custom page i just created.
There will be a dropdown on the custom page and on selecting a value it will display some data on the same page which is either coming from database or from some other website.
How can i do that ?
Any suggestion
?
Thanks
Jared
Hi – I was wondering how I can avoid including other plugins css and js files such as woocommerce and various others in my template.
Thanks,
J.
Valerio
What if the theme has a kind of wrapper base.php? I would like to create a new custom page template but I always get also what is in the main wrapper base.php. Did I make myself clear enough?
Dre
how about this one,
I want the sidebar on the very right and all the other content “full width” on the page. How can I do this?
When I choose “Full Width” in the WordPress-Site-Settings, the sidebar of course is gone and my content still isn’t full width.
you can see my page here:
thank you!
Yazhini
How to make FTP client connection?
WPBeginner Support
Hey Yazhini,
You will need to enter your website domain, FTP username and password. For detailed instructions please see our guide on How to use FTP to upload files to WordPress.
Administratör
Yiani
Nothing shows up in the drop down in Page Attributes? I am using Storefront theme for Woocommerce. What is the solution? Is Storefront not allowing custom page templates? Any help is much appreciated. Thanks.
Henry
Very educative indeed, thanks alot. However, I have a rather unique situation and after reading your post felt I should ask. I have two lovely pages I long to add to my wordpress theme, but sadly they are static HTML pages with commenting, voting as well as sharing system. Is there a way I can get them into my existing wordpress theme and also get them to use the wordpress commenting, voting and sharing systems?
Ketan Chaudhari
Thank you for this tutorial.
Today, You give me a chance to learn something new in wordpress.
Natacha
Thank you for the tutorial. I am happy to learn new stuff step by step.
But, When I preview the page with the new template, I don’t have a white page, I have my default theme loaded.
How can I change that?
WPBeginner Support
Hi Natacha,
You can click on Appearance and then select a theme. See our guide on how to install a WordPress theme for detailed instructions.
Administratör
Natacha
Thank you for the answer.
But, I cannot change the theme of my whole website. I just needed to create a blank page so I can create a forum.
Hero
Instead of reinventing the wheel, why not just use BuddyPress?
Tim
I just want to THANK YOU for posting this. I’ve been trying to get a static front page to work with my custom template and I just couldn’t find a straight and simple answer until stumbling upon this article. Much appreciated.
WPBeginner Support
Hi Tim,
You are welcome
Don’t forget to follow us on Facebook for more WordPress tips and tutorials.
Administratör
hamed ahmed
thanks, the google search console requires to save .html file to my wordpress website , but .html will not be appeared in the website , can any one help please because i want to register my website to search console
WPBeginner Support
Hi Hamed,
You can also verify by adding the meta tag or by using Yoast SEO plugin which allows you to add the meta tag from its settings page.
Administratör
Sameer Kumar
how to remove sidebar Php?
KH
I don’t see the template option in the Page Attributes section of my wp page – is there something I need to do to see this?
Yasser
thanks alot.
It worked perfectly.
Luis
Thanks for the post! It was so difficult to find this simple answer in the wordpress codex. One suggestion, though. Please add to your post that when users create their ’custom_page.php’ file to add a header tag, i.e. with a text title so they don’t get a white page on the first go. It’s just a quick way of making sure the page is really working. Again, thanks a lot for making this so easy!
ashkan 261
So cool thank a lot dear
AltisB
I m trying to embed some javascipt or html codes into the blank page… how should i do that? Because i now have the blank page but when i embed the embedded codes onto the editor it doesnt seems to work.
kray
How do you do this for Wordpress 4.7? No Template shows up when I attempt to create a page in 4.7.
Altisb
”Once you have added the code, save the file to your desktop as, custompaget1.php.”
My notepad save the file as .txt
How to you even save it as .php file???
WPBeginner Support
Hello,
Try using ’Save as’ instead of save option from the file menu. When using save as write full name for your file. You can also rename the existing custompaget1.php.txt file to custompaget1.php
Administratör
Ben
I’m truly a beginner and found the steps easy to follow. I created my new .php file following the instructions, pasting the page.php text at the end of my new .php file. I’m to the point where my new custom page template is available in the drop down when I create a new page. I select the new template for the new page, and when I make changes to the new page in the customizer (delete a text widget from the sidebar), the changes are applied to the other pages that have the default template selected as well, not to just my new page with the new custom template selected. Any ideas?
Marshall
I found this really helpful. However, I did have one problem. When I go to the new page
there is a 32px top margin on it which does not show on the other page.
Logan
Hello,
I have an issue with my WP pages. I have a website up and running and I recently needed to add a new page and a new menu button. I’ve made a new menu button and created a new page (default template) and published it. However, on the website, after clicking on the new button under which this new page should be, it’s only showing header and footer. Not my new page.
Could you be so kind and advise me on this? I’m a total WP beginner so building my own template page is out of the question and I was under the impression that simply adding a new page to my WP website should be only a few clicks away…
Thanks
WPBeginner Support
Hi Logan,
Please check out our guide on adding navigation menus in WordPress.
Administratör
Anish
Hi! I did as you said.
I created a .php file with the same code snippet as given and uploaded it onto my /wp-content/themes folder. Now, when i go to the Page section on WordPress, there is no option for the Template choosing. What should i do ? Can you figure out where i might be going wrong ?
Leonardo
Hi. I don’t know any php and I need to creature a custom page for my website.
Is it possible to create an HTML page from scratch, include javascript to the page and put it into the .php file as described?
Thanks.
WPBeginner Support
Hi Leonardo,
You will still need to use PHP for WordPress template tags.
Administratör
Mo
@DAN Are you sure that you including the header. Thats usually where WP will enqueue your style.css
Dan
Hi,
I’m trying to create a blank template to be used for a landing page. I succeded in creating the blank template, but now when I try to add content (using the WP editor or Visual Composer or even a CF7 contact form) no style is applied. Is there any way to tell the template to use the theme css style?
Thanks
Marco Milano
This isn’t a new post type but is a new template. They’re two different thing. In fact the you can call a template from a post whereas the custom post type has a personal space in admin panel.
Julie
I followed all the steps and they worked until I tried to select it in the ”Page Attributes” part. The ”CustomPageT1” is just not an option in the drop down menu!
What can I do so that Wordpress and or my theme can pick up that it’s a template?
Thanks in advance!
Julie
WPBeginner Support
Most often users make mistake while copy-pasting code snippets. Please make sure that your custom template file contains exactly the same code
<?php /* Template Name: CustomPageT1 */ ?>Administratör
Ubaid
I want to add a full width header image before entire content and sidebar. How can I do that?
Girija Tandel
Thank you so muc for this wonderfull tutorial.
This helps me a lot.
It works great.
Harish S Reddy
Thank You , it works Great !
WPBeginner Support
Hey Harish, glad you found it helpful. Don’t forget to follow us on Facebook for more WordPress tips and tutorials.
Administratör
Charmy Dexter
It was like I’m reading 123. I hope a page template of a theme could be used in another theme.
Uchenna
please can you help me out. I have two themes. one for my desktop view and the other for mobile. i used any mobile switcher to get the mobile view working. I designed a static page for desktop theme and this is where my problem begins because once i set from ”reading” to use static front page for the desktop theme, the mobile theme homepage stops displaying posts. please is there a way i can get this working? this is the site am talking about thanks in advnce
Matthew
Way easier than I thought this would be. Thank you!
Rahul Tiwari
Hi,
Its really helpful for me and very easy to understand.
Thanks
jass
thank you very much.This article really helps
Steven Denger
For a ”beginner” this was not helpful. You did not explain the steps more in detail, like ”go to your current theme folder” – how do I do this? And your FTP instructions were way to vague. If I was able to understand your instructions I wouldn’t have needed this wp-beginner in the first place as it is explained for those that have mor tech experience.
These tutorals were not at all helpful and are just targeted for the more tech viewers.
NO HELP HERE AT ALL!!
WPBeginner Support
Hi Steven,
We are sorry that you didn’t find this article helpful. We will try to explain in comments.
To connect to your theme folder you will need an FTP client. These are special software which allow you to connect to your webserver and upload, delete, and manage your files directly.
When you sign up with a WordPress hosting provider, they send you an email with your FTP login credentials. If you did not receive this email then please contact your hosting provider via chat or email and then will send them to you right away.
However, if using FTP seems a bit too difficult, then you can also use File Manager. It is a web based application available under your web hosting account. Login to your web hosting account and look for File Manager.
Let us know if you need more help
We will try to improve and make our articles even more beginner friendly in the future.
Administratör
Niki
Many thank you for simple and informative article helped me to start
Chibuike Mba
Thank you very much, this your article about custom page have really pointed me in the right direction for I needed to override theme page in my plugin for some custom post types.
Thank you once again.
WPBeginner Support
We are glad you found it helpful:) Don’t forget to follow us on Twitter for more WordPress tips and tutorials.
Administratör
Wayne from Keys English
Hello,
What can I do if I see the successful transfer of the custompageT1 to my FireFTP client, but when I go into WP admin – create a new page – scroll down to template, the custompageT1 is not in the drop down list to select?
Thanks
Wayne
zamaan
Excellent, very useful. Thank you.
but u fogot to tell where i want to add my custom php code in the template file
Jaczkowski
I learnt something new. Thanks alot
Janet Fuller
This is really extra ordinary. Generally, I do add a page and then create that. But today, I have known something new.
nevenx
Hi,
is it possible to integrate another script to wp (e.g. faucetbox script) on this way?
WPBeginner Support
You can, but it would be better to create a plugin for that.
Administratör
San
Great article. Helps to ease my confusion
Tak
thanks for the very concise tutorial with simple examples. it was super easy to follow!
Radhakrishnan
Dear sir,
I did what you say. but in my page edit screetn there no template comming in attribute. what i can do sir?
levan
many thanks to you my dear its very helpful
Gabriel
This is a great tutorial. Very simple and easy to follow. Thank you!
Waleed Barakat
Thanks for the tutorial! actually i have a games WordPress template and every time i try to create a page treat it as a game and not show the page content as usual, but i think everything will be okay after reading and applying this tutorial on my website:
Thanks again