WordPress begyndte som et redskab for bloggere. Derfor er det oplagt at vi begynder at arbejde i WordPress ved hjĂŠlp af en blog.
Bloggen er stedet hvor du kan fortĂŠlle alle de nye og sjove historier om dig selv eller hvad der sker i din virksomhed.
En blog med nyheder, som billeder, videoer og smÄ fortÊllinger er med til at skabe en skare af loyale brugere der ofte vender tilbage dit website for at se, hvad der sker.
Temaet Twenty twenty-five er et af de bedste steder at begynde nÄr du skal lÊre at bruge WordPress i 2025. Temaet adgabg til alle de nyeste muligheder med WordPress.
Denne artikel viser, hvordan du hurtigt kan gĂžre WordPress klar med en forside og en side, der viser dine blogindlĂŠg.
Hvis du vil lÊre mere om WordPress er det en god ide at prÞve det Ärlige standardtema. Det giver kendskab til de nyeste ideer og muligheder. I 2025 hedder standardtemaet Twenty twenty-five. Der kommer som regel et nyt tema hvert efterÄr.
I WordPress er det en god ide at begynde med at lave nogle sider fĂžrst. Siderne skal nemlig vĂŠre der, hvis de skal ind i Navigations-blokkene (menuerne).
Begynd med at lave siderne uden det egentlige indhold, du kan nĂžjes med en overskrift og eventuelt lidt “mumletekst”, et billede eller sĂ„dan noget.
Indholdet kan du redigere fĂŠrdigt senere.
Begynd med at oprette disse sider:
Begynd med at lave siderne. Senere kan du tilfÞje passende indhold. For nu er overskriften sÄdan set nok.
Begynd med at vĂŠlge de farver, fonte og layoutindstillinger, som vores blokke skal bruge.
Twenty twenty-five er et Full Site Editing (FSE) tema. Det betyder, at du kan udvikle alle dine komponenter og skabeloner direkte i WordPress.
SĂ„ har du adgang til en omfattende vĂŠrktĂžjskasse med typografi og farver:
Stylebook er din designmanual
NÄr du har valgt typografi og farver kan du se resultaterne i den indbyggede Stylebook. WordPress laver automatisk din designmanual. Klik pÄ ikonet, der ligner et Þje.
Hvis noget senere skal Êndres, sÄ kan du redigere det direkte fra din Stylebook!
NĂ„r du opretter skabelonen “Forside”, sĂ„ vil den bestemme, hvordan din forside ser ud.
Lav en side, der skal fungere som forside. Kald den fx “Forside” eller noget lignende:
Indstillinger > LĂŠsning
skal du vĂŠlge “Forside” (eller hvad du har kaldt den) til din forside.
En blog er en side, der viser de nyeste indlĂŠg fĂžrst. Nogen kalder blogsiden “Nyheder”. En blog kan bruges til mange formĂ„l. Bloggen skal ogsĂ„ have en side, som holder pladsen.
TilfĂžj > Side
Giv siden titlen “Blog” eller noget i den stil.
Indhold er unĂždvendigt pĂ„ blog-siden, fordi den bruger skabelonen “Blog forside”.
WordPress henter selv dine indlĂŠg ind pĂ„ siden fra databasen ved hjĂŠlp af blokken “ForespĂžrgsels-loop”.
NĂ„r du skriver et nyt indlĂŠg viser det sig Ăžverst, som du kender det fra en blog eller en online avis.
Avancerede brugere bruger blokken loop til at filtrere indholdet ved hjĂŠlp af taksonomier, som kategorier og tags.
Nu kan vi endelig samle alle trĂ„dene og fortĂŠlle WP at “Forside” skal fungere som sitets forside og at “Blog” skal vise vores blogindlĂŠg.
I Kontrolpanelet skal du klikke pÄ:
Indstillinger > LĂŠsning
Du kan ogsÄ vÊlge, hvor mange indlÊg, som skal vises pÄ blogsidens nyhedsflow.
Gem dine Êndringer ved et klik pÄ den blÄ knap.
Tjek om alt virker ved at gÄ ind pÄ sitets forside.
Nu er dit website sat op med en forside og en blogside. Det bliver sikkert nĂždvendigt at tilfĂžje blokke, som:
Og meget mere. Men nu er den grundlĂŠggende struktur klar til det videre arbejde.
PĂ„ Simply.com – og en lang rĂŠkke alternative webhoteller – kan du installere WordPress [WP] med en hurtig one click install. En modal i stil med denne dukker op:
Udfyld den sÄdan:
| Admin username | Hvis du vĂŠlger navnet “admin” er hackerne allerede 50% inde. Brug noget andet. |
| Admin password | SÞrg for at dit password er sikkert. Du har sikkert 100+ passwords, og ingen husker sÄ meget. Brug en password manager til at huske det, fx den indbyggede i Chrome. |
| Admin email | Brug en email, som du faktisk lĂŠser. Hvis der sker fejl eller noget mistĂŠnkeligt kan WP sende beskedder til dig. |
| Site name | VĂŠlg et passende sitename. Du kan altid ĂŠndre det under “Settings” eller “Indstillinger”, hvis du finder et bedere navn. Sitenavnet kan sĂŠttes ind via en block i WP editoren. |
| Language | VĂŠlg et passende sprog. |
Med one-click kan du installere flere versioner af WP i subdomĂŠner. Du kan med andre ord sĂŠtte dit website op, sĂ„ der er plads til flere udgaver af WP. Det er praktisk, hvis du vil reservere en sĂŠrlig WP til din portfolio – eller hvis du Ăžnsker at et projekt fĂ„r sin egen webadresse.
Her er et par eksempler:
FĂžr du installerer WP i et subdomĂŠne skal det oprettes i Simplys administrationspanel.
Du kan hurtigt installere en WP i et subdomĂŠne; men husk at vĂŠlge subdomĂŠnet inden du klikker installer. Og pas pĂ„ her! Husk at vĂŠlge subdomĂŠnet inden du installerer – ellers risikerer du at overskrive dit website!
Denne video viser processen:
Blokbaserede temaer har en indbygget designmanual. Her kan du klikke pĂ„ f.eks. overskrifter – og fĂ„ adgang til menuen, hvor farver, fonte, baggrunde, etc. kan ĂŠndres.
Med et simpelt screencast kan du vise alle komponenterne i dit tema.
I dag laver vi et fuldstÊndigt site med forside, undersider og en blogsektion. Brugeren kan navigere rundt pÄ siden ved hjÊlp af menuer, ikoner og forskellige links.
Klik pÄ knappen for at se hvordan sÄdan en lÞsning kan se ud i en Playground:
Here is a cool tutorial about a stunning navigation fra Jamie WP. You can download the plugin or even make a Telex remix.
– WordPress kan meget; men ikke alt. Hvordan tilfĂžjer jeg min egen HTML, CSS og scripts?
NÄr du fÄr brug for at programmere dele af lÞsningen selv er der mange kreative muligheder i de blokbaserede temaer:
Kernen i WordPress er programmeret i PHP, der henter dine sider og indlĂŠg i databasen. PHP klistrer det hele sammen til HTML, CSS og JavaScript. Dette sendes til brugerens browser.
Og derfor kan du bÄde style og modificere den kode som WP genererer vil at tilfÞje tilpasset kode i PHP, HTML, CSS og JavaScript.
Dagens arbejde
CSS er relativt nemt at modificere. Her kan du bruge browserens inspect tool. Du kan give mange blokke en id (“HTML anker”) eller CSS klasser efter behov. Under stilarter kan du tilfĂžje ekstra CSS. Muligheden er godt gemt under de tre prikker Ăžverst i Stilarter.
Med denne blok kan du nemt tilfÞje HTML, CSS og JavaScript til enhver side eller indlÊg. Som regel fÄr vi kun brug for nogen kodestumper. LÊngere kodestykker kan evt. redigeres i Visual Studio Code, og sÊttes ind ved copy-paste i blokken.
RĂŠkkefĂžlgen af dine tags er vigtig:
Her er et par eksempler til inspiration:
<!-- CSS -->
<style>
/** Jow, du mÄ godt! */
h1 { color: red; }
</style>
<!-- HTML -->
<div> Er ganske enkelt: HTML </div>
<!-- JAVASCRIPT -->
<script>
alert("Mojn do!")
</script>GĂžr sĂ„dan: Find en karrusel lavet i HTML, CSS og JavaScript – f.eks. pĂ„ W3 Schools eller et andet sted. Brug billeder fra dit mediebibliotek pĂ„ WordPress. De skal helst have ens bredde og hĂžjde, ellers risikerer du at din karrusel “hopper”.
WordPress kernekoden er programmeret i PHP, der sender HTML, CSS og JavaScript til browseren. Koden kan manipuleres, fx hvis du finder id, class, etc. ved hjĂŠlp af browserens “Inspect tool” (UndersĂžg).
Dette plugin er let at bruge, nÄr du fÄr brug for at tilfÞje scripts eller anden kode til dine indlÊg og sider. Her tilfÞjes HTML, CSS og JavaScripts til hele websitet eller specielle dele som: adminpanelet, header, footer eller login-vinduet.
Et childtheme bliver ikke overskrevet, nÄr du opdaterer parentthemet. Med et childtheme kan du kÞre en WP som altid er opdateret.
Hvis du fÄr brug for at redigere filer i temaets mappe, sÄ skal du bruge et childtheme til formÄlet. Nogen vÊlger sÄ at lade vÊre med at installere sikkerhedsopdateringer. Det er mildt sagt en udforsigtig beslutning. Hvis du kender lidt til webprogrammerin, sÄ kan du selv lave et childtheme.
Et childtheme er nemt at bruge: kopier de filer, som skal ĂŠndres fra parent-theme mappen til childtheme mappen. Det er vigtigt, at filerne skal ligger i mapper med prĂŠcis som parent themet.
Du skal bruge et child theme, hvis du f.eks. vil ĂŠndre:
Child themes kan laves ved hjĂŠlp af plugins, som “Create Block Theme“; men det er lettere at kode det selv.
Her er en kort oversigt over de filer, der minimum bÞr vÊre i et childtheme. Klik pÄ filnavnet for at se koden.
| Fil | FormÄl |
|---|---|
| style.css | Kommentarfeltet Þverst har de informationer, som WP bruger, nÄr themet skal vises i Kontrolpanelet. Her kan du evt. tilfÞje ekstra CSS; men stylingen af blokbaserede temaer sker nu i theme.json eller variationer. Mere om det senere. |
| screenshot.png | Er det billede, som viser noget, hvordan dit tema ser ud i kontrolpanelet. |
| functions.php | Her bĂžr du tilfĂžje stylesheets fra parenttheme og childtheme. Du kan ogsĂ„ tilfĂžje JavaScripts og andre CSS’er. LĂŠs mere om mulighederne med functions.php her. |
| index.php | En tom fil, der blokerer uĂžnsket browsen rundt i filerne. Derfor citatet fra Dantes “Inferno”. |
| Github repo | Se her. |
I de fĂžlgende afsnit bygger vi et childtheme og styler det med theme.json og bygger style variations.
I denne Ăžvelse bygger vi et childtheme med editoren Visual Studio Code. Du lĂŠrer, hvordan du kan tilfĂžje farver, fonte og stilvarianter til kontrolpanelet.
BÄde parent og child theme skal vÊre til stede pÄ serveren, hvor det er childthemet, der er aktiveret.
Begynd med at downloade Twenty twenty-five fra WordPress.org. Pak filerne ud i mappen themes.
Derefter fÄr du brug for koden, som laver dit childtheme. Knappen linker til den kode du har brug for. Download eller klon dette repository:
Nu bÞr din mappestruktur se sÄdan ud:
Playground kan bruges til test og udvikling af WordPress temaer. Det er mest praktisk at udvikle et childtheme pÄ din computer og vente med at uploade det til du ved, at alt virker, som det skal.
Hvis du er vant til at arbejde med HTML og CSS kan det nok undre, at stylingen primÊrt foregÄr i theme.json. I WP temaer redigeres style.css relativt sjÊldent. Farver, fonte og de enkelte blokkes udseende styles i JSON.
PrĂžv et eller flere disse eksperimenter:
Her er et eksempel pÄ Êndret farvepalet i theme.json.
Style variations er kopier af theme.json
Kopien omdĂžbes til noget passende, fx
foraarsfarver.json
Opret mappen /styles
Flyt foraarsfarver.json til mappen /styles
Herunder kan du se, hvordan farvepaletten “Variationen” tilfĂžjes i Childtheme-mappen:
styles/variationen.json
Videoen viser resultatet:
Det er mere kompliceret at tilfĂžje fonte. Her skal du oprette en mappe til fontens filer og tilfĂžje den i theme.json (eller en stilvariation).
Ekstra scripts og stylesheets kan – blandt meget andet – tilfĂžjes functions.php. Selv om den er skrevet i PHP, sĂ„ er den relativt let at redigere – sĂ„ lĂŠnge du lader <?php blive stĂ„ende i den fĂžrste linje.
Functions.php i mit eksempel installerer to stylesheets:
Det sker fordi det er det sidste stylesheet i kaskaden, som bestemmer, hvordan tingene endelig skal se ud. SĂ„ childthemets stylesheet for altsĂ„ forrang – og du kan tilfĂžje ekstra CSS dĂ©r, nĂ„r noget skal ĂŠndres.
Hvis du lÊser, at noget kode skal tilfÞjes functions.php fÄr du altid brug for et childtheme.
<?php
// kalder funktionen med stylesheets
add_action(
'wp_enqueue_scripts',
'petj_enqueue_styles' );
// her tilfĂžjes nogle CSS'er
function petj_enqueue_styles() {
// parent theme css
wp_enqueue_style(
'petj-tt5-parent-style',
get_parent_theme_file_uri( 'style.css' ) );
// child theme css
wp_enqueue_style(
'petj_child_enqueue_style',
get_stylesheet_uri() );
}PÄ en lignende mÄde kan du tilfÞje JavaScript; men her skal du bruge wp_enqueue_script() i stedet for wp_enqueue_style.
NÄr du er tilfreds med dit childtheme skal det uploades til serveren. Playground i VSC er selvfÞlelig kun en skitse, sÄ det er ikke her vi fremstiller egentligt indhold.
Det vi har lavet er et tema som du kan arbejde videre med i en “rigtig” WP.
Childthemet uploades til serveren ved at komprimere (zip) mappen mitChildTheme (eller hvad den hedder). Videoen viser det:
Derefter skal du uploade dit childtheme til serveren. Videoen viser, hvordan childthemet installeres. Derefter vĂŠlges en stylevariation – og sitet har fĂ„et et nyt design:
Billedet herunder viser, hvordan farvepaletten fra stylevariation “Variationen” ser ud i kontrolpanelets editor.
Coverbilledet er tegnet af CoPilot (december 2025), der “elegant” lĂžser problemet med at vi ser pigen med computeren; men hvordan skal vi sĂ„ se, hvad der sker pĂ„ hendes skĂŠrm? LĂžsningen krĂŠver en mindre revision af naturlovene – ind til nogen laver sĂ„dan en skĂŠrm. Ideen er ikke helt tosset i en klasse eller nĂ„r flere samarbejder om et design.
Her er jeg ved at forberede forÄrets WP kurser for Multimediedesign og Jordbrugteknolog. Generelt handler undervisningen for begge uddannelser om at sÊtte blogs og webshops op for en kunde med WordPress og WooCommerce. Multimediedesignerne vil desuden lÊre at tilfÞje tilpasset kode, hvor temaet tilpasses med CSS og stilvarianter skrevet i JSON.
Knapperne herunder Ă„bner for Playgrounds, eller “WordPress sandkasser”, hvor du kan gĂ„ pĂ„ opdagelse i den nyeste udgave af WP og gradvist opdage, hvordan du kan arbejde med et blok-baseret tema.
Du kan redigere alle designets komponenter i siteeditoren. Du finder den her:
> Udseende > editor
I alle blok-baserede temaer kan du designe hele sitet. Dette kaldes “Full site editing” (FSE) Det er her du laver fravepaletten, navigation, statiske sider og designer sitets udseende med skabeloner og designmĂžnstre.
Alle WP komponenter kan styles i Styles. Herfra kan du style:
WordPress er designet efter princippet:
“Don’t repeat yourself”
der forkortes til DRY. Skabeloner og blokgrupper er eksempler pÄ DRY-princippet. Skabelonerne prÊsenterer indhold og genbruger blokgrupper, der er ens fra side til side. SÄ skal du ikke lave nye headere og footere, hver gang en ny side eller et indlÊg begynder.
Blokgrupper kan ogsĂ„ vĂŠre praktiske i et design, hvor “product cards” og “call to action” sektioner skal have et ensartet udtryk. Her er det praktisk at lave nogen blokgrupper, sĂ„ du slipper for at gĂžre det samme igen og igen.
Skabelonerne prĂŠsenterer indholdet. De fleste WP-sider og indlĂŠg bestĂ„r af “faste blokke som bruges af flere sider/indlĂŠg” (fx headere, footere, etc.) og “indholds-blokke” der viser, hvor sidens indholdet kommer til syne.
Skabeloner bĂžr ikke have indhold. Skabelonen definerer, hvor dit indhold kommer til syne.
Knappen “Skabeloner” Ă„bner en Playground med oversigten over skabelonerne. Den nĂŠste knap “Eksempel: Pages” Ă„bner en Playground” som viser skabelonen “Pages” der styrerer, hvordan en enkelt side skal se ud.
Under Skabeloner kan du fx tilfĂžje en forside. NĂ„r den er til stede kan du layoute din forside, som du vil.
I arbejdet med design bruger vi ofte de samme mĂžnstre, fx i form af produktkort eller headere og footere, der genbruges af mange sider. NĂ„r du opdager, at du gĂžr det samme igen og igen er en blokgruppe lĂžsningen.
Du designer det som skal genbruges, og opretter en blokgruppe. Den fÄr et navn og kan bruges igen og igen. Blokgrupper sparer arbejde.
Du kan lave dine egne blokgrupper ved at klikke pĂ„ knappen “TilfĂžj blokgruppe” Ăžverst til hĂžjre, eller vĂŠlge at bruge bruge de ca. 70 blokgrupper, som fĂžlger med temaet Twenty twenty-five.
WordPress designere deler deres blokgrupper som Open Source pĂ„ WordPress.org – her kan du sikkert finde inspiration til dine produktioner.
PrĂžv at redigere blokgruppen “Header”. Begynd med at ĂŠndre baggrundsfarven til en eller anden markant farve.
Gem din header.
GÄ nu ind i Skabeloner (Templates). LÊg mÊrke til, hvordan blokgruppen er synkroniseret pÄ alle websidens templates. NÄr du redigerer i en synkroniseret blokgruppe, Êndres alle de tilfÊlde, hvor den er anvendt.
Plugins tilfÞjer funktionalitet til WP. Der er omkring 20.000 plugins som kan downloades. Du kan ogsÄ programmere dine egne. Til dette kursus anbefaler vi, at du begynder med at installere disse plugins:
Klik pÄ knappen for at prÞve hvordan disse plugins fungerer. NÄr du fÄr mere erfaring med WP, kan du tilfÞje flere eller erstatte dem med andre plugins.
Plugins skal aktiveres. Hvis du Ăžnsker at prĂžve Yoast SEO skal pluginet Yoast aktiveres i pluginlisten. De Ăžvrige plugins har vi valgt at aktivere.
Under “Avanceret” skal knappen have et HTML-anker. I koden vil dette navn optrĂŠde som et id. Her kalder jeg HTML-ankeret “knap”.
I en “t”ilpasset HTML blog lĂŠgges et script a la det her:
<script>
knap.addEventListener(
'click',
function (){
alert('Hej verden')
})
</script>Knappen herunder viser at princippet fungerer; men knappens funktion kalder en anden funktion, der Ă„bner en WP Playground i et nyt vindue – bare for at vise, at man kan sĂ„dan noget …
IndsĂŠt et forespĂžrgselsloop i skabelonen Frontpage. Marker, at det som skal vises er indlĂŠg. Ellers vises sidens indhold, og det er ikke meningen.
SÄdan kan du i Þvrigt hente blogindlÊg pÄ alle sider.
Alternativt kan du bruge blokken “seneste indlĂŠg”.
Playground kan bygges ind i en webside. Praktisk med hensyn til demonstrationer og test.
PrÞv ogsÄ at kÞre Playground direkte i browseren:
Knappen herunder linker til et blueprint, der indlÊser en online fil med fuldt design. Zip-filen er eksporteret fra Playground og ligger pÄ en server. Og sÄ er mit kursus klar online:
Blueprintet ser sÄdan ud:
{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"landingPage": "/",
"login": true,
"preferredVersions": {
"wp": "latest",
"php": "8.3"
},
"features": {
"networking": true
},
"steps": [
{
"step": "importWordPressFiles",
"wordPressFilesZip": {
"resource": "url",
"url": "https://playground.thoth.dk/kursus2026.zip"
}
}
]
}WordPress.org – dokumentation: https://developer.wordpress.com/docs/guides/how-to-create-custom-blueprints/
NĂ„r Playground ligger i en iframe kan man ikke “bryde ud i nye vinduer”, fx nĂ„r man skal se, hvordan en side ser ud. Det virker lidt bĂžvlet; men lĂžser faktisk et problem.
NĂ„r nye vinduer Ă„bnes mister man Playgrounds muligheder for at arbejde med indstillinger.
Man kan heller ikke gemme indstillinger i en mappe pÄ computeren. LÞsningen er at eksportere arbejdet til en zip, der igen kan indlÊses via et blueprint.
Ă bner simpelt hen en Playground instance i browseren.
location.href = 'https://playground.wordpress.net/'Se koden pÄ Github.
Her er alle muligheder Ă„bne, og brugeren mĂ„ gerne bryde ud af vinduerne, som WP gĂ„r nĂ„r man fx bruger “Vis indlĂŠg”. Denne mulighed fungerer via location.href.
Om det ene er bedre end det andet? Det kommer an pÄ, hvad du vil.
Formatet ser sÄdan ud:
https://playground.wordpress.net/#{"preferredVersions.... etc. .... }Json kan se sÄdan ud:
{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"landingPage": "/wp-admin/",
"login": true,
"preferredVersions": {
"php": "8.3",
"wp": "latest"
},
"steps": [
{
"step": "installPlugin",
"pluginData": {
"resource": "wordpress.org/plugins",
"slug": "woocommerce"
},
"options": {
"activate": true
}
},
{
"step": "installTheme",
"themeData": {
"resource": "wordpress.org/themes",
"slug": "pendant"
},
"options": {
"activate": true
}
},
{
"step": "updateUserMeta",
"meta": {
"admin_color": "modern"
},
"userId": 1
}
]
}En ĂŠldre version af WP (mellemrum osv. fĂ„r url’en til at se lidt mĂŠrkelig ud; men det virker faktisk):
https://playground.wordpress.net/#{%20%22$schema%22:%20%22https://playground.wordpress.net/blueprint-schema.json%22,%20%22preferredVersions%22:%20{%20%22php%22:%20%228.3%22,%20%22wp%22:%20%226.5%22%20}%20}PrĂžv det her.
Brug “landingpage” nĂ„r en bestemt side skal Ă„bnes, fx designmanualen. Man mĂ„ kunne Ă„bne WP direkte i designmanualen.
Man kan f.eks. Ă„bne direkte i styles editoren:
Videre: zip-filer med design loades.